Offset CSS

Hai mai visto alcuna animazione mentre gioca a giochi online o utilizzando qualsiasi sito Web per informazioni o conoscenze? Queste animazioni possono rendere lo strumento, il gioco o il sito Web più estetico ed elegante. Una di quelle animazioni è il movimento di alcuni elementi sullo schermo della pagina web. L'attributo Offset CSS ci consente di animare alcuni elementi dello script HTML. Questo attributo può apportare modifiche a molte cose per il rispettivo elemento della sceneggiatura HTML: la sua posizione, percorso, movimento e spazio tra contorno e bordo. In questa guida, discuteremo dell'uso della proprietà offset insieme ai suoi diversi attributi.

Esempio 01: Offset-Outline

Per utilizzare la proprietà dell'offset di schema per dare spazio trasparente tra con il bordo degli elementi e il suo profilo, dobbiamo creare una sezione "div" sulla pagina web. Abbiamo avviato questo codice con il tag HTML e lo abbiamo concluso con il tag di chiusura HTML. All'interno del tag del corpo, abbiamo utilizzato il tag "Div" per creare una sezione sulla pagina Web HTML. Questo tag "Div" contiene solo una semplice intestazione o frase di tre parole ed è stato chiuso con la rottura della linea aggiunta dal tag della linea di rottura "
".

All'interno del tag "head" di questo codice HTML, abbiamo intitolato questa pagina Web su "Offset-Scherma" e usando il tag "Style" per modellare la sezione "Div" della nostra pagina HTML. Abbiamo aggiunto 10 pixel margini per la sezione "Div" insieme a Solid Crimson Border a 5 pixel. Il colore di sfondo per questa sezione "Div" sarebbe "Aqua" e il contorno sarebbe di colore viola tratteggiato a 4 pixel. Abbiamo anche usato la proprietà "Opset-Opset" per dare un divario di 15 pixel tra il bordo della sezione "Div" e il suo contorno. Salviamo questo codice ed eseguiamolo con il menu "Esegui" del codice Visual Studio.

Dopo la riuscita esecuzione di questo codice nel browser Chrome, abbiamo l'output di seguito della pagina HTML. Ecco un chiaro divario tra il bordo cremisi a 5 pixel del tag DIV e il suo profilo tratteggiato da 4 pixel. Puoi vedere che lo spazio non ha colore.

Esempio 02: posizione offset

Qui è in grado di utilizzare la proprietà della posizione offset di CSS per specificare la posizione di avvio di qualsiasi elemento della pagina Web HTML. Cominciamo con l'uso di tag di apertura e chiusura HTML. All'interno di questo tag, abbiamo fatto uso di etichette per il corpo e la testa. Il tag del corpo contiene prima semplici 2 intestazioni di dimensioni 2 con titoli diversi. Dopodiché sono stati usati due tag "div". Il tag "Div" esterno è stato specificato con l'ID "A" mentre il suo tag "Div" interiore è stato specificato con l'ID "B" per la differenziazione nello stile.

I tag "div" e corpo sono chiusi qui. All'interno del tag "head", abbiamo utilizzato il tag del titolo per titolo questa pagina web HTML e il tag di stile per aggiungere un po 'di stile al corpo della nostra pagina web. Abbiamo usato il "#A" per modellare il tag "Div" esterno usando il suo ID "A". La posizione di offset per questa sezione "div" è stata specificata con il valore "relativo". La sua larghezza e altezza sarebbero specificate come 200 px con il bordo del colore cremisi solido 5px attorno a questo "div". La posizione del tag "Div" interno è stata impostata su assoluta che è correlata all'elemento adiacente. La larghezza e l'altezza per la sezione "Div" interna sono impostate su 75pixel con il bordo cremisi di 5px solido.

Lo spazio o l'imbottitura superiore e sinistro sono stati definiti rispetto alla sezione esterna per questo "div": superiore: 180px e sinistra: 7px. Il nostro codice è ora pronto per essere eseguito sul browser.

L'uso del valore "relativo" per la proprietà della posizione offset pone la sezione "div" esterna rispetto agli altri elementi della nostra pagina HTML. Mentre l'uso del valore di posizione "assoluto" insieme all'impostazione della parte superiore e dell'imbottitura sinistra ha posizionato la sezione "div" interiore al centro della "div" esterna.

Esempio 03: Path offset e Offset-Anchor

Proviamo a utilizzare la proprietà di Offset-Anchor e Offset Path per creare animazione all'interno della pagina Web HTML. Lo stesso titolo è stato dato a questa pagina web. All'interno del tag del corpo, abbiamo utilizzato tag a tre sezioni per creare diverse sezioni sulla pagina web seguite dai tag "Div" per differenziarli. Tutti e tre i tag "Div" contengono un singolo testo all'interno e sono stati specificati con tre diverse classi: A, B e C. La parte principale di questo codice HTML è il suo tag di stile che contiene molte proprietà CSS per animare tre tag. Tutti e tre i tag "Div" contengono la proprietà Offset-Path per muoversi lungo il percorso definito per esso in modo che non sia così lineare. La larghezza e l'altezza di tutti e tre gli elementi Div sarebbero rispettivamente da 100 e 30 pixel. L'animazione è stata impostata per spostare gli elementi Div insieme alla velocità di 3000 millisecondi senza fermarsi. Pertanto, viene utilizzato l'attributo infinito. Ecco che arriva l'elemento sezione per lo styling. La sua immagine di sfondo sarebbe un gradiente lineare e sarebbe trasparente al 49 percento dalla parte superiore, 50 percento di nero da sinistra, destra e media e il 62 percento trasparente dal basso. Inoltre, ogni sezione conterrebbe bordo solido da 2 pixel e 10 pixel margini dal fondo.

La proprietà Offset-Anchor è stata utilizzata per specificare un punto nell'elemento "Div" per viaggiare lungo il percorso che è stato impostato dall'uso della proprietà "Offset-Path" nello stile principale "Div". Ciò significa che il punto di un elemento "div" sarebbe muoversi sul particolare percorso non lineare sulla nostra schermata web. Sono stati impostati i diversi colori di sfondo per questi elementi "div", colore di testo e allineamento del testo per questi elementi. Salviamo ed eseguiamo questo codice per vedere le modifiche.

Tutti e tre gli elementi DIV si muoveranno lungo il percorso non retribuito non lineare in tre diverse sezioni, come mostrato di seguito. Questi tre elementi sono etichettati come uno, due e tre; spostarsi da sinistra a destra dello schermo.

Abbiamo aggiornato il codice e utilizzato i diversi valori per la proprietà Offset-Path all'interno dello stile di questo codice HTML. Questo percorso farebbe muovere i nostri elementi Div in un movimento a zig-zag. Inoltre, abbiamo aggiornato l'altezza e la larghezza di queste sezioni di div a 40 pixel. La distanza di movimento viene anche aggiunta mentre il resto è invariato.

L'output di questo codice aggiornato ci mostra tre piccoli elementi Div con movimento a zig-zag lungo ciascuna delle loro sezioni.

Conclusione

Questo articolo riguarda l'uso di diverse proprietà offset per modellare e animare i diversi elementi di una pagina web HTML. Abbiamo fornito esempio utilizzando la proprietà Offset-Outline per aggiungere spazio tra il bordo e il contorno di un elemento specifico. Un altro esempio è usato per dimostrare l'uso della proprietà in posizione offset per posizionare l'elemento specifico rispetto ad altri elementi nel corpo. Abbiamo anche cercato di animare e spostare gli elementi HTML sulla schermata del browser su un percorso specifico usando l'ancoraggio offset e le proprietà di percorso offset.