CSS: effetto ombra sul testo con Text-shadow

04 feb 2010 2 Commenti

by Davide Calignanoin Tutorials Tags: codice, css

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 :D

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;

Post che ti potrebbero interessare

Effetto su testo usando l’erbetta
Typography design e graphic design un mix d’effetto!
Creare un effetto di distorsione dinamica
Creare delle slide originali con effetto 3D

Previous Photoshop 5: alcune interessanti caratteristiche! Next 42 Pubblicità creative e divertenti

2 Commenti (+aggiungi il tuo?)

1. soultutorial.altervista , Martina
   gen 04, 2011 @ 12:35:23

   Bella guida, la stavo cercando! E’ una delle più aprrofondite che ho trovato sull’argomento.
   Continuerò a girare per il tuo blog e grazie ancora per aver postato questa bellissima guida!
   Alla prossima!

   Replica

2. KinGdom
   mar 15, 2011 @ 01:41:12

   Non mi viene lo stesso effetto Azd

   Replica