Oggi spieghiamo cin un tutorial facile facile come creare un effetto ombra su un testo, senza l’uso di grafica e pasticci vari, esatto, perchè si potrà fare da codice, agendo sui fogli di stile e quindi parliamo dei CSS. Infatti con i CSS è possibile applicare quest’effetto con una semplice proprietà chiamata text-shadow , che fino a poco tempo fa presente solo su Safari (fin dalla prima versione!) adesso funge anche su Firefox, Chrome, Opera. Ovviamente IE è u caso apparte, ma poco ci importa!

Ma vediamo come agire sul codice impostando i 4 parametri necessari: spostamento dell’ombra verso destra, spostamento verso il basso, sfocatura e colore.

h2 { text-shadow: 5px 5px 4px #000; }

Finito

Nell’esempio sopra di cui sotto troviamo diversi esempi, viene semplicemente specificato che il titolo H2 in questo caso (ma può essere impostato su qualsiasi div) ha un ombra spostata di 5px a destra , 5px giù (con i numeri negativi si sposta a sinistra e sopra, in modo da regolare l’angolo dell’ombra), il 3 parametro, indica che deve avere 4px di sfocatura e l’ultimo, è il colore dell’ombra, se non viene impostato assume il colore del testo H2.

Questo effetto è molto utile nel caso vogliamo mettere in risalto alcuni testi del nostro blog. Ma occhio a non abusarne, perchè ne soffre la leggibilità del sito, quindi mai utilizzare un colore di testo uguale al background su cui risiede. Nel caso in cui l’utente visualizza il testo da un browser che non supporta tale proprietà, be, pazienza, semplicemente non lo visualizzaerà!

Altri esempi cool:

GraphiCal.it un blog di ispirazione

background:#404040;
color:#fff;
text-shadow: 1px 1px 0px #000;

Continuami a seguire!

background:#ccc;
color:#505050;
text-shadow: 1px 1px 0px #fff;

Su facebook ad esempio

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

O su twitter, o via mail…

background:#ccc;
color:#505050;
text-shadow: -1px -1px 0px #202020, 1px 1px 0px #fff;

…e se ti è piaciuto l’articolo

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

…condividilo in rete!   – by GraphiCal.it

background:#404040;
color:#00ff0f;
text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;