Effetti speciali di testi HTML

Autore: Laura McKinney
Data Della Creazione: 2 Aprile 2021
Data Di Aggiornamento: 13 Maggio 2024
Anonim
Create your fade in overlay text animation like never before using HTML and CSS only
Video: Create your fade in overlay text animation like never before using HTML and CSS only

Contenuto

HTML e CSS possono produrre effetti di testo interessanti, oltre alla formattazione standard come la dimensione del carattere e il colore di sfondo. Gli effetti speciali in HTML fanno sì che il testo appaia e si comporti in modi insoliti che attirano l'attenzione dello spettatore. Usali per animare una pagina ferma o per aggiungere un testo semplice.


Effetti speciali di testi HTML (Polka Dot RF / Polka Dot / Getty Images)

Capolettera

Nell'elaborazione di testi, un gatto di rilascio ingrandisce la prima lettera di un paragrafo. Puoi riprodurre questo effetto sulle tue pagine web usando HTML e CSS. Utilizzare la proprietà "float" per allineare la lettera capitolare e la dimensione del carattere per aumentarne le dimensioni rispetto al resto del testo nel paragrafo. Metti i personaggi nei tag "span".

esempio:

E Questo è un esempio di effetto capolettera che utilizza la proprietà float.

Testo a rotazione

L'effetto di selezione (margine) in HTML fa sì che il testo si sposti in modi diversi. Il comando "direction" nel codice indica al browser dove si muoverà il testo: su, giù, sinistra o destra. L'attributo "comportamento" descrive come si sposterà il testo. L'attributo "Scorri" fa sì che il testo si sposti oltre la sua area visibile, per poi riapparire. Il comando "diapositive" fa sì che il testo si fermi alla fine del margine, mentre "alternato" fa muovere il testo da un lato all'altro. Usa il comando "scrollamount" per determinare la velocità, e più grande è il numero, più veloce è lo scorrimento.


esempio:

Arrotolare il testo!

Titolo mouseover (mouseover)

Il tag span HTML consente al testo di apparire sopra l'area in cui è inserito. Ad esempio, se si desidera aggiungere un riepilogo di un paragrafo, inserire il testo utilizzando il tag span.

esempio:

Testo del paragrafo qui.