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
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.
Anche se è un po “sperimentale” è molto bello l’effetto che si ha.
Concordo per i principali difetti che hai elencato.
ciao
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).
…. interessante … ma proprio non ce lo caviamo di dosso questo maledetto IE ????? :-)
sto utilizzando queste proprietà CSS su un progetto in fase di sviluppo
il problema però che ho dovuto affrontare è che non è possibile definire l’opacità dell’ombra, mentre nei design è abbastanza comune.
la proprietà “strength” ne definisce in realtà l’ampiezza.
la soluzione per mozilla e webkit c’è, ed è semplice: basta usare un’altra nuova caratteristica CSS, i colori rgba.
purtroppo IE non supporta i colori rgba, e non sono riuscito a trovare nessun’altro trick valido
sto pensando però di utilizzare un plugin per jQuery (box-shadow, per l’appunto) e di cambiare l’opacità.
Tempo fa su blographik scrissi un’articolo che parlava delle ombre al testo.
Le ombre ai box sono eccezzionali!
Grazie Tommaso! Sei sempre un Grande!
ottimo! grazie ;)
@Luca Colli: penso proprio di no.
davvero molto interessante soprattutto il trick per Ie, complimenti gli altri articoli che ho letto sull’argomento non lo avevano.
C’e’ una soluzione per Opera, se ci fosse io lo userei da subito.
ciao e buon lavoro!