Cascading Style Sheets è un linguaggio di stile che permette ai progettisti Web per specificare i font, i colori e altri stili che controllano l'aspetto di una pagina Web. Il più complicato strutture CSS intero layout, ma è anche possibile utilizzarlo per creare effetti di testo interessanti. Con CSS di livello 3 (CSS3), è possibile applicare effetti non disponibili nelle versioni precedenti CSS: ombre, bagliori, testo ruotato e il testo anche tridimensionali.

ombre

Prima le ombre del testo CSS3 si sono resi disponibili, i progettisti Web necessari per utilizzare i file di immagine grafica per renderla intestazioni con testo ombreggiato. Questo codice, tuttavia, sarà ora dare alcun testo nella pagina un'ombra esterna:

text-shadow: 1px 1px rgba 3px (0,0,0,0.3);

Il codice di cui sopra può andare all'interno di qualsiasi regola di stile in un foglio di stile. I primi due valori rappresentano sinistra e in alto offset. Quanto l'ombra è sfocata dipende dal terzo valore; valori più elevati provocano una maggiore sfocatura. L'ultimo valore è il colore, ma l'esempio utilizza RGBA (Rosso, Verde, Blu e Alfa) invece del solito codice esadecimale del colore utilizzato nelle pagine Web. L'ultimo valore RGBA rappresenta il livello di trasparenza da zero ad uno, indicato alla prima cifra decimale.

Glowing Testo

Glowing testo utilizza la stessa proprietà codice come le ombre del testo. Quando si posiziona il testo su uno sfondo scuro, si può dare un ombra di testo di colore chiaro, senza compensazione:

text-shadow: 0px 0px 10px rgba (0,255,0,0.7);

Questo esempio creerà un bagliore luminoso verde intorno al testo. Il valore di sfocatura 10 pixel ammorbidisce la sfocatura, mentre il livello di trasparenza del 70 per cento nel codice RGBA toni il colore un po 'giù.

Testo ruotato

La proprietà "trasformare" in CSS3 permette di ruotare il testo, impostandola traverso o addirittura girando su un lato. Ecco la sintassi:

transform: rotate (-90deg);
-webkit-transform: rotate (-90deg);
-moz-transform: rotate (-90deg);
Filtro: progid: DXImageTransform.Microsoft.BasicImage (rotazione = 3);

L'ultima riga di codice non è CSS3 affatto; questo è un filtro di Internet Explorer che funziona in tutte le versioni di IE. Altri due righe contengono "-webkit" e prefissi "-moz", perché "trasformare" non è ancora una proprietà ufficiale CSS3. Questo codice di esempio farà ruotare il testo in modo che sia in verticale.

Testo tridimensionale

Questo effetto testo utilizza anche le ombre del testo, ma utilizza le ombre solide accatastati uno sopra l'altro per apparire "push up" il testo dalla pagina. In realtà, le ombre sono cascata verso il basso.

text-shadow: 0px 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 # 999, 0 5px 0 # 888;

Questa è una versione semplificata della tecnica creata dal designer Mark Otto. Ogni ombra di testo è separato da una virgola, ed ogni ombra è una tonalità di grigio più scuro di quello precedente. Le ombre impilano anche verso il basso sempre di più.