In acest articol vom vorbi despre cateva efecte pe care le putem obtine folosind proprietatea text-shadow. Desi face parte teoretic din specificatia CSS3, proprietatea text-shadow este suportata mai demult de majoritatea browserelor de pe piata (dovada ca nu are nevoie de prefixe de genul -moz sau -webkit).
Bineinteles ca Internet Explorer nu suporta inca aceasta specificatie. Nu am instalat inca versiunea 9 a acestui browser, dar am auzit ca desi suporta proprietatea box-shadow, inca nu stie sa interpreteze text-shadow. Nici nu am de gand sa instalez browser-ul doar ca sa vad daca merge. Cand se va intampla acest lucru, am sa revin cu un update sa va anunt.
Dar inainte sa vedem ce putem face cu text-shadow, sa vedem cum functioneaza:
text-shadow: 1px 1px 2px #DEDEDE; text-shadow: x-offset y-offset blur #color;
Sa vedem deci, cateva din efectele pe care le putem obtine folosind aceasta proprietate:
Primul este acela de text embosat sau “ingropat”. Acesta se obtine in doua moduri, in functie de culorile cu care lucram. Daca textul este inchis la culoare, efectul se obtine prin adaugarea unui shadow de culoare foarte deschisa (chiar alba) in partea de jos. Codul arata asa:
text-shadow: 0px 1px 1px #eee; background-color: #228B22; color: #333;
Iar rezultatul va arata asa:
Daca, in schimb, textul este de culoare deschisa acelasi efect poate fi obtinut aplicand un shadow de culoare inchisa in partea de sus a textului:
text-shadow: 0px -1px 1px #111; background-color: #eee; color: #339C33;
Rezultat:
Dar cum facem daca vrem sa obtinem exact efectul invers? Daca vrem ca textul sa apara putin ridicat fata de restul continutului? In acest caz trebuie sa tinem minte ca ochiul uman tinde sa perceapa lumina ca venind din partea din stanga sus. Asta inseamna ca va trebui sa aplicam o umbra departata in jos si in dreapta fata de obiect.
Codul arata asa:
text-shadow: 1px 1px 2px #000; background-color: #eee; color: #339C33;
Si va produce un rezultat care apare asa:
Bun, am vazut cateva efecte pe care le putem obtine cu jucand-u-ne cu offset-ul lui text-shadow. Dar sa ne concentram putin asupra valorii de blur. Ce putem face cu ea? Pai, sa va dau un exemplu.
Sa zicem ca vrem sa avem un text discret undeva in header-ul site-ului (sau in orice alta parte). Putem sa folosim un text de aceeasi culoare cu background-ul, pe care sa-l punem un evidenta cu o umbra fara offset, dar cu un blur mare. Sa vedem codul:
color: #fff; text-shadow: 0px 0px 20px #000;
Iar rezultatul va arata asa:
Acestea sunt cateva din efectele care se pot obtine cu ajutorul lui text-shadow. Daca aveti idei pentru alte efecte interesante obtinute cu aceasta proprietate, va astept cu sugestii.