De multe ori ne confruntam cu neplacuta situatie in care informatia pe care dorim sa o transmitem vizitatorilor nostrii nu este lizibila. Cauzele acestei neplaceri pot fi diverse, font-ul in sine poate fi nepotrivit, marimea text-ului prea mica sau incompatibilitatea culorilor. Ultima situatie poate fi imbunatatita folosind propietatea CSS3 text-shadow.

Text-Shadow

Folosind text-shadow putem realiza 3 efecte distincte: umbra, blur si stroke. Sintaxa este urmatoarea: text-shadow: 1px 2px 10px #FF0000 unde prima variabila (1px) reprezinta umbra pe orizontala, a doua variabila (2px) reprezinta umbra pe verticala, a treia variabila (10px) reprezinta nivelul de blur si ultima variabila (#FF0000) este codul hex pentru culoarea dorita.

Sintaxa CSS

text-shadow: <numar>px <numar>px <numar>px #<cod_hex>;

Exemple

Stroke portocaliu de 1 pixel:

<p style="text-shadow: 1px 1px 0px #ff5a00;">Acest text are stroke</p>

Acest text are stroke
Prin atribuirea valorii de 1 pixel umbrei orizontale cat si celei verticale si valoarea de 0px atributului de blur vom obtine un efect clasic de stroke.

Blur verde de 10 pixeli:

<p style="text-shadow: 1px 1px 10px #91e709;">Acest text este blurat</p>

Acest text este blurat
Prin atribuirea valorii de 1 pixel umbrei orizontale cat si celei verticale si valoarea de 10px atributului de blur vom obtine un efect clasic de blur.

Browsere compatibile:

Google Chrome 4.0+
Internet Explorer 10.0+
Firefox 3.5+
Safari 4.0+
Opera 9.6+