Secció 3: Propietats

3. Propietats relacionades amb el text

3.11. text-shadowCSS2

La propietat text-shadow permet afegir ombres senzilles al text. És especialment útil per decorar els títols.

Per definir una ombra només hem d'indicar el desplaçament cap a la dreta i cap a baix respecte el text, mitjançant qualsevol valor de longitud (però no percentatges). Són possibles els valors negatius, que indicaran desplaçament cap a l'esquerra i cap a dalt. Opcionalment podem afegir una tercera longitud per indicar el radi de desenfocament, així com un color (si no n'especifiquem cap, el color per defecte és el de la font). La sintaxi és la següent:

text-shadow: (color) dDret dInf (rDes)

on 'dDret' és el desplaçament cap a la dreta, 'dInf' el desplaçament cap a baix, i 'rDes' el radi de desenfocament. Els valors entre parèntesi són opcionals.

També és possible indicar més d'un efecte d'ombra en una sola declaració, separats per comes. En aquest cas les ombres s'apliquen en l'ordre especificat i poden per tant superposar-se, però mai es superposaran al propi text.

Com hem vist a l'apartat anterior, la propietat text-shadow no s'hereta, però sí afecta als elements fills.

H1       { text-shadow: 0.2em 0.2em 0.5em; }
H1.festa { text-shadow: red 5px 5px 5px,
                        yellow 3px 3px 3px,
                        green 0px 0px 2px; }

En el cas dels H1.festa primer es representarà una ombra vermella, desplaçada 5px cap a la dreta i cap a baix, i amb un radi de desenfocament de 5px. A continuació es representarà una ombra groga similar, però menys desplaçada, i menys desenfocada. Finalment es representarà una ombra verda, no desplaçada i desenfocada amb un radi de 2px.

Nota: aquesta propietat no està suportada pels principals navegadors. En realitat fins ara (juny de 2002) no he trobat cap navegador que l'incorpori. Així que el H1.festa pot ser bastant horrible... ;)