Effetto ombra testo con CSS3 box-shadow

Molti degli effetti ombra più belli vengono realizzati con programmi di fotoritocco, come ad esempio Adobe Photoshop.

Tuttavia oggi si stanno iniziando a delineare delle alternative molto valide, sopratutto se si parla di grafica web… Infatti è possibile realizzare ombre di ogni genere sui testi, direttamente dal codice CSS3.

Codice CSS box shadow

Ecco come si presenta il codice per la realizzazione delle ombre:

box-shadow: 3px 3px 10px 5px #000;

1. il primo valore rappresenta l’Horizontal offset, distanza orizzontale.
2. il secondo, il Vertical offset, distanza verticale.
3. Blur radius, ovvero il grado di sfocatura dell’ombra.
4. Spread distance, distanza di diffusione.
5. Color.

Compatibilità con i browser

Per rendere compatibile questa funzione con tutti i browser, bisogna richiamare diversi tipi di codice:

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);

Inoltre abbiamo la possibilità di orientare l’ombra e curvarla in base alle nostre preferenze… per farlo bisogna aggiungere quest’altro codice:

-webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);