Fogli di stile CSS è un linguaggio di stile che permette ai progettisti Web di specificare caratteri, colori e altri stili che controllano l'aspetto di una pagina Web. Più complicato i layout CSS strutture intero, ma è possibile anche utilizzare per creare interessanti effetti di testo. Con CSS di livello 3 (CSS3), è possibile applicare effetti non disponibili nelle versioni precedenti di CSS: ombre, bagliori, testo ruotato e testo anche tridimensionale.

Ombre di goccia

Prima ombre testo CSS3 è diventato disponibile, Web designer necessari per utilizzare i file di immagine grafica per creare intestazioni con testo ombreggiato. Questo codice, tuttavia, ora darà qualsiasi testo nella pagina un'ombra:

ombreggiatura del testo: 1px 1px 3px rgba(0,0,0,0.3);

Il codice sopra riportato può andare all'interno di qualsiasi regola di stile in un foglio di stile. I primi due valori rappresentano gli offset superiore e sinistro. Quanto all'ombra è sfocata dipende il terzo valore; valori più elevati causano maggiore sfocatura. L'ultimo valore è il colore, ma l'esempio utilizza RGBa (rosso, verde, blu e alfa) anziché il codice esadecimale del colore usuale utilizzato nelle pagine Web. L'ultimo valore di RGBa rappresenta il livello di trasparenza da zero a uno, mostrato alla prima cifra decimale.

Testo d'ardore

Testo d'ardore utilizza la stessa proprietà di codice come ombre testo. Quando si posiziona il testo su uno sfondo scuro, si può dare un'ombreggiatura del testo di colore chiaro con nessuna compensazione:

ombreggiatura del testo: 0px 0px 10px rgba(0,255,0,0.7);

Questo esempio crea un bagliore verde brillante intorno al testo. Il valore della sfocatura di 10 pixel ammorbidisce la sfocatura, mentre il livello di trasparenza del 70 per cento nel codice RGBa tonifica il colore un po ' giù.

Testo ruotato

La proprietà di "trasformazione" in CSS3 permette di ruotare il testo, impostazione di traverso o addirittura ruotandolo sul suo lato. Ecco la sintassi:

trasformare: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filtro: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Non è l'ultima riga di codice CSS3 affatto; si tratta di un filtro di Internet Explorer che funziona in tutte le versioni di IE. Altre due linee contengono "-webkit" e "-moz" prefissi perché «trasforma» non è una proprietà CSS3 ufficiale ancora. Questo codice di esempio farà testo ruotare in modo che venga eseguito verticalmente.

Testo tridimensionale

Questo effetto di testo utilizza anche le ombre del testo, ma utilizza solide ombre accatastate uno sopra l'altro a comparire a "spingere" il testo dalla pagina. In realtà, le ombre sono cascata verso il basso.

ombreggiatura del testo: 1px 0px 0 #ccc, 2px 0 0 #bbb, 3px 0 #aaa 0, 0 4px 0 #999, 5px 0 0 #888;

Si tratta di una versione semplificata della tecnica creata dal designer Mark Otto. Ogni ombra di testo è separato da una virgola, e ogni ombra è una tonalità di grigio più scuro di quello precedente. Le ombre anche lo stack giù ulteriormente e ulteriormente.