CSS box-shadow-generator
Box-shadow-generatorn hjälper dig att skapa skuggor för kort, knappar, modaler, paneler och andra UI-element. Du kan lägga till flera skugglager, justera offset X och Y, blur, spread, färg, opacitet och om skuggan ska vara inset. Förhandsvisningen uppdateras direkt och den färdiga CSS-regeln visas i ett kopierbart fält. Verktyget innehåller också presets som subtle, medium, large, dramatic, inset, colored, material och neon för att snabbt komma nära ett vanligt designmönster.
Vad varje värde betyder
En box-shadow skrivs normalt som offset-x offset-y blur spread color. Positiv X flyttar skuggan åt höger och negativ X åt vänster. Positiv Y flyttar den nedåt och negativ Y uppåt. Blur gör kanten mjukare; högre värde ger större och diffusare skugga. Spread ökar eller minskar skuggans storlek innan blur appliceras. Färgen räknas i verktyget om till rgba() med vald opacitet. Om inset är markerat ritas skuggan inne i elementet i stället för utanför.
Flera lager
Realistiska skuggor består ofta av mer än ett lager. Ett litet mörkare lager nära objektet kan simulera kontakt med ytan, medan ett större svagare lager ger upplevd höjd. Material-presets använder just flera lager för att skapa ett mer naturligt djup. Dramatiska och neonliknande skuggor kan vara effektiva i kampanjytor men bör användas försiktigt i arbetsgränssnitt. För mycket blur eller opacitet kan göra text och kort svåra att läsa och skapa ett rörigt uttryck.
Design och tillgänglighet
Skuggor bör förstärka hierarki, inte ersätta tydliga ramar eller kontrast. På ljusa bakgrunder fungerar ofta svart med låg opacitet bäst. På mörka teman kan en ljus eller färgad skugga behöva kombineras med border för att elementet ska synas. Kontrollera också hover- och fokuslägen: en stark skugga på hover kan ge bra feedback, men fokusmarkering för tangentbordsanvändare ska fortfarande vara tydlig och inte bara bero på mjuk skugga.
Praktisk CSS-användning
När du har hittat en skugga bör den sparas som en variabel, till exempel --shadow-card eller --shadow-modal. Då kan samma elevation användas konsekvent i hela projektet. Undvik att skapa en unik skugga för varje komponent om det inte finns en tydlig anledning. För animationer bör du testa prestanda på enklare enheter; stora blur-värden och många lager kan bli dyrare att rendera. För utskrift bör du kontrollera att viktig information inte bara särskiljs med skugga.
Konsekvent elevation
Om ett gränssnitt har många kort, menyer och modaler bör skuggorna följa ett litet antal nivåer. Då förstår användaren snabbare vad som ligger överst och designen känns mer sammanhållen.
Kommentarer