CSS-egenskapen box-shadow och dess parametrar
Egenskapen box-shadow i CSS används för att skapa visuella skuggor runt HTML-element. Genom att justera specifika parametrar kan du styra hur ljus och djup uppfattas på en webbsida. Verktyget Box Shadow-generator låter dig styra dessa parametrar i realtid via reglage för att generera den exakta CSS-koden.
Skuggans form och placering styrs av följande värden:
- Horisontell förskjutning: Bestämmer om skuggan ska flyttas till höger eller vänster. Reglaget sträcker sig från -50px till 50px.
- Vertikal förskjutning: Bestämmer om skuggan ska flyttas uppåt eller nedåt. Reglaget sträcker sig från -50px till 50px.
- Oskärpa (blur): Gör skuggans kanter mjukare. Ett värde på 0px ger en helt skarp kant, medan högre värden upp till 100px sprider ut skuggan för en mjukare övergång.
- Spridning (spread): Bestämmer om skuggan ska expandera eller krympa innan oskärpan appliceras. Reglaget sträcker sig från -50px till 50px. Ett negativt värde drar skuggan inåt, vilket gör den mindre än själva elementet.
- Skuggfärg och Opacitet: Färgvalet och dess transparens (opacitet) avgör hur starkt skuggan framträder mot bakgrunden.
Skillnaden mellan yttre och inre skugga
En standardskugga placeras utanför elementets gränser. Detta skapar en illusion av att elementet svävar ovanför bakgrunden, vilket ofta används för att lyfta fram knappar eller kort i ett gränssnitt.
Genom att aktivera alternativet Inre skugga (inset) ändras skuggans riktning helt. Istället för att projiceras utåt, ritas skuggan på insidan av elementets ram. Detta skapar en visuell effekt av att elementet är nedsänkt eller insjunket i bakgrunden, vilket är användbart för att designa exempelvis nedsänkta inmatningsfält eller knappar i ett nedtryckt tillstånd.
Skapa djup och realism med flera skugglager
I verkligheten är skuggor sällan helt enhetliga. För att skapa en mer realistisk och mjuk skugga i webbdesign kan du stapla flera skugglager på varandra. En enskild skugga med hög oskärpa tenderar att se artificiell ut, men genom att kombinera en skarp, mörk skugga nära elementet med en mycket mjuk, bredare och ljusare skugga längre bort, uppnås ett naturligt djup.
Verktyget pre-renderar fem lager för att underlätta denna process. Det första lagret har standardvärdena 0 8 24 -4 med en 18 % transparent svart färg, medan de övriga fyra lagren initialt är dolda. Du kan aktivera och konfigurera dessa individuellt genom att klicka på Lägg till lager, eller ta bort dem med Ta bort lager. När du använder flera lager separeras de genererade värdena med kommatecken i den slutgiltiga CSS-koden.
Tekniska regler och gränsvärden
När du justerar reglagen i Box Shadow-generator uppdateras CSS-koden direkt i realtid. Följande gränser och standardvärden tillämpas av verktyget:
| Parameter | Lägsta värde | Högsta värde | Standard (Lager 1) |
|---|---|---|---|
| Horisontell förskjutning | -50px | 50px | 0px |
| Vertikal förskjutning | -50px | 50px | 8px |
| Oskärpa (blur) | 0px | 100px | 24px |
| Spridning (spread) | -50px | 50px | -4px |
När du klickar på Lägg till lager skapas ett nytt skugglager med verktygets standardvärden. Om du vill ta bort ett specifikt lager klickar du på Ta bort lager för att radera det från listan och från den genererade CSS-koden.
Integritet och lokal databehandling
När du använder Box Shadow-generator sker all beräkning och rendering lokalt i din webbläsare. Inga parametrar, färgval eller skugginställningar laddas upp till BroBroGo. Detta innebär att ditt designarbete förblir helt privat under hela sessionen.
Vanliga frågor
Vad styr egentligen offset, blur och spread?
Offset flyttar skuggan i sidled och höjdled, blur gör dess kanter mjukare, och spread gör den större eller mindre innan den blir oskarp. En negativ spread drar in skuggan, vilket är användbart för en tät, nära skugga.
Vad gör alternativet inset?
En vanlig skugga hamnar utanför elementet, som ljus bakom ett upphöjt kort. Inset vänder den inåt istället, så att elementet ser nedsänkt ut – praktiskt för nedsänkta inmatningsfält eller nedtryckta knappar.
Varför ska man stapla flera skugglager?
En enskild skugga ser platt ut efter en viss storlek. Verkligt djup kombinerar oftast en snäv, mörk skugga med en mjuk, bredare skugga – lägg till ett andra lager och finjustera dem oberoende av varandra för att få den effekten.