CSS vlastnost box-shadow nastavuje stín blokového prvku.
| 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.
Bezvadně funguje pouze v Opeře. V Exploreru box-shadow nelze nijak udělat. Webkit a Mozilla mají své proprietální vlastnosti.
| Prohlížeč | Podpora | Poznámka |
|---|---|---|
| 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 |
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 03. dubna 2012.