CSS już od dłuż­szego czasu(zostało to zapro­po­no­wane w CSS2) udo­stęp­nia bar­dzo cie­kawą funk­cjo­nal­ność. Tekst możemy ude­ko­ro­wać ładnym cie­niem. Pro­ble­mem była imple­men­ta­cja tej opcji w zna­nych prze­glą­dar­kach. Przez długi czas jedy­nie Safari(już od pierw­szej wer­sji) poka­zy­wało klasę. Na szczę­ście minęło tro­chę czasu i pra­wie wszyst­kie przeglądarki(pozdrowienia dla zespołu IE!) obsłu­gują spraw­nie cie­nie a skład­nia jest ujednolicona.

text-shadow

Aby dodać cień do naszego tek­stu wystar­czy zde­fi­nio­wać jego wła­ści­wo­ś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­te­tur adi­pi­scing elit. Nul­lam et nunc id erat tem­pus iacu­lis. Pha­sel­lus con­gue nunc quis nibh con­gue rutrum sit amet eu velit. Etiam non ligula conval­lis tor­tor sce­le­ri­sque con­sec­te­tur at nec nunc. Inte­ger eu purus odio, ac pla­ce­rat erat

Przy umie­jęt­nym zasto­so­wa­niu efekty mogą być zadzi­wia­jące. Można np. usta­wia­jąc wyso­kie roz­my­cie zemu­lo­wać efekt pod­świe­tla­nego 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­te­tur adi­pi­scing elit. Nul­lam et nunc id erat tem­pus iacu­lis. Pha­sel­lus con­gue nunc quis nibh con­gue rutrum sit amet eu velit. Etiam non ligula conval­lis tor­tor sce­le­ri­sque con­sec­te­tur at nec nunc. Inte­ger eu purus odio, ac pla­ce­rat erat

Cie­nie wielokrotne

Dla każ­dego napisu możemy zde­fi­nio­wać kilka róznych cieni oddzie­la­ją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­te­tur adi­pi­scing elit.

Inter­net Explorer

Okła­mał­bym was gdy­bym nie napi­sał, że w Inter­net Explo­re­rze da się uzy­skać podobny efe­ket. Micro­soft udo­stęp­nił para­metr fil­ter: sha­dow, który działa nawet w IE5(sic!). Uży­cie 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.