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  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.

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
Chrome od verze 10 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ě. 20GB
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.