blog

CSS3 Text Shadow: effetto ombra sul testo

martedì 15 febbraio 2011

CSS3 Text Shadow effetto ombra sul testo

Continua la rubrica Proprietà CSS3, nel quale ogni mese pubblicherò una nuova funzione CSS3 per abbellire e alleggerire il vostro sito.

La proprietà CSS3 che andremo a considerare oggi è: text-shadow che permette di aggiungere una o più ombreggiature ad un testo.

Vediamo subito come si presenta:

Testo Ombreggiato

La sintassi:

text-shadow: margine-x margine-y diffusione colore;

 

Text-Shadow di base

Di base, il text-shadow richiede 2 valori: la lunghezza in unità di misura o percentuale dell’ombreggiatura su l’asse orizzontale e sull’asse verticale.

Esempio di base di regole css:

Text-Shadow di base

text-shadow: 3px 3px;

C’è da dire che questa proprietà non è compatibile con tutti i browser.

 

Text-shadow con ombreggiatura colorata

Come si può notare dall’esempio precedente, se il colore viene omesso, l’ombreggiatura assegnerà di default il colore del testo stesso.

Per specificare il colore dell’ombreggiatura è necessario un terzo valore, ovvero il codice relativo al colore, come possiamo notare da questo esempio:

Text-Shadow con ombra colorata

text-shadow: 3px 3px #000;

Nella definizione del text-shadow, i valori in pixel dell’asse orizzontale e verticale possono avere anche un valore negativo:

Text-Shadow con ombra colorata

text-shadow: -3px -3px #000;

 

Text-shadow con ombreggiatura sfocata

Negli esempi precedenti l’ombra è la ripetizione fedele del testo che si trova in primo piano. Per sfocare i bordi dell’ombra aggiungiamo un quarto valore subito prima della definizione del colore, ecco un’esempio:

Text-Shadow con ombra sfocata

text-shadow: 3px 3px 5px #000;

Nella definizione del text-shadow, i valori in pixel dell’asse orizzontale e verticale possono avere anche un valore nullo:

Text-Shadow con ombra sfocata

text-shadow: 0 0 5px #000;

 

Text-shadow con ombreggiatura multipla

Ultimamente, alcuni browser supportano l’ombreggiatura multipla, che consiste nell’applicare a un singolo elemento più ombreggiature separate tra di loro con una virgola, vediamo il risultato:

Text-Shadow con ombra multipla

text-shadow: -4px -4px #FFCC00, 4px 4px 8px #000;

 

Altri esempi di text-shadow

Testo Incavato

background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

Testo in Rilievo

background:#404040;
color:#505050;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

Effetto fiamma

background:#666666;
color:#333333;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Effetto Neon

background:#404040;
color:#CC065E;
text-shadow: 0px 0px 10px #CC065E, -1px -1px #000;
Categorie: CSS
Tag:

3 Commenti

  1. Ciro

    15 febbraio 2011, 21:52

    Bell’articolo Simone, solo che non bisogna abusarne troppo di questi effetti 😉

    ah dimenticavo, complimenti per l’immagine 🙂

  2. Simone Forti

    15 febbraio 2011, 22:02

    Hai proprio ragione Ciro..non bisogna abusarne per 2 motivi, in primo luogo perchè ancora il CSS3 non è completamente entrato negli standard di tutti i browser e poi perchè esagerando si rischia di avere come risultato un sito pacchiano.

  3. Vale76

    8 agosto 2013, 23:06

    grazie per il bel tutorial 😉
    ho realizzato per il mio sito un semplice testo con un singolo effetto ombra, e non mi ha dato problemi: ho testato il risultato su vari browser ricorrenti (firefox chrome opera, i.e.), da windows, da ubuntu e da mint e funziona bene in tutti i casi.
    Comunque anche io ho deciso che è meglio non farsi prendere troppo dalla “febbre” CSS, per non abusarne, effettivamente 😉
    Grazie ancora.

Scrivi un commento

© 2010-2017 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons