Box-shadow-generator

Så använder du box-shadow-generatorn

1. Börja med en förinställning, eller behåll standardskuggan Mjuk. Raden Förinställningar innehåller Mjuk, Skarp, Lager på lager, Höjd, Neumorfism, Inre och Glöd.
2. Under Skugglager klickar du på ett lager för att välja det. Varje lager kan flyttas med Flytta upp och Flytta ned eller tas bort med Ta bort. Lägg till lager duplicerar det valda lagret så att du kan justera en kopia.
3. Redigera det valda lagret under Redigera det valda lagret: dra punkten i rutan Förskjutning, eller använd reglagen och sifferfälten för Horisontell förskjutning (px), Vertikal förskjutning (px), Oskärpa (px) och Spridning (px).
4. Välj en Skuggfärg med färgväljaren eller skriv valfri CSS-färg i kodfältet, och ställ sedan in Opacitet (%). Kryssa i Inset (inre skugga) för att rita skuggan inuti rutan.
5. Justera Inställningar för förhandsvisning (Rutans färg, Bakgrundsfärg, Hörnradie (px)) för att se skuggan mot dina riktiga färger. De påverkar bara förhandsvisningen.
6. Kopiera deklarationen från CSS-kod med Kopiera.

Tangentbord: ge punkten i rutan Förskjutning fokus och använd piltangenterna för att flytta den 1 px, eller 10 px med Shift.

Så fungerar box-shadow

Syntaxen för en skugga är box-shadow: [inset] x y blur spread color.

• x och y flyttar skuggan åt höger och nedåt. Negativa värden flyttar den åt vänster och uppåt. En ljuskälla ovanför elementet innebär ett positivt y.
• Oskärpa (blur) mjukar upp kanten. Den kan inte vara negativ. Oskärpa 0 ger en skarp kopia av rutan.
• Spridning (spread) gör skuggan större (positivt värde) eller mindre (negativt värde) innan den görs oskarp. En negativ spridning med ett stort y håller skuggan under elementet i stället för runt det.
• Färgen har oftast transparens. Verktyget skriver täckande färger som HEX och genomskinliga som rgba(), som alla webbläsare förstår. Om du skriver en färg som redan har en alfakanal multipliceras den med Opacitet (%).
• inset lägger skuggan innanför ramen, som om rutan var intryckt i sidan.

Skuggan följer elementets border-radius och påverkar aldrig layouten: den tar ingen plats och ger inga rullningslister.

Varför flera skugglager?

Verkliga skuggor är inte en enda suddig rektangel. En liten, mörk och tät skugga ligger precis under föremålet, och en stor, svag och suddig sprider sig längre bort. Att stapla två till fem lager efterliknar detta och ser mycket naturligare ut än en enda tung skugga. Förinställningen Lager på lager fördubblar förskjutning och oskärpa i varje steg med låg opacitet, en teknik som många designsystem har gjort populär. Höjd efterliknar de trelagersskuggor som används i Material Design.

Det första lagret i listan målas ovanpå de andra, precis som i CSS-värdet. Ordningen spelar främst roll när du blandar inre och yttre skuggor eller använder starka färger.

Neumorfism

Neumorfism (”soft UI”) använder två skuggor på ett element som har samma färg som bakgrunden: en mörk som är förskjuten nedåt och åt höger, och en ljus som är förskjuten uppåt och åt vänster. Förinställningen Neumorfism sätter båda färgerna till #e0e5ec. Tänk på att stilen har låg kontrast, så knappar som byggs med den behöver ett tydligt fokusläge och läsbara etiketter.