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... ;)

CSS en catalÓ
Darrera actualitzaciˇ: 11 de gener de 2004

© 2002-04, weC - Gonzalo PÚrez de la Ossa
Contacte: wec@dense13.com

Valid XHTML 1.0! Valid CSS!