HTML-Hajen

Skygger og neoneffekter på skrift









Standard tekstskygge

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:

Her er der normal tekst, <SPAN STYLE="text-shadow: 0.15em 0.15em #2F4F4F">her er der skygge, hvis browseren understøtter CSS3,</SPAN> og her bliver den normal igen.


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

Her er der normal tekst, her er der skygge, hvis browseren understøtter CSS3, og her bliver den normal igen.


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:

Her er der normal tekst, <SPAN STYLE="text-shadow: 0em -0.25em 1.5em #9400D3">her er der skygge, hvis browseren understøtter CSS3,</SPAN> og her bliver den normal igen.


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

Her er der normal tekst, her er der skygge, hvis browseren understøtter CSS3, og her bliver den normal igen.


Diffus tekstskygge

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:

Her er der normal tekst, <SPAN STYLE="text-shadow: 0.15em 0.15em 0.1em #2F4F4F">her er der diffus skygge, hvis browseren understøtter CSS3,</SPAN> og her bliver den normal igen.


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

Her er der normal tekst, her er der diffus skygge, hvis browseren understøtter CSS3, og her bliver den normal igen.


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



Flere skygger samtidig

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:

<SPAN STYLE="text-shadow: 0.2em 1.1em 0.1em blue, -0.8em 0.1em 0.1em green, 0.9em -0.9em 0.1em red">Tekst med tre skygger.</SPAN>


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

Tekst med tre skygger.


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:

Her er der normal tekst, <SPAN STYLE="text-shadow: -1px -1px white, 1px 1px black">her er der kontrastgivende skygger, hvis browseren understøtter CSS3,</SPAN> og her bliver teksten normal igen.


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

Her er der normal tekst, her er der kontrastgivende skygger, hvis browseren understøtter CSS3, og her bliver teksten normal igen.


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

Her er der normal tekst, <SPAN STYLE="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black">her er der kontrastgivende skygger, hvis browseren understøtter CSS3,</SPAN> og her bliver teksten normal igen.


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

Her er der normal tekst, her er der omkransning af bogstaverne, hvis browseren understøtter CSS3, og her bliver teksten normal igen.


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:

Her er der normal tekst, <SPAN STYLE="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; letter-spacing:1px">her er der omkransning af bogstaverne, hvis browseren understøtter CSS3,</SPAN> og her bliver teksten normal igen.


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

Her er der normal tekst, her er der omkransning af bogstaverne, hvis browseren understøtter CSS3, og her bliver teksten normal igen.



Neoneffekt

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:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red">Rød tekst med en enkelt rød skygge.</SPAN>


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

Rød tekst med en enkelt rød skygge.


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:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red">Rød tekst med to gange rød skygge.</SPAN>


Så ser neoneffekten således ud:

Rød tekst med to gange rød skygge.


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:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red, 0em 0em 0.2em yellow">Rød tekst med to gange rød + gul skygge.</SPAN>


Så ser neoneffekten således ud:

Rød tekst med to gange rød + gul skygge.


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.