Box-shadow

CSS vlastnost box-shadow nastavuje stín blokového prvku.

box-shadow
hodnoty parametry stínu
barva posunX posunY hloubka stín dané barvy bude umístěn jakoby "hloubku" pod prvkem a posunt doprava a dolů o zadané posuny
posunX posunY hloubka barva totéž, jenom barva může být na konci

Příklad:

.stin {box-shadow: black 4px 6px 20px; }

Protože je vlastnost box-shadow mizerně podporovaná, je potřeba ji zapisovat spolu s dalšími proprietálními vlastnosti pro jednotlivé prohlížeče.

Příklad podporovaný v nejvíce prohlížečích:

box-shadow: black 4px 6px 20px;
-webkit-box-shadow: black 4px 6px 20px;
 -moz-box-shadow: black 4px 6px 20px;

Kdo chce mít stín i v Internet Exploreru 8 a nižších verzích, musí si namalovat obrázek stínu a nějak to tam nastrkat (asi pomocí matrjošky). Internet Explorer totiže box-shadow nepodporuje a podpora se chystá až do verze IE 9.

Podpora

Bezvadně funguje pouze v Opeře. V Exploreru box-shadow nelze nijak udělat. Webkit a Mozilla mají své proprietální vlastnosti.

Podpora vlastnosti
Prohlížeč Podpora Poznámka

Internet Explorer

od verze IE 9 starší verze včetně IE 8 to neumějí ani simulovat
Mozilla (Firefox, Netscape 6+ atd.) od verze FF 4 starší verze umějí -moz-box-shadow se stejnými hodnotami
Opera ano  
Chrome ano starší verze umějí i -webkit-box-shadow se stejnými hodnotami

Příklady

Test box-shadow

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně

 

 

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 03. dubna 2012.