Ombre agli oggetti con CSS3 senza immagini
5 Commenti - Categoria: CSS
I CSS da sempre di accompagnango nella nostra avventura da Webdesigner, permettendoci un sempre piu controllo delle nostre pagine web. La versione CSS3 ha voluto proprio fare un ulteriore passo verso la versatilità e la leggerezza delle pagine sempre più prive di immagini.
Grazie al codice CSS3, utilizzando i prefissi -moz e -webkit, come daltronde è stato fatto per border-radius, utilizzare la proprietà box-shadow.
Vediamo subito un esempio di codice:
-moz-box-shadow: 10px 10px 20px #000000; -moz-box-shadow: 10px 10px 20px #000000;
Questa proprietà come facilmente deducibile ammette 4 valori che sono:
- Scostamento orizzontale dell’ombra (valori positivi a destra, valori negativi a sinistra)
- Scostamento verticale dell’ombra (valori positivi a in basso, valori negativi in alto)
- Sfocatura dell’ombra
- Colore dell’ombra
Attenzione! Box shadow non funziona ancora su tutti i browser! Utilizzandola dunque sapete a priori che seun utente non utilizza Firefox 3.6 o superiore o Safari 3.1 e superiore non vedrà l’effetto ombra.
La proprietà box-shadow non viene integrata dal box model della pagina quindi la larghezza e l’altezza dell’elementorimangono quelli dichiarati nel css.
Il codice alla lente
In questo primo esempio creiamo un mini box con la scritta prova box, che avrà il bordo di un pixel nero e l’ombra arancione scostata di 5px a destra, in basso e sfuocata di 5px;
<div style="width: 300px; height: 50px; border: 1px solid #000000; -moz-box-shadow:5px 5px 5px #ff6600; -webkit-box-shadow:5px 5px 5px #ff6600; padding: 10px; margin: 0 auto;">prova box</div>
In questo Secondo esempio creiamo un mini box con la scritta prova box, che avrà il bordo di un pixel nero e l’ombra rossa scostata di 5px a sinistra, in
alto e sfuocata di 10px;
<div style="width: 300px; height: 50px; border: 1px solid #000000; -moz-box-shadow:-5px -5px 10px #ff0000; -webkit-box-shadow:-5px -5px 10px #ff0000;padding: 10px; margin: 0pt auto;">prova box</div>
Questa proprietà è belle se applicata e congiunta alla proprietà border-radius, già citata nel precedente articolo, che serve per creare degli angoli arrotondati con i CSS3
Jacopo Michieli
Ma che bei
trucchetti! Peccato però inutilizzabili dai professionisti che devono fare i conti con la stragrande diffusione di Internet Explorer e quindi possono solo sperare di arrabattarsi tra immagini ridicole e javascript impossibili.
Risorse free per webmaster
Grazie, leggo con attenzione i tuoi articoli sempre molto aggiornati.
Peccato che però in questo caso le ombre
non si vedano con Explorer che è uno dei broser più usati.
Andrea Leti
@Jacopo @belisma
Ragazzi purtroppo
lo sò!
Sembra però che con la versione 9 di Internet Explorer questo problema non dovrebbe più esistere.
Facciamo una protesta contro Internet Explorer?
alessandro
la versione nove dovrà supportarla, ma comunque almeno che non sia per un cliente io continuo a sostenere il css3 e l’html 5, chiaramente almeno nel mio
caso chi legge il mio blog e solo amante del design e della grafica, difficilmente utilizza ie 6 7 8 ,credo sia ora di aggiornarsi:)
Pingback: inpress » Ombre agli oggetti con CSS3 senza immagini | Tutorial Photoshop | WebDesign