Ombre cross-browser con i CSS, senza immagini

Sei qui: Homepage » css, web design » Ombre cross-browser con i CSS, senza immagini

nov 13 2009

Ombre cross-browser con i CSS, senza immagini

Come sfruttare la proprietà box-shadow dei CSS3 ed ottenere risultati simili anche su Internet Explorer.

La proprietà box-shadow (CSS3) permette di applicare ombre ad elementi contenitori di tipo block. Funziona in maniera simile alla proprietà text-shadow, ma il W3C al momento ne ha sospeso l’approfondimento per studiarne l’implementazione in maniera più approfondita.

Come funziona box-shadow?

La proprietà può essere utilizzata su Firefox 3.5 e sui browser basati su webkit (Safari e Chrome) con i soliti prefissi:

-moz-box-shadow per Firefox
-webkit-box-shadow per Safari e Chrome

L’espressione è semplicemente:

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

dove i parametri sono nell’ordine:

la distanza dell’ombra in orizzontale ed in verticale
il raggio
il colore

Ho notato che tra i browser webkit la resa è migliore su Safari: Chrome pur visualizzando l’ombra ha qualche problema con gli angoli ed il loro arrotondamento.

La soluzione per Internet Explorer

La cosa interessante, scoperta per caso sul blog di Nick Dunn, è che con alcuni hack è già possibile sfruttare questa proprietà per ottenere un risultato valido anche su Internet Explorer.

Esistono infatti alcuni filtri proprietari della Microsoft che in queste circostanze sono l’unica soluzione possibile. Era già successo per i .png trasparenti su IE6, e la situazione è analoga anche in questo caso. Combinando i filtri Glow e Shadow, o ancora meglio utilizzando solamente Shadow è possibile ottenere un’ombra molto simile su tutte le versioni di Explorer, a partire dalla 5.5.

Il codice necessario è il seguente, da inserire in un commento condizionale:

filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);

Color e strenght dell’ombra possono ovviamente essere modificati secondo le necessità.

Demo

box-shadow

Ho realizzato una pagina dimostrativa di questo effetto.

Il risultato cambierà leggermente a seconda del browser utilizzato, ma resterà comunque coerente. La soluzione non è esente da difetti, ma è un buon compromesso per aggiungere dettagli in più ad un design senza appesantirlo con delle immagini. C’è anche da considerare che spesso è complicato dare un’ombra ad un contenitore, soprattutto se questo ha delle dimensioni variabili: l’unica soluzione è utilizzare del codice html superfluo o adottare questo metodo.

I difetti principali che ho riscontrato sono:

CSS non valido
niente ombra su Firefox < 3.5 e su Opera
uso di hack per Internet Explorer

A voi la scelta se adottare questa soluzione: è una possibilità da tenere in considerazione, ma la sua efficacia è da valutare a seconda del progetto. Niente vieta comunque di adottare anche solo la soluzione per Firefox come progressive enhancement, offrendo un’esperienza migliore di navigazione ad alcuni utenti.

Usi Twitter?

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

Classificato in css, web design. Puoi fare un trackback dal tuo sito.

Luca 13 novembre 2009 alle 09:56

Anche se è un po “sperimentale” è molto bello l’effetto che si ha.

Concordo per i principali difetti che hai elencato.

ciao

Marco Pedota - Studio grafico Artistiko 14 novembre 2009 alle 02:29

Il CSS3 è molto intrigante, e credo che sperimentarlo, anche in anticipo, sia giusto. Alla fine bisogna solo tenere presente che il sito ed i contenuti devono essere comunque totalmente accessibili e usufruibili anche senza il supporto al CSS3. Questo “premia” chi ha browser aggiornati, e comuqnue non penalizza chi ha browser che ancora non supportano CSS3.
Purtroppo Opera, nonostante sia a mio avviso forse il miglior browser (anche se usato circa dal 2% dell’utenza), non supporta CSS3 (nemmeno l’amatissimo border-radius).