Skyggegenerator

Ja, du kan tilføje flere skygger for at skabe kompleks dybde og komplekse effekter. Hver skygge kan justeres individuelt.

En inset-skygge vises inde i elementet i stedet for udenfor. Mens en normal box-shadow vises udenfor, skaber tilføjelse af inset en indrykket, presset-ind-effekt.

Rigtige skygger er ikke sorte; de er baggrundsfarven gjort mørkere, og de blødgøres ud mod kanterne. Læg i stedet for én tung skygge med 30 % sort to eller tre meget blege lag med forskellige slørings-radier — for eksempel 1 px tæt ved kanten, 8 px bagved og en meget let på 24 px længere ude. Antag lys ovenfra: giv kun skyggen en lodret forskydning, og lad den vandrette være nul.

I et statisk layout er omkostningen ubetydelig, men det ændrer sig i samme øjeblik du animerer. At lade box-shadow-værdien gå i overgang ved hover tvinger browseren til at genberegne sløringen i hvert billede, hvilket hakker synligt på svage enheder. Har du brug for en skygge, der vokser ved interaktion, så animér i stedet opaciteten eller transform på et forudtegnet skyggelag — resultatet bliver langt mere glidende.