Generátor box-shadow

Jak používat generátor box-shadow

1. Začni některou předvolbou, nebo nech výchozí Jemný stín. V řádku Předvolby najdeš Jemný, Ostrý, Vrstvený, Elevace, Neumorfismus, Vnitřní a Záře.
2. V části Vrstvy stínu klikni na vrstvu, kterou chceš vybrat. Každou vrstvu lze přesunout tlačítky Posunout nahoru a Posunout dolů nebo smazat tlačítkem Odstranit. Přidat vrstvu zduplikuje vybranou vrstvu, takže můžeš upravovat její kopii.
3. Vybranou vrstvu uprav v části Upravit vybranou vrstvu: táhni bod v poli Posun, nebo použij posuvníky a číselná pole Vodorovný posun (px), Svislý posun (px), Rozostření (px) a Rozšíření (px).
4. Vyber Barvu stínu pomocí výběru barev, nebo napiš libovolnou barvu CSS do kódového pole, a nastav Krytí (%). Zaškrtnutím Inset (vnitřní stín) se stín vykreslí uvnitř boxu.
5. V části Nastavení náhledu (Barva boxu, Barva pozadí, Poloměr rohů (px)) uvidíš stín na svých skutečných barvách. Ovlivňují jen náhled.
6. Deklaraci z pole Kód CSS zkopíruješ tlačítkem Kopírovat.

Klávesnice: vyber bod v poli Posun a šipkami ho posouváš o 1 px, se Shiftem o 10 px.

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Jak box-shadow funguje

Syntaxe jednoho stínu je box-shadow: [inset] x y blur spread color.

• x a y posouvají stín doprava a dolů. Záporné hodnoty ho posouvají doleva a nahoru. Světlo shora znamená kladné y.
• Blur (rozostření) změkčuje okraj. Nesmí být záporný. Blur 0 dává ostrou kopii boxu.
• Spread (rozšíření) stín zvětší (kladné hodnoty) nebo zmenší (záporné) ještě před rozostřením. Záporné rozšíření s velkým y drží stín pod prvkem místo kolem něj.
• Barva obvykle nese průhlednost. Nástroj zapisuje neprůhledné barvy jako HEX a průsvitné jako rgba(), čemuž rozumí každý prohlížeč. Pokud zadáš barvu, která už alfa kanál obsahuje, Krytí (%) ho vynásobí.
• inset umístí stín dovnitř okraje, jako by byl box zatlačený do stránky.

Stín sleduje border-radius prvku a nikdy nemění rozložení: nezabírá místo a nevyvolává posuvníky.

Proč vrstvit několik stínů?

Skutečné stíny nejsou jeden rozmazaný obdélník. Malý, tmavý a těsný stín leží přímo pod předmětem, zatímco velký, slabý a rozmazaný se šíří dál. Naskládání dvou až pěti vrstev to napodobuje a vypadá mnohem přirozeněji než jeden těžký stín. Předvolba Vrstvený s nízkým krytím v každém kroku zdvojnásobuje posun i rozostření, což je technika oblíbená v mnoha designových systémech. Elevace napodobuje třívrstvé stíny z Material Designu.

První vrstva v seznamu se vykresluje nad ostatními, přesně jako v hodnotě CSS. Na pořadí záleží hlavně tehdy, když kombinuješ vnitřní a vnější stíny nebo používáš výrazné barvy.

Neumorfismus

Neumorfismus („soft UI“) používá dva stíny na prvku, který má stejnou barvu jako jeho pozadí: tmavý posunutý dolů a doprava a světlý posunutý nahoru a doleva. Předvolba Neumorfismus nastavuje obě barvy na #e0e5ec. Pamatuj, že tento styl má nízký kontrast, takže tlačítka v něm vytvořená potřebují jasný stav zaměření a čitelné popisky.