Box-shadow
CSS vlastnost box-shadow nastavuje stín blokového prvku.
| hodnoty | parametry stínu |
|---|---|
| barva posunX posunY hloubka | stín dané barvy bude posunut doprava a dolů o zadané posuny; umístěn jakoby "hloubku" pod prvkem a |
| posunX posunY hloubka barva | totéž, jenom barva může být na konci |
Příklad:
.stin {box-shadow: black 4px 6px 20px; }
Hloubka (třetí hodnota) způsobí rozmazání. Při zadání hloubky 0 je stín naprosto ostrý.
Vlastnost box-shadow doporučuji používat uvážlivě, protože může být náročná na výkon prohlížeče nebo celého zařízení uživatele. Může například zpomalovat načítání stránek nebo způsobovat trhání při rolování.
Příjemné je, že box-shadow nijak nezmění výpočet šířky prvků a jejich umístění na stránce. Je proto možné používat jej pro dobarvování a retušování různých "fuk" způsobený chybným vykreslením prvků trochu jinde, než jste chtěli. Podobně se dá použít vlastnost outline.
Podpora
Bezvadně funguje pouze v Opeře. V Exploreru verze 8 a nižší box-shadow nelze nijak udělat. Webkit a Mozilla mají své proprietální 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 |
| Chrome | od verze 10 | starší verze umějí i -webkit-box-shadow se stejnými hodnotami |
Příklady
Reklama
