CSS box-shadow-generator

Sådan fungerer det

Box-shadow tager fire tal og en farve i en bestemt rækkefølge, og forskellen mellem en skygge, der giver indtryk af dybde, og en, der ligner et klistermærke, ligger udelukkende i de tal. At se det ændre sig, mens du trækker, er meget hurtigere end at gætte.

Hvad de fire tal betyder

I rækkefølge: vandret forskydning, lodret forskydning, sløringsradius og spredning. Forskydningerne flytter skyggen; sløring blødgør dens kant; spredning gør den større eller mindre før sløringen. En negativ spredning trækker skyggen ind, og det er sådan, du får en tæt skygge under et kort, uden at den flyder ud i siderne.

Sådan får du den til at se ægte ud

Lyset kommer som regel ovenfra, så en lille positiv lodret forskydning uden vandret forskydning virker naturlig. Store, meget gennemsigtige skygger virker som blød dybde; små, mørke, skarpe virker som et udklippet klistermærke. Rigtige genstande kaster skygger, der er mere slørede, jo længere de er fra overfladen – en større sløring antyder et højere element.

Indadgående skygger

En indadgående skygge tegnes inde i elementet i stedet for uden for det, og det er sådan, nedtrykkede knapper, inputfelter og indfældede paneler laves. De samme fire tal gælder, bare med retning indad.

Flere skygger på én gang

CSS accepterer en kommasepareret liste, og at lægge to lag – ét tæt og mørkt, ét bredt og svagt – ser betydeligt bedre ud end ét enkelt. Denne generator producerer én; indsæt selv to sammen for at få den lagdelte effekt.