CSS box-shadow-generator

Slik fungerer det

Box-shadow tar fire tall og en farge i en bestemt rekkefølge, og forskjellen mellom en skygge som gir dybde og en som ser ut som et klistremerke, ligger helt i disse tallene. Å se det endre seg mens du drar er mye raskere enn å gjette.

Hva de fire tallene betyr

I rekkefølge: horisontal forskyvning, vertikal forskyvning, uskarphetsradius og spredning. Forskyvningene flytter skyggen; uskarphet mykner kanten; spredning gjør den større eller mindre før uskarphet. En negativ spredning trekker skyggen inn, og det er slik du får en tett skygge under et kort uten at den flyter ut på sidene.

Få det til å se ekte ut

Lys kommer vanligvis ovenfra, så en liten positiv vertikal forskyvning uten horisontal forskyvning virker naturlig. Store, svært gjennomsiktige skygger gir myk dybde; små, mørke, skarpe ser ut som et utklipt klistremerke. Ekte gjenstander kaster skygger som er mer uskarpe jo lenger de er fra overflaten – en større uskarphet antyder et høyere element.

Inset-skygger

En inset-skygge tegnes inni elementet i stedet for utenfor, og det er slik nedtrykte knapper, inndatafelt og innfelte paneler lages. De samme fire tallene gjelder, bare med retning innover.

Flere skygger samtidig

CSS godtar en kommaseparert liste, og å legge to lag – én tett og mørk, én bred og svak – ser betydelig bedre ut enn én enkelt. Denne generatoren lager én; lim sammen to selv for den lagdelte effekten.