Box-shadow
Vlastnost box-shadow
umí vytvořit CSS stín kolem elementu.
Pro vytvoření stínu kolem textu slouží CSS vlastnost text-shadow
.
Podpora
Dobře podporovaná vlastnost napříč všemi běžnými prohlížeči.
Zápis
element {
box-shadow: 10px 5px 5px red;
}
- Vnitřní stín
-
Jako první hodnotu je ještě možné , což vytvoří stín uvnitř elementu.
Tuto hodnotu jde uvést i jako poslední. V některých prohlížečích funguje i kdekoliv jinde mezi umístěním a barvou, ale minimálně Edge nebo Safari si s tím neporadí.
- Umístění
-
V ukázce výše první dvě hodnoty udávají umístění stínu.
-
První hodnota je horisontální (vodorovná). Čím větší hodnota bude nastavená, tím vpravo bude stín větší. Přehodit stín doleva je možné zadáním záporné hodnoty. -100 100
-
Druhá hodnota je vertikální (svislá). Nastavuje velikost stínu dole. Nebo nahoře při zadání záporné hodnoty. -100 100
-
- Rozmazání
-
Další hodnota určuje, jak moc bude stín rozmazaný. Při nulové hodnotě tedy bude vypadat jako obyčejný rámeček. 0 100
- Velikost
-
Dokáže roztáhnout stín všemi směry. 0 100
- Barva
-
Poslední hodnota je barva stínu.
Pokročilé
Průhledný stín
Barvu stínu je možná zadávat přes rgba()
, to může vytvořit poloprůhledný stín.
Kulaté rohy
Vlastnost box-shadow
ctí i border-radius
. Kolem kulatého rohu proto bude kulatý stín.
Vícenásobné stíny
Pro jeden element je možné zadat více stínů. Stačí je oddělit čárkami.
element {
box-shadow: 0 1px 1px rgba(0, 0, 0, .1),
0 2px 2px rgba(0, 0, 0, .1),
0 4px 4px rgba(0, 0, 0, .1),
0 8px 8px rgba(0, 0, 0, .1);
}
Je poměrně běžné tímto způsobem docílit hezčích/plynulejších stínů:
Obyčejný jeden stín
Hezčí vícenásobný stín
Více třeba v samostatném článku:
- Tobias Bjerrome Ahlin: Smoother & sharper shadows with layered box-shadows
Historie
CSS stíny fungují od IE 9. Ve starších Internet Explorerech šlo stín vytvořit přes starou CSS vlastnost filter
. Pro starší Webkit, Firefox nebo Operu se používala vlastnost s CSS prefixy.
Když box-shadow
ještě moc nefungoval, řešily se stíny buď obrázky, nebo mnoha obalovými elementy, které měly například 1px rámečky, což stín simulovalo.
Odkazy
- Shine.js – dynamické generování stínů v JavaScriptu.
- brumm.af/shadows – nástroj pro generování hezkých stínů
Komentáře