Ombra sui testi con text-shadow CSS
2 Commenti - Categoria: CSS
Continuiamo la rassegna sugli effetti CSS3. Oggi vediamo comre realizzare un effetto ombra sui nostri testi direttamente dal codice CSS. Se non utilizzi Internet Explorer (unico browser super utilizzato 
che non supporta i CSS3, almeno fino alla versione 8), allora ti sarai sicuramente accorto che i titoli di ogni post su questo blog presentano una leggerissima sfumatura. Per realizzare questo effetto non c’è bisogno di alcuna immagine, bastano solo due righe di codice CSS 3.
Per questo effetto non bisogna ricorrere ai prefissi -webkit e -moz, utilizzati per creare angoli arrotondati ai box e per creare l’effetto ombra agli oggetti, poichè esiste: text-shadow.
Vediamo subito un esempio di utilizzo:
TESTO
e il suo stralcio di codice:
<h3 style="text-shadow: 2px 2px 4px #ff0000;"> TESTO </h3>
Come accadeva per box-shadow, anche text-shadow presenta 4 valori che sono esattamente gli stessi:
- scostamento orizzontale (valore positivo a destra, valore negativo asinistra)
- scostamento verticale (valore positivo in basso, valore negativo in alto)
- raggio di sfocatura dell’ombra
- colore dell’ombra
In questo esempio ho volutamente creato l’ombra di colore rosso per evidenziare subito l’effetto.
Ecco adesso una mini carrellata di testi con ombre di colore grigio:
TESTO
TESTO
TESTO
TESTO
belisma
Stupendi, grazie!
Ottima soluzione per rendere più accattivante il testo.
Andrea Leti
Effettivamente
sono una bella alternativa..