CSS3: Box-shadow

Publikováno Webdesign

Stínování blokových prvků je jedna z částí CSS3, která je dnes (i bez prefixů) už podporovaná poměrně dobře. Podporovány jsou tyto prohlížeče IE9+, Firefox 4+, Chrome, Opera a Safari 5.1. Ve starších verzích Chrome a Firefoxu lze použít pro správné fungování prefix (-moz a -webkit).

Klasické použití stínu:

box-shadow: 5px 5px 10px #000;

Demo:

První parametr určuje horizontální posun, druhý vertikální posun, třetí hloubku stínu a čtvrtý barvu stínu.

Parametr „inset“

Kromě toho lze jako první parametr vlastnosti uvést „inset“, který vlastnosti řekne, že stín nemá být mimo prvek, ale uvnitř.

box-shadow: inset 5px 5px 10px #000;

Demo:

Rámeček před stínem

Dalším parametrem může být určení tloušťky rámečku, který předchází stínu.

box-shadow: 5px 5px 10px 10px #000;

Demo:

Více stínů najednou

Pokud požadujete vložení více stínů na jeden prvek, stačí je ve vlastnosti box-shadow oddělit čárkou.

box-shadow: 5px 5px 10px #000, -5px -5px 10px #ff5;

Demo:

Komentáře