Ako vytvoriť vrstvené CSS tiene pre realistické efekty hĺbky
Profesionálne webové dizajny zriedka používajú iba jeden tieň. Namiesto toho vrstvujú viaceré tiene, aby simulovali, ako sa svetlo správa v reálnom živote. Keď sa pozriete na kartu plávajúcu nad povrchom, vidíte aj ostrý tieň priamo pod ňou (kontaktný tieň) a mäkký, rozptýlený žiark okolo nej. Generátor tieňa vám umožní vytvoriť prvý tieň vizuálne, ale pochopenie toho, ako kombinovať tiene, vám dá oveľa väčšiu kontrolu nad hĺbkou a vizuálnou hierarchiou.
Vrstvené tiene rozlišujú váš dizajn od amatérskeho vzhľadu „jedného tieňa na všetko". Vytvárajú nuansy. Jasne komunikujú úrovne elevácie. A dokonca aj jednoduché prvky robia pôsobivejšími a premyslenejšími.
Prečo stačí len jeden tieň
Jeden tieň má svoje hranice. Ak ho urobíte dosť tmavý na zobrazenie hĺbky, vyzerá ostro. Ak ho urobíte dosť mäkký na prirodzený vzhľad, nemusí dostatočne vyjadrovať zdvihnutie. Ak ho rozšírite na zobrazenie vzdialenosti plávajúceho prvku, môžete zatlumiť hrany vášho prvku.
Svetlo v skutočnosti nefunguje s jedným tieňom. Keď fotografia leží na stole, vidíte:
1. Ostrý, tmavý tieň priamo pod ňou (kontaktný tieň) 2. Mäkší, širší žiark okolo hrán (ambientný tieň) 3. Prípadne jemný odraz alebo odraz svetla od povrchu
Webový dizajn to môže aproximovať pomocou CSS. Riešením je vrstvenie — kombinácia dvoch, troch alebo dokonca štyroch tieňov na vytvorenie hĺbky, ktorú jeden tieň nemôže dosiahnuť.
Základňa dvoch tieňov
Najčastejší spôsob vrstvenia tieňa používa dva tiene: jeden tesný, tmavý a blízko na simuláciu kontaktu a jeden voľný, mäkký a rozptýlený na simuláciu vzduchu a vzdialenosti.
Tu je praktický príklad:
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.15),
0px 8px 24px rgba(0, 0, 0, 0.12);Prvý tieň (0px 1px 3px) leží blízko prvku. Má minimálne rozmazanie a posun. Toto je kontaktný tieň — tmavá čiara, ktorá sa objaví tam, kde sa karta dotýka povrchu. Vytvára definíciu hrán.
Druhý tieň (0px 8px 24px) sa rozprestiera širšie a nachádza sa ďalej. Väčší vertikálny posun a silné rozmazanie ho robia mäkkým a rozptýleným. Toto je ambientný tieň — jemný žiark, ktorý obklopuje plávajúce prvky.
Spolu vytvárajú prirodzene vyzerajúcu hĺbku. Kontaktný tieň ukotvuje prvok. Ambientný tieň naznačuje vzdialenosť.
Úprava tieňov pre rôzne úrovne elevácie
Vrstvené tiene fungujú najlepšie, keď vytvoríte systém elevácie. Karty v rôznych výškach potrebujú proporcionálne rozdielne tiene.
Úroveň 1: Jemný tieň karty
Používajte pre predvolené karty, bloky obsahu a štandardné prvky rozhrania:
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.08),
0px 4px 12px rgba(0, 0, 0, 0.10);Toto je minimálne. Kontaktný tieň je sotva viditeľný. Ambientný tieň je ľahký. Použite to, keď chcete hierarchiu bez dramatizovania.
Úroveň 2: Zdvihnutý tieň karty
Používajte pre stavy pri najetí, zvýraznené karty a interaktívne prvky, ktoré potrebujú väčšiu prítomnosť:
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.12),
0px 12px 32px rgba(0, 0, 0, 0.15);Kontaktný tieň je o niečo tmavší a viditeľnejší. Ambientný tieň je širší. Toto signalizuje, že prvok je interaktívny alebo dôležitý.
Úroveň 3: Tieň modálneho okna alebo vrstvy
Používajte pre rozbaľovacie ponuky, modálne okná a prvky, ktoré jasne vyčnievajú nad zvyškom rozhrania:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.16),
0px 24px 64px rgba(0, 0, 0, 0.20);Oba tiene sú výraznejšie. Kontaktný tieň je tmavý a viditeľný. Ambientný tieň sa rozprestiera ďaleko a široko. Toto komunikuje, že prvok je na vrchu vrstvy.
Úroveň 4: Dramatický plávajúci tieň
Používajte pre hrdinské prvky, prémiové karty alebo zámerne výrazné dizajny:
box-shadow:
0px 8px 16px rgba(0, 0, 0, 0.20),
0px 32px 80px rgba(0, 0, 0, 0.24);Oba tiene sú silné. Toto je opak jemnosti. Používajte zřídka a iba keď to dizajn vyžaduje.
Budovanie vrstvených tieňov krok za krokom
Vytváranie vrstvených tieňov je jednoduchšie, keď nasledujete postup.
Začnite ambientným tieňom. Toto je obvykle väčší, rozmazanejší tieň. Predstavte si, že zdroj svetla je priamo nad vašim prvkom. Ambientný tieň sa rozprestiera smerom von a nadol, vytvárajúc oreolu. Nastavte pozitívny vertikálny posun (zvyčajne 8px až 32px), vysoké rozmazanie (16px až 64px), malý rozptyl (zvyčajne 0px alebo záporný) a nízku nepriehľadnosť (10% až 20%).
Pridajte kontaktný tieň. Ten leží oveľa bližšie k prvku. Nastavte malý vertikálny posun (1px až 4px), malé rozmazanie (2px až 8px), nulový rozptyl a o niečo vyššiu nepriehľadnosť (8% až 16%). Kontaktný tieň zabraňuje ambientnému tieňu vyzerať plávavo.
Otestujte kombináciu. Otvorte váš generátor tieňa, vytvorte najprv ambientný tieň a potom si poznamenajte hodnoty. Vytvorte druhý tieň v tom istom nástroji, potom skopírujte obe hodnoty a vložte ich spolu, oddelené čiarkou.
Upravte proporcie. Ak tieň vyzerá príliš ťažký, rovnomerne znížte nepriehľadnosť oboch tieňov. Ak vyzerá príliš plochý, zvýšte vertikálny posun ambientného tieňa. Ak je hrana príliš rozmazaná, miernie zvýšte rozmazanie kontaktného tieňa.
Vrstvené tiene pre konkrétne prvky
Rôzne prvky profitujú z rôznych stratégií vrstvenia.
Karty produktov v e-commerce
Karty produktov musia vyzerať zdvihnuté, ale nie príliš majestátne. Dvoj vrstvový tieň funguje dobre:
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.10),
0px 10px 28px rgba(0, 0, 0, 0.12);Pri najetí myšou posilnite oba tiene:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.15),
0px 16px 40px rgba(0, 0, 0, 0.18);Táto postupnosť spôsobuje, že sa pri najetí myšou vyzerá, že sa karta zdvihne bližšie k divákovi.
Panely panelov
Panely často majú viaceré panely v rôznych úrovniach dôležitosti. Používajte tri tiene na maximálnu hĺbku:
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.06),
0px 4px 8px rgba(0, 0, 0, 0.08),
0px 12px 24px rgba(0, 0, 0, 0.10);Troj tieňový prístup vytvárajú plynulú hĺbku bez chaotického vzhľadu.
Vstupné polia a ovládacie prvky
Vstupné polia často používajú vnútorné tiene. Vrstvujte ich pre lepšiu vizuálnu spätnú väzbu:
box-shadow:
inset 0px 1px 2px rgba(0, 0, 0, 0.06),
inset 0px 2px 6px rgba(0, 0, 0, 0.04);Alebo kombinujte vnútorný s vonkajším pre stavy zaostrenia:
box-shadow:
inset 0px 1px 2px rgba(0, 0, 0, 0.06),
0px 0px 0px 3px rgba(59, 130, 246, 0.20);Plávajúce akčné tlačidlá
FAB-y profitujú z silného vrstvenia, pretože sa nachádzajú na vrchu vizuálnej hierarchie:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.12),
0px 16px 32px rgba(0, 0, 0, 0.18);Toto robí FAB vyzerajúcu klikateľnú a dôležitú.
Používanie negatívneho rozptylu s viacerými tieňami
Negatívny rozptyl je v vrstvených tieňoch podceňovaný. Sprísni tieň a drží ho bližšie k hranám prvku.
box-shadow:
0px 1px 3px -1px rgba(0, 0, 0, 0.12),
0px 8px 20px -4px rgba(0, 0, 0, 0.10);Negatívne rozptyly bránia tieňom v rozširovaní sa príliš ďaleko, čím vytvárajú ostrejší a kontrolovanejší vzhľad. Toto funguje obzvlášť dobre pre kompaktné prvky rozhrania, ako sú tlačidlá alebo malé karty.
Farebné tiene v vrstvených systémoch
Tiene nemusia byť čierne. Farebné tiene môžu dodať osobitosť pri vrstvení.
Pre modré rozhranie skúste vrstvovať modrozafarbený tieň s tmavším tieňom:
box-shadow:
0px 2px 4px rgba(30, 60, 130, 0.12),
0px 12px 32px rgba(0, 0, 0, 0.10);Pre teplé dizajny vrstvujte teplú hnedú s neutrálnou tmavou:
box-shadow:
0px 2px 4px rgba(140, 90, 50, 0.10),
0px 12px 32px rgba(50, 40, 30, 0.12);Farebné tiene vyzerajú moderné a môžu posilniť identitu značky. Držte nepriehľadnosť nízku — farebné tiene s vysokou nepriehľadnosťou vyzerajú kresľačne.
Výkon a podpora prehliadačov
Vrstvené tiene sú plne podporované vo všetkých moderných prehliadačoch. Neexistuje žiadny pokles výkonu pri používaní dvoch alebo troch tieňov v porovnaní s jedným. CSS engine ich efektívne vykresľuje.
Izbetiahnite sa však pred nadmerným vrstvením — štyri alebo viaceré tiene na mnohých prvkoch môžu ovplyvniť výkon vykresľovania na mobilných zariadeniach alebo starších počítačoch. Dva až tri tiene na prvok sú optimálne. Ťažké vrstvenie ponechajte pre hrdinské prvky alebo interaktívne stavy.
Testovanie vrstvených tieňov
Vrstvené tiene odhalujú svoju skutočnú povahu iba na realistických pozadiach a obsahu. Vždy testujte s:
1. Skutočnou farbou pozadia vašej stránky 2. Skutočným obsahom — nie len farebným boxom 3. Rôznymi veľkosťami obrazovky (tiene sa môžu inakšie vyzerať na mobilnej) 4. Tmavým režimom, ak vaše rozhranie podporuje 5. Vedľa ostatných prvkov s tieňmi na rôznych úrovniach elevácie
Tieň, ktorý vyzerá dokonale izolovaný, sa môže zdať nepoužitý v kontexte.
Časte chyby s vrstvovanými tieňami
Používanie rovnakých hodnôt pre oba tiene. Ak majú oba tiene rovnakú nepriehľadnosť, rozmazanie a posun, splývajú do jedného ťažkého tieňa. Výrazne sa líšte v hodnotách — tesný, tmavý kontaktný tieň a mäkký, svetlejší ambientný tieň.
Príliš veľa vrstiev. Tri sú praktické maximum. Štyri tiene zriedka vyzerajú lepšie ako tri a stoja výkon. Ak potrebujete väčšiu hĺbku, namiesto pridávania ďalších upravte existujúce tiene.
Ignorovanie polomer rozptylu. Pozitívny rozptyl rozširuje oba tiene rovnomerne a vyzerá ťažko. Negatívny rozptyl (obzvlášť na ambientnom tieni) vytvára čistejšiu, ostrašnú hĺbku.
Neupravovanie stavov pri najetí a aktiváciou. Vrstvené tiene by sa mali meniť pri interakcii. Zvýšte oba tiene pri najetí na signalizáciu, že prvok je aktívny. Znížte ich alebo ich v aktivnych/stlačených stavoch.
Zabudnutá nepriehľadnosť. Nepriehľadnosť je najľahšia ovládacie prvku na nastavenie. Ak vrstvovaný tieň vyzerá príliš ťažký, znížte nepriehľadnosť ako prvé. Ztemňovanie farby alebo zvyšovanie rozmazania zriedka pomôže, ak je nepriehľadnosť už príliš vysoká.
Budovanie vášho systému tieňov
Keď pochopíte vrstvené tiene, vytvorte konzistentný systém pre váš projekt. Zdokumentujte tri až päť úrovní elevácie:
- Úroveň 1: Dva jemné tiene pre predvolené karty
- Úroveň 2: Dva stredne silné tiene pre interaktívne prvky
- Úroveň 3: Dva alebo tri silné tiene pre modálne okná
- Úroveň 4: Voliteľný dramatický tieň pre hrdinské prvky
Skopírujte tieto hodnoty do CSS premenných alebo tokenov dizajnu. Opätovne ich používajte v rámci rozhrania. Konzistencia robí váš dizajn vyzerajúcim premyslene a vyleštene.
Keď si sadnete na štýlovanie nového prvku, namiesto toho, aby ste sa snažili vymyslieť nové hodnoty tieňa, si položte otázku: „Na akej úrovni elevácie patrí tento prvok?" Potom použite príslušný tieň zo svojho systému.
Vrstvené CSS tiene transformujú bežné rozhrania na dizajny, ktoré sa cítia premyslené, moderné a jasne štruktúrované. Nestoja nič — žiadne obrázky, žiadne dodatočné DOM prvky, len CSS. Investícia do pochopenia toho, ako ich kombinovať, sa oplatí v každom projekte.