CSS box-shadow-generator

Så fungerar det

Box-shadow tar fyra tal och en färg i en bestämd ordning, och skillnaden mellan en skugga som ser ut som djup och en som ser ut som en klistermärke ligger helt i de talen. Att se det förändras medan du drar är mycket snabbare än att gissa.

Vad de fyra talen betyder

I ordning: horisontell förskjutning, vertikal förskjutning, oskärperadie och spridning. Förskjutningarna flyttar skuggan; oskärpan mjukar upp dess kant; spridningen gör den större eller mindre före oskärpan. En negativ spridning drar in skuggan, vilket är hur du får en tät skugga under ett kort utan att den flödar ut på sidorna.

Att få den att se verklig ut

Ljuset kommer oftast uppifrån, så en liten positiv vertikal förskjutning utan horisontell förskjutning ser naturlig ut. Stora, mycket transparenta skuggor ger intryck av mjukt djup; små, mörka, skarpa ser ut som ett utklippt klistermärke. Verkliga föremål kastar skuggor som är suddigare ju längre de är från ytan — en större oskärpa antyder ett högre element.

Inre skuggor

En inre skugga ritas inuti elementet i stället för utanför, vilket är hur nedtryckta knappar, inmatningsfält och försänkta paneler görs. Samma fyra tal gäller, bara riktade inåt.

Flera skuggor samtidigt

CSS accepterar en kommaseparerad lista, och att lägga två i lager — en tät och mörk, en bred och svag — ser betydligt bättre ut än en enda. Den här generatorn skapar en; klistra ihop två själv för den skiktade effekten.