Foi de stil Web
Indrumari si trucuri CSS

Umbrele textului

CSS nivelul 3 are o proprietate numita 'text-shadow' pentru a adauga o umbra la fiecare litera a unui anumit text. In forma ei cea mai simpla, ea arata similar cu asta:

h3 {text-shadow: 0.1em 0.1em #333}

care adauga o umbra de gri inchis (#333) putin spre dreapta (0.1em) si in jos (0.1em) relativ la textul normal. Rezultatul arata ca acesta:

(In august 2005, nu toate browserele suporta in totalitate 'text-shadow' inca. Ce e mai sus ar trebui sa functioneze cel putin in Safari si Konqueror.)

Umbre text estompate

Cea mai simpla forma a proprietatii 'text-shadow' are doua parti: o culoare (cum ar fi #333 de mai sus) si un ofset (0.1em 0.1em in exemplul de mai sus). Aceasta rezulta intr-o umbra clara la ofsetul indicat. Dar ofsetul poate deasemenea sa fie facut estompat, resultand intr-o umbra mai mult sau mai putin estompata.

Marimea estomparii este data ca alt ofset. Iata doua linii, una cu o mica estompare (0.05em) si una cu foarte multa (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Text alb citibil

Umbrele pot face textul mai citibil daca contrastul intre prim plan si fundal este mic. Iata un exemplu de text alb contra un fundal albastru palid, mai intai fara o umbra si apoi cu:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Umbre multiple

Puteti avea deasemenea mai mult de o umbra. In general, aceasta arata mai degraba ciudat:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Dar cu doua umbre inchise si deschise bine plasate, efectul poate fi util:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Aceasta este un pic periculos, dupa cum puteti vedea daca browserul dumneavoastra nu suporta 'text-shadow'. In fapt, culorile fundalului si textului in acest exemplu sunt aproximativ aceleasi (#CCCCCC si #D1D1D1), asa ca fara umbre, abia dac exista un pic de contrast.

Desenand litere drept contururi

Exemplul cu doua umbre al versiunii precedente poate fi dus mai departe. Cu patru umbre, literelor li se pot da un contur:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Nu este un contur perfect si la acest moment (August 2005), discutia este inca deschisa daca CSS ar trebui sa aiba o proprietate separata (sau posibil o valoare pentru 'text-decoration') pentru a face contururi mai bune.

Stralucire neon

Daca puneti o umbra estompata chiar in spatele textului, i.e., cu ofset zero, efectul este grearea unei straluciri in jurul literelor. Daca stralucirea unei singure umbre nu este suficient de intensa, repetati aceeasi umbra de cateva ori:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}