Skygger og neoneffekter på skrift

Til de nyere browsere, der kan håndtere den type style sheets der hedder CSS3 er der en effekt der hedder 'text-shadow', som kan bruges til skyggeeffekter på tekster og objekter. Objekter bliver beskrevet på en anden side, da man med denne effekt kan lave så mange forskellige effekter på sin side, at det skal gennemgås hver for sig.

Text-shadow består af to dele: en angivelse af forskydningen, dvs. hvor lange skyggerne skal være, samt en farve. Forskydningen defineres højre/venstre og op/ned, så man kan selv vælge hvor "lyset" skal komme fra.

Skyggeeffekter svarende til at lyset kommer fra øverste venstre hjørne kræver at man "trækker" i to retninger. For ren skyggeeffekt med en mørk grå ser koden således ud:



På siden, når den vises, ser det således ud:



Hvis man således vil lave en lilla skygge og simulere, at lyset kommer fra en kilde lige under teksten ser det således ud:



På siden, når den vises, ser det således ud:

I stedet for den skarpe tekstskygge kan man lave noget der er mere diffus, eller udtværet om man vil, ved at give en ekstra forskydning.

Hvis vi tager vores grå skygge fra før og giver et forskydningspunkt mere ser koden således ud:



På siden, når den vises, ser det således ud:



Jo større det tredje forskydningspunkt er, des mere diffus bliver skyggen.

Det er muligt at lave flere skygger samtidig. Dette gøre ved at definere flere sæt skygger, adskildt med komma.

Hvis vi prøver at lægge tre skygger på i blå, grøn og rød ser koden således ud:



På siden, når den vises, ser det således ud:



Umiddelbart kan det se lidt sært ud med flere skygger samtidig, men ved at kombinere en lys og en mørk skygge (ikke diffuse), kan man opnå en ret god kontrasteffekt hvor tekst og baggrund er tæt på hinanden i farve og derfor svær at læse, f.eks. to grå nuancer:



På siden, når den vises, ser det således ud:



Giver man teksten fire skygger (ikke diffuse), kan man, i stedet for kontrasten, opnå en omkransning af bogstaverne:



På siden, når den vises, ser det således ud:



Gør man dette, kan man med fordel give bogstaverne lidt mere afstand med letter-spacing. Hvis vi giver teksten fra før en letter-spacing på 1px, bliver koden:



På siden, når den vises, ser det således ud:

På linje med omkransningen, man man lave en neoneffekt, dvs. en diffus omkransning. Det gøres helt enkelt ved at lave en diffus skygge som gennemgået længere oppe, men uden at være blevet forskudt i x-y-planet. Så ser koden således ud:



På siden, når den vises, ser det således ud:



Hvis man synes at neoneffekten ikke er kraftig nok, kan man lægge den på flere gange. Her prøver vi med to gange, så ser koden således ud:



Så ser neoneffekten således ud:



Farverne kan naturligvis kombineres og gives forskellig udbredelse, så man får lidt farveovergang, f.eks. de to gange rød skygge, der her får lidt gul farve lige inde omkring bogstaverne. Koden er:



Så ser neoneffekten således ud:



Effekter som denne fungerer ikke så godt til de mindre fontstørrelser man bruger til brødteksten, men i fonstørrelser man vil bruge til overskrifter kan man godt få nogle brugbare effekter frem, det er bare at forsøge sig lidt frem.