Princípy fungovania vlastnosti box-shadow v CSS
Vlastnosť box-shadow v jazyku CSS slúži na pridávanie tieňov okolo rámovania elementov na webových stránkach. Tento vizuálny efekt pomáha definovať hĺbku, hierarchiu a vzájomný vzťah medzi jednotlivými prvkami rozhrania. Správne nastavenie tieňa si vyžaduje pochopenie niekoľkých základných parametrov, ktoré určujú jeho polohu, ostrosť a veľkosť.
Nástroj Generátor tieňov (Box Shadow) umožňuje vizuálne nastavovať tieto parametre v reálnom čase pomocou posuvníkov a okamžite generovať výsledný kód pre vaše projekty. Každý tieň sa vykresľuje vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.
Parametre tieňa a ich vplyv na vizuálne vnímanie
Každá vrstva tieňa je definovaná nasledujúcimi vlastnosťami, ktoré priamo ovplyvňujú jeho výsledný vzhľad:
- Horizontálny posun: Určuje polohu tieňa na osi x. Kladné hodnoty posúvajú tieň doprava, záporné hodnoty ho posúvajú doľava. Rozsah tohto nastavenia je od -50px do 50px.
- Vertikálny posun: Určuje polohu tieňa na osi y. Kladné hodnoty posúvajú tieň smerom nadol, záporné hodnoty smerom nahor. Rozsah nastavenia je od -50px do 50px.
- Rozostrenie (Blur): Definuje, do akej miery budú okraje tieňa rozmazané. Hodnota 0px znamená úplne ostrú hranu tieňa, pričom maximálna hodnota je 100px. Vyššie hodnoty vytvárajú jemnejší a rozptýlenejší tieň.
- Rozprestretie (Spread): Určuje zväčšenie alebo zmenšenie tieňa ešte pred aplikovaním samotného rozostrenia. Kladné hodnoty tieň rozširujú, zatiaľ čo záporné hodnoty ho sťahujú dovnútra. Rozsah je od -50px do 50px. Záporné rozprestretie vtiahne tieň dovnútra, čo je užitočné pre tesné, blízke tiene.
- Farba tieňa a Nepriehľadnosť: Kombinácia výberu farby a nastavenia jej transparentnosti určuje intenzitu tieňa. Nižšia nepriehľadnosť vytvára realistickejšie a menej rušivé tiene.
Rozdiel medzi vonkajším a vnútorným tieňom
Predvolene sa tieň vykresľuje mimo hraníc elementu, čím vytvára dojem, že prvok vystupuje nad pozadie. Aktivovaním voľby Vnútorný tieň (Inset) sa smer vykresľovania preklopí.
| Typ tieňa | Smer pôsobenia | Vizuálny efekt | Typické použitie |
|---|---|---|---|
| Klasický tieň | Smerom von z elementu | Prvok vystupuje nad povrch | Karty, tlačidlá, rozbaľovacie ponuky |
| Vnútorný tieň (Inset) | Smerom do vnútra elementu | Prvok pôsobí ako vtlačený do pozadia | Formulárové polia, stlačené tlačidlá |
Tvorba hĺbky pomocou vrstvenia tieňov
V reálnom svete svetlo málokedy vytvára iba jeden jednoduchý, ostrý tieň. Na dosiahnutie maximálneho realizmu a jemnosti v modernom webovom dizajne sa často kombinuje viacero vrstiev tieňov na jednom elemente.
Nástroj predrenderuje päť vrstiev, pričom prvá vrstva má predvolené hodnoty 0 8 24 -4 a 18% transparentnú čiernu farbu. Ostatné vrstvy sú na začiatku skryté. Pomocou tlačidla Pridať vrstvu môžete pridať ďalšiu vrstvu s predvolenými hodnotami a tlačidlom Odstrániť vrstvu vybranú vrstvu vymazať. Pri exporte viacerých vrstiev vygeneruje nástroj v sekcii CSS kód, kde sú jednotlivé vrstvy oddelené čiarkami.
Často kladené otázky
Čo presne ovládajú hodnoty posunu, rozostrenia a rozprestretia?
Posun (offset) posúva tieň doľava/doprava a hore/dole, rozostrenie (blur) zjemňuje jeho okraje a rozprestretie (spread) ho pred rozostrením zväčšuje alebo zmenšuje. Záporné rozprestretie vtiahne tieň dovnútra, čo je užitočné pre tesné, blízke tiene.
Čo robí možnosť Inset?
Bežný tieň dopadá mimo prvku, podobne ako svetlo za vystúpenou kartou. Voľba Inset (vnútorný tieň) ho preklopí dovnútra, takže prvok vyzerá vtlačený – to je užitočné pre preliačené polia formulárov alebo stlačené tlačidlá.
Prečo vrstviť viac než jeden tieň?
Jeden tieň vyzerá od určitej veľkosti plocho. Reálna hĺbka zvyčajne kombinuje ostrý, tmavý tieň s jemným, širším tieňom – pridajte druhú vrstvu a dolaďte každú zvlášť, aby ste dosiahli tento efekt.