Obsah
Toto je jedna z nejočekávanějších funkcí nového standardu CSS3 a to ve spojení s HTML5 dokáže přilákat mnoho vzhledů, odkazujeme na Box Shadow kdo nám umožňuje umístit stíny na políčka v našem dokumentu HTML, čímž se vytvoří efekt, jako by se pohyboval na stránce.Element Box Shadow musí být vytvořen následovně:
box-shadow: hoffset voffset blur spread color inset
Kde každý z jeho atributů plní funkci, podívejme se na každý z nich podrobně:
- Hoffset: Jedná se o horizontální posun, což je hodnota délky. Kladná hodnota vytlačí Box Shadow napravo naopak záporná hodnota posune Stín krabice doleva.
- Voffset: Je to svislý posun, což je hodnota délky. Kladná hodnota posune Stín krabice pod pole položky a záporná hodnota Posune Stín rámečku nad pole položky.
- Rozmazat: (Volitelné) Určuje poloměr definice stínu, což je hodnota délky. Čím vyšší je hodnota, tím rozmazanější zůstává hrana krabice položky. Pro výchozí hodnotu 0 vypadá okraj stínu pole plně definovaný.
- Rozpětí: (Volitelné) Zadejte poloměr difúze stínu, jedná se o měřítko délky. Kladná hodnota způsobí, že se stín roztáhne ve všech směrech pole obsahujícího prvku, a záporná hodnota způsobí, že se stín obsahujícího prvku stáhne.
- Barva: (Volitelné) Je to barva stínu. Pokud je vynechán, prohlížeč rozhodne o barvě.
- Vložka: (Volitelné) Nastaví stín v rámečku prvku, na který je aplikován.
Jakmile známe atributy, rychle přejděme k příkladu kódu, abychom to, co jsme se naučili, uvedli do praxe.
PříkladExistuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.
Jak vidíme, můžeme použít Box Shadow V CSS uvnitř značky stylu generuje tento kód následující výsledek:
PříkladExistuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.
Nyní se podívejme, jak jsou oba stíny zobrazeny v našem prvku:
