CSS3 text shadows

Come potete notare, ho aggiunto un po’ di ombre (shadow) nei titoli dei post, nei link e nella sidebar. Il tutto è fatto tramite l’utilizzo di un trucchetto sul foglio stile CSS del blog.

Il CSS3 ha una proprietà chiamata text-shadow che permette di aggiungere un’ombra ad ogni lettera di un testo. L’operazione non è molto complessa ed è da eseguire sul vostro file di stile.css

La forma più semplice è questa:

h3 {text-shadow: 0.1em 0.1em #333}

La quale va ad aggiungere un’ombra grigio scuro (#333) spostata un po’ verso destra (0.1em) e il basso (0.1em) rispetto al testo normale. In questa forma più semplice la proprietà ‘text-shadow’ ha due parti: il colore (come il #333 di sopra) e l’offset (0.1em 0.1em nell’esempio di sopra). Questo dà luogo ad un ombra nitida all’indicato offset.

Però non è la forma che ho utilizzato io.  A me interessava un’ombra un po’ più sfumata è un po’ più “cool” e quindi, navigando un po’, ho trovato quello che fa per me. Il giochetto è semplice, il grado di sfocatura è dato con un altro parametro aggiunto dopo l’offset.

h3.b {text-shadow: 0.1em 0.1em 0.2em #ababab}

In questo esempio si può notare dove ho aggiunto il grado di sfumatura all’ombra, tra l’offset ed il colore grigio chiaro (#ababab). Logicamente più il valore del grado di sfocatura è alto e più l’ombra sarà sfumata.

Bene, ultima cosa, prima di smanettare con i foglio stile, fatevi una copia di backup (non si sa mai). Spero di essere stato abbastanza chiaro nell’esposizione ma se avete domande non esitate.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: