Generátor box-shadow

Ako používať generátor box-shadow

1. Začni predvoľbou alebo ponechaj predvolený Jemný tieň. Riadok Predvoľby ponúka Jemný, Tvrdý, Vrstvený, Elevácia, Neumorfizmus, Vnútorný a Žiara.
2. V časti Vrstvy tieňa klikni na vrstvu, aby sa vybrala. Každú vrstvu môžeš presúvať tlačidlami Posunúť vyššie a Posunúť nižšie alebo zmazať tlačidlom Odstrániť. Pridať vrstvu zduplikuje vybranú vrstvu, takže môžeš upravovať jej kópiu.
3. Vybranú vrstvu upravuješ v časti Upraviť vybranú vrstvu: presuň bod v poli Posun alebo použi posuvníky a číselné polia Vodorovný posun (px), Zvislý posun (px), Rozostrenie (px) a Rozšírenie (px).
4. Vyber Farbu tieňa pomocou výberu farieb alebo zadaj ľubovoľnú farbu CSS do poľa s kódom a nastav Krytie (%). Zapni Inset (vnútorný tieň), ak chceš tieň vykresliť vo vnútri rámčeka.
5. V Nastaveniach náhľadu (Farba rámčeka, Farba pozadia, Polomer rohov (px)) uvidíš tieň na svojich skutočných farbách. Ovplyvňujú iba náhľad.
6. Deklaráciu z Kódu CSS skopíruješ tlačidlom Kopírovať.

Klávesnica: aktivuj bod v poli Posun a šípkami ho posúvaj o 1 px, so Shiftom o 10 px.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Ako funguje box-shadow

Syntax jedného tieňa je box-shadow: [inset] x y blur spread color.

• x a y posúvajú tieň doprava a nadol. Záporné hodnoty ho posúvajú doľava a nahor. Svetelný zdroj nad prvkom znamená kladné y.
• Blur (rozostrenie) zjemňuje okraj. Nemôže byť záporné. Blur 0 dá ostrú kópiu rámčeka.
• Spread (rozšírenie) tieň zväčšuje (kladné) alebo zmenšuje (záporné) ešte pred rozostrením. Záporné rozšírenie s veľkým y udrží tieň pod prvkom namiesto okolo neho.
• Farba zvyčajne nesie priehľadnosť. Tento nástroj zapisuje nepriehľadné farby ako HEX a priesvitné ako rgba(), čomu rozumie každý prehliadač. Ak zadáš farbu, ktorá už má alfa kanál, Krytie (%) ho vynásobí.
• inset vloží tieň dovnútra okraja, akoby bol rámček zatlačený do stránky.

Tieň sleduje border-radius prvku a nikdy nemení rozloženie: nezaberá miesto a nevyvoláva posuvníky.

Prečo vrstviť viac tieňov?

Skutočné tiene nie sú jeden rozostrený obdĺžnik. Malý, tmavý a tesný tieň leží priamo pod predmetom a veľký, slabý a rozmazaný sa šíri ďalej. Naskladanie dvoch až piatich vrstiev to napodobní a vyzerá oveľa prirodzenejšie než jeden ťažký tieň. Predvoľba Vrstvený pri každom kroku zdvojnásobí posun a rozostrenie pri nízkom kryte, čo je technika, ktorú spopularizovali mnohé dizajnové systémy. Elevácia napodobňuje trojvrstvové tiene z Material Design.

Prvá vrstva v zozname sa maľuje navrchu, presne ako v hodnote CSS. Poradie záleží najmä pri miešaní vnútorných a vonkajších tieňov alebo pri silných farbách.

Neumorfizmus

Neumorfizmus („soft UI“) používa dva tiene na prvku, ktorý má rovnakú farbu ako jeho pozadie: tmavý posunutý nadol a doprava a svetlý posunutý nahor a doľava. Predvoľba Neumorfizmus nastaví obe farby na #e0e5ec. Pamätaj, že tento štýl má nízky kontrast, takže tlačidlá, ktoré ho používajú, potrebujú jasný stav zamerania a čitateľné popisky.