Droppskuggor

Droppskuggor, eller drop shadows, är en grafisk effekt där en skugga uppstår bakom eller bredvid ett objekt så att det verkar ligga framför en bakgrund. Skuggan indikerar ett ljusläge och ger intryck av höjd och separation från omgivningen. Typiska egenskaper är avståndet mellan objektet och skuggan, oskärpan (blur), färg och opacitet.

I praktiken används droppskuggor i både grafisk design och användargränssnitt för att skilja element, skapa hierarki och förbättra läsbarheten. Inom webb- och appdesign används ofta skuggeffekter för att simulera upphöjning och djup i linje med designsystem som anger nivåer av elevation. I grafisk programvara som Photoshop eller Illustrator används drop shadow- eller filtereffekter som justeras med avstånd, storlek, spridning och opacitet. CSS erbjuder två vanliga metoder: box-shadow för höjdskuggor på låd- eller rutaelement och text-shadow för skugga på text. En annan metod är filter: drop-shadow(), som appliceras på rastergrafik.

Historiskt har droppskuggor varit vanliga i skeuomorfisk design men används fortfarande i modern UI i måttfulla mängder för att förbättra läsbarhet och fokus utan att överdriva. Det är viktigt att använda dem med måtta och konsekvent, eftersom överdrivna eller inkonsekventa skuggor kan skapa visuellt brus och påverka användbarhet.

Riktlinjer inkluderar subtil opacitet, korrekt riktning mot en tänkt ljuskälla, och att säkerställa tillräcklig kontrast och läsbarhet, särskilt för text ovanför färgglada bakgrunder.