Ombres a CSS3

En la versió CSS3 és possible afegir una ombra als texts o elements de block només amb una línia de codi

Tenim dues propietats principals: box-shadow y text-shadow.

• box-shadow: ens permet crear ombres a elements que són de block, per ejemple divs
• text-shadow: ens permet crear ombres a element tipus text

L'atribut box-shadow necessita varis valors per especificar les característiques de l'ombra, com el difuminat, la separació de l'ombre i el color. Per exemple

box-shadow: 8px -10px 3px #000;

Primer valor: el desplaçament de l'ombra respecte a eix de la x. Si és positiu apareixerà cap a la dreta de l'element.

Si el volem cap a l'esquerra, cal posar un valor negatiu

Segon valor: el desplaçament de l'ombra respecte a eix de la y. Si és positiu apareixerà cap a la part baixa de l'element.

Si el volem cap a dalt, cal posar un valor negatiu

Difuminat: Si val 0 vol dir que l'ombra no té cap difuminat.

Color de l'ombra: l'últim valor és el color de l'ombra

Compatiblititat amb els diferents navegadors:

La veritat és que les CSS 3 encara estan en fase d'especificació, encara que ja es troben molt avançades i els navegadors més moderns ja han començat a implementar-les. No obstant això, el W3C encara no ha alliberat les especificacions d'aquesta versió dels Fulls d'estil en cascada i fins que comenci a recomanar la seva implementació els clients web no tenen per què entendre-les.

De moment podem utilitzar box-shadow en les versions més moderes del navegador Opera. Per la seva banda, navegadors basats en Mozilla i WebKit tenen suport a aquesta funcionalitat de CSS3, però a través d'uns atributs CSS amb una lleugera variació en el seu nom.

Atribut box-shadow per a navegadors basats en Mozilla, com Firefox: De manera temporal, Firefox és capaç d'interpretar l'atribut -moz-box-shadow, per exemple:

-moz-box-shadow: 1px 1px 0px # 090;

Atribut box-shadow per a navegadors basats en WebKit, com Safari o Google Chrome: En aquests moments i de manera temporal, navegadors com Chrome o Safari entenen l'atribut: -webkit-box-shadow, per exemple:

-webkit-box-shadow: 3px 3px 1px # FC8;

Com podrem imaginar, si volem ampliar al màxim la compatibilitat amb box-shadow, necessitaríem indicar tant el mateix atribut box-shadow (que funciona a Opera i en el futur funcionarà en tots els navegadors), així com -moz-box-shadow i -webkit-box-shadow perquè funcioni en les versions actuals de Firefox, Safari, Chrome, etc.

Pel que fa a la propietat text-shadow, és encara més simple: no cal prefix per als navegadors ja que aquesta propietat és independent del cada navegador, per que és una propietat que aquesta acabada i no en (proves), vegem un exemple.

h2 {
text-shadow: 2px 1px 1px # 000;
}

En el següent vídeo podeu veure amb més detall el funcionament de les ombres: