Wczoraj pokazałem w jaki spo­sób dodać cień dla tek­stu. W jaki spo­sób uzyskać cień dla znacz­ników HTML? Służy do tego parametr box-shadow. Nie­stety nie jest to jesz­cze zatwier­dzony parametr CSS. Znaj­duje się on w kategorii „Wor­king Drafts“. Dlatego też jego użycie wymaga od nas wykorzystania prefik­sów dla róż­nych prze­glądarek. Skład­nia jest następująca:

1

box-shadow: przesuniecie-poziome przesuniecie-pionowe promien-rozmycia zasieg kolor inset

Nie­stety parametr ten obsługują jedynie prze­glądarki w opar­ciu o sil­nik gecko(Firefox 3.5) oraz WebKit(Safari, Chrome):

Przy­kład zastosowania:

1
2

box-shadow: 5px 10px 10px 5px #bbb;
-moz-box-shadow: 5px 10px 10px 5px #bbb;

Lorem ipsum dolor sit amet

Zasięg możemy rów­nież określić jako ujemny co spo­woduje kur­czenie się cienia.

1
2

box-shadow: 15px 20px 10px -10px #bbb;
-moz-box-shadow: 15px 20px 10px -10px #bbb;

Lorem ipsum dolor sit amet

Umyśl­nie pominąłem deklaracje dla sil­nika WebKit ponie­waż nie uwzględ­nia on zasięgu i cień byłby po prostu nie­widoczny. Zalecam więc użycie wer­sji z 4 parametrami.

1
2
3

box-shadow: 5px 5px 10px #ccc;
-moz-box-shadow: 5px 5px 10px #ccc;
-webkit-box-shadow: 5px 5px 10px #ccc;

Lorem ipsum dolor sit amet

Zastosowanie cieni bez efektu rozmycia:

1
2
3

box-shadow: -5px -5px 0px #ccc;
-moz-box-shadow: -5px -5px 0px #ccc;
-webkit-box-shadow: -5px -5px 0px #ccc;

Lorem ipsum dolor sit amet

Cień wewnętrzny:

Słowo kluczowe inset(uwaga w szkicu W3C jest zapytanie o zmianę nazwy na inner) zmienia zachowanie cienia. Po jego zastosowaniu cień będzie wewnątrz boksu a nie na zewnątrz.

Nie­stety inset działa jedynie w prze­glądarce FireFox 3.5.

1
2
3

background:#ddd;
box-shadow: 5px 5px 10px #fff inset;
-moz-box-shadow: 5px 5px 10px #fff inset;

Lorem ipsum dolor sit amet

Cienie wielo­krotne

Dla każ­dego elementu możemy określić kilka róznych cieni. Odzielamy je przecinkami.

1
2
3

box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-moz-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-webkit-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;

Lorem ipsum dolor sit amet