Skugggenerator

Ja, du kan lägga till flera skuggor för att skapa komplext djup och effekter. Varje skugga kan justeras individuellt.

En inset-skugga visas inuti elementet snarare än utanför. Medan vanlig box-shadow visas utanför, skapar tillägg av inset en intryckt, nedsänkt effekt.

Verkliga skuggor är inte svarta; de är bakgrundsfärgen gjord mörkare och mjuknar mot kanterna. Lägg i stället för en tung skugga med 30 % svart två eller tre mycket bleka lager med olika oskärperadier — exempelvis 1 px tätt intill kanten, 8 px bakom och en mycket lätt på 24 px längre ut. Utgå från ljus uppifrån: ge skuggan bara en lodrät förskjutning och låt den vågräta vara noll.

I en statisk layout är kostnaden försumbar, men allt ändras i samma stund du animerar. Att låta box-shadow-värdet övergå vid hovring tvingar webbläsaren att räkna om oskärpan varje bildruta, vilket hackar synligt på svagare enheter. Behöver du en skugga som växer vid interaktion animerar du i stället opaciteten eller transform på ett förrenderat skuggskikt — resultatet blir betydligt mjukare.