CSS już od dłuż­szego czasu(zostało to zaproponowane w CSS2) udostęp­nia bar­dzo ciekawą funk­cjonal­ność. Tekst możemy udekorować ładnym cieniem. Problemem była implemen­tacja tej opcji w znanych prze­glądar­kach. Przez długi czas jedynie Safari(już od pierw­szej wer­sji) pokazywało klasę. Na szczę­ście minęło trochę czasu i prawie wszyst­kie przeglądarki(pozdrowienia dla zespołu IE!) obsługują spraw­nie cienie a skład­nia jest ujednolicona.

text-shadow

Aby dodać cień do naszego tek­stu wystar­czy zdefiniować jego wła­ściwo­ści za pomocą text-shadow.

1

text-shadow: przesuniecie-poziome przesuniecie-pionowe rozmycie kolor;

Przy­kład użycia

1
2

font-size:14px;
text-shadow: -10px 5px 2px #f00;

Lorem ipsum dolor sit amet, con­sec­tetur adipiscing elit. Nul­lam et nunc id erat tem­pus iaculis. Phasel­lus con­gue nunc quis nibh con­gue rutrum sit amet eu velit. Etiam non ligula conval­lis tor­tor scelerisque con­sec­tetur at nec nunc. Integer eu purus odio, ac placerat erat

Przy umiejęt­nym zastosowaniu efekty mogą być zadziwiające. Można np. ustawiając wysokie roz­mycie zemulować efekt pod­świetlanego tła.

1
2
3
4

background:#111;
font-size:18px;
text-shadow: 0px 0px 4px #999;
color:#f90;

Lorem ipsum dolor sit amet, con­sec­tetur adipiscing elit. Nul­lam et nunc id erat tem­pus iaculis. Phasel­lus con­gue nunc quis nibh con­gue rutrum sit amet eu velit. Etiam non ligula conval­lis tor­tor scelerisque con­sec­tetur at nec nunc. Integer eu purus odio, ac placerat erat

Cienie wielo­krotne

Dla każ­dego napisu możemy zdefiniować kilka róznych cieni oddzielając je przecinkiem.

1
2
3

line-height:40px;
font-size:18px;
text-shadow: -6px -6px 6px #f00, 0px 0px 6px #00f, 6px 6px 6px #f90;

Lorem ipsum dolor sit amet, con­sec­tetur adipiscing elit.

Inter­net Explorer

Okłamał­bym was gdybym nie napisał, że w Inter­net Explorerze da się uzyskać podobny efeket. Microsoft udostęp­nił parametr fil­ter: shadow, który działa nawet w IE5(sic!). Użycie wygląda mniej więcej tak:

1

filter: Shadow(Color=#333, Direction=135, Strength=5);

Nie będę jed­nak zagłębiał się w ten temat, gdyż nie jest to poprawne ze stan­dar­dami W3C.