Jak správně používat CSS Box Shadow?
Vlastnost box-shadow umožňuje přidat vržený stín kolem rámečku libovolného HTML prvku (nejčastěji se aplikuje na divy, karty, tlačítka nebo obrázky). Dobře nastavený stín dodává webu hloubku a pomáhá vizuálně oddělit vrstvy (tzv. Flat Design 2.0 nebo Material Design).
Vysvětlení parametrů
Základní syntaxe se skládá z 5 až 6 hodnot:
box-shadow: [X] [Y] [Blur] [Spread] [Barva] [inset];
- Horizontální posun (X): Kladná hodnota posune stín doprava, záporná doleva.
- Vertikální posun (Y): Kladná hodnota posune stín dolů, záporná nahoru. (V moderním webdesignu se nejčastěji používá lehký posun dolů, imitující přirozené osvětlení shora).
- Rozostření (Blur radius): Čím vyšší hodnota, tím je stín větší, rozmazanější a jemnější. Nesmí být záporná.
- Roztažení (Spread radius): Kladná hodnota stín roztáhne (zvětší), záporná hodnota stín "smrskne". Záporný spread v kombinaci s velkým blurem vytváří ten nejhezčí a nejmodernější efekt.
- Barva (Color / Opacity): Nejlépe se definuje přes formát RGBA, který umožňuje nastavit průhlednost (alfa kanál). Tvrdá černá barva nevypadá dobře, moderní stíny mívají průhlednost pouze kolem 5 % až 15 %.
- Inset: Volitelné klíčové slovo, které obrátí stín zvenku dovnitř prvku.
Tipy pro moderní design
Zapomeňte na tmavé a tvrdé stíny z roku 2010. Dnešní trend velí: Stín by měl být spíše "cítit", než vidět. Používejte vysoké hodnoty rozostření (Blur nad 20px), velmi nízkou průhlednost (Opacity kolem 0.05 - 0.1) a lehký záporný Spread (např. -5px). Vytvoříte tím luxusní, jemně "levitující" vzhled.