Set skuggen i skuggen

Et hugsar godt fyrste gong skygge­ef­fek­ten kom til ombrekking­spro­gram­met InDe­sign tid­leg på 2000-talet. Pho­to­shop hadde hatt det ei stund allereie etter det eg hugsar. Diverre gjekk folk over styr då dei skulle lage ein «3D»-effekt i trykksak­ene sine. Slagskug­gar i hist, pist og heilt bak mål — sjølvsagt med orig­i­nalin­still­ingane. Under har eg tatt inn nokre eksem­pel på dette, og kor­leis eg mein­er det ikkje bør gjerast.

Framhev teksten/elementet — ikkje skuggen

Ikkje akku­rat heilt fint, nei…

Ein kan med enkle grep dempe denne groteske leg­gin­ga av skugge. Der­som ein nyt­tar nokre ver­diar nær desse eg har sett i InDe­sign vert resul­tatet meir spise­leg:

Meir rik­tig leg­ging av skugge (innstill­inger for InDe­sign).

Eit lite tips i InDe­sign for å la dette vere stan­dard­innstill­ing for alle nye doku­ment er å set­je ver­dian utan å ha nokon doku­ment opne. Gå inn i menyen Object > Effects > Drop Shad­ow og endre det til det som du måtte sjå på som per­fekt for dine fram­tidi­ge design…

Der­som du stiller skuggen inn som dette under i Pho­to­shop så har du eit godt utgongspunkt til å få eit lekrare design i bileter som treng skugge som effekt også:

Kjekke innstill­ingar også i Pho­to­Shop.

For å få skugge må ein ha lys

Det er av og til nok med ein sub­til skugge­leg­gjing i ditt design, men av og til feng­jar det med litt piff på sjølve lys­set­tin­ga også. Grafisia har ein liten veiled­ning på kor­leis ein kan løyse dette. Kan­skje ikkje stan­dard innan lys­set­ting, men likev­el artig effekt.

Er dette noko for veven?

Ja, det er det. Ved hjelp av CSS3 er det mange dørar som opnar seg for skugge­leg­g­jaren der ute. Saman med HTML5 er det nesten uen­delege mark­er å pløya. Her er eit eksem­pel på skug­gar på bok­sar og bileter (lik den som kjem på bile­ta mine når du held musa over dei) og på tekst:

#skugge-paa-boks {
 -moz-box-shadow: 0 0 5px #888; /* [horisontalt] [vertikalt] [storleik] [farge] */
 -webkit-box-shadow: 0 0 5px #888; /* [horisontalt] [vertikalt] [storleik] [farge] */
 box-shadow: 0 0 5px #888;
 }

#skugge-pa-tekst p {
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);; /* [horisontalt] [vertikalt] [storleik] [RGB-farge] */
 }

Denne kat­ten vis­er deg nokre eksem­pler på kor­leis ein kan kode vakker typografi.

Sjølvsagt kan ein ha skugge på bileter på veven også. Anten ein lett skugge rundt heile, eller leg­gje til effek­ter som på denne lokale nettsi­da i hjørnene ved hjelp av CSS og bileter:

Jaha…

Det eg har vist her er ikkje malen for kor­leis det skal gjerast, men heller ret­ningslin­jer for kor­leis det kan gjerast — og kva som er min føretrukne måte. Kom gjerne med dine favorittmå­tar å nytte skug­ger på!