Wczo­raj poka­za­łem w jaki spo­sób dodać cień dla tek­stu. W jaki spo­sób uzy­skać cień dla znacz­ni­ków HTML? Służy do tego para­metr box-shadow. Nie­stety nie jest to jesz­cze zatwier­dzony para­metr CSS. Znaj­duje się on w kate­go­rii „Wor­king Dra­fts“. Dla­tego też jego uży­cie wymaga od nas wyko­rzy­sta­nia pre­fik­sów dla róż­nych prze­glą­da­rek. Skład­nia jest następująca:

1

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

Nie­stety para­metr ten obsłu­gują jedy­nie 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­wo­duje kur­cze­nie 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 pomi­ną­łem dekla­ra­cje dla sil­nika WebKit ponie­waż nie uwzględ­nia on zasięgu i cień byłby po pro­stu nie­wi­doczny. Zale­cam więc uży­cie 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

Zasto­so­wa­nie 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 klu­czowe inset(uwaga w szkicu W3C jest zapy­ta­nie o zmianę nazwy na inner) zmie­nia zacho­wa­nie cie­nia. Po jego zasto­so­wa­niu cień będzie wewnątrz boksu a nie na zewnątrz.

Nie­stety inset działa jedy­nie w prze­glą­darce Fire­Fox 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

Cie­nie wielokrotne

Dla każ­dego ele­mentu możemy okre­ślić kilka róznych cieni. Odzie­lamy 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