Lav skygger med CSS3’s text-shadow og box-shadow

CSS3 kommer med en lang række fancy ting som gør livet lidt nemmere for webdesigneren, det er f.eks. slut (ah næsten) med at bruge himmel dyre tegneprogrammer, en masse ekstra baggrundsbillede samt tilføje en masse ikke-semantisk HTML for at lave smarte skygge effekter på sine tekster og andre ting.

Med text-shadow og box-shadow er det nemlig muligt at lave skygger til ens HTML elementer, og lad os tage et smugkig på dem nu.

Følgende billede er lavet med photoshop, mindre kønt, men det tjener sit formål, nemlig at vise nogle simple boks og tekst skygger. Lad os se om CSS3 kan lave noget lignende. Vi starter med tekst skyggen.

Eksempel på hvad man kan lave med text-shadow og box-shadow

Text-shadow

Til tekst skygger bruges attributten text-shadow. Dens syntaks er sådan her:

text-shadow: none | [<shadow>, ] * <shadow>
Og shadow er defineret som:
<shadow> = <length> <length> <length>? <color>?

På menneskesprog vil det sige at text-shadow består af 0 til mange skygger. Skyggen har tre længder som er den horisontale afstand (x), den vertikale afstand (y) og tilsidst en valgfri skygge sprednings afstand. Hvis skygge spredningen ikke angives får den 0px i værdi, dvs. skyggen bliver skarp. Derudover har skyggen også valgfri farve, hvis ingen skygge angives så nedarves der fra det element som skyggen er tildelt.

Lad os se lidt eksempler på hvordan text-shadow kan se ud:

.skygge1 { text-shadow: 3px 3px; }
.skygge2 { text-shadow: 1px 2px 2px; }
.skygge3 { text-shadow: 2px 2px 2px black; }
.skygge4 { text-shadow: 2px 2px 2px orange, 3px 3px 2px blue; }
.skygge5 { text-shadow: none; }

I en browser der understøtter text-shadow ville ovenstående give følgende resultat:

Et eksempel der viser text-shadow på 5 forskellige måder

Se demo

Fjern shadow fra markeret text

Så pæn det nu end kan være med text-shadow, så kan det også give nogle ret uheldige resultater når teksten markeres og baggrundsfarven ændres. Det kan undgåes ved at sætte text-shadow: none på markeret tekst:

::selection {
   text-shadow: none;
}

Firefox 5+ lader til at have deaktiveret skygger på markeret tekst, men Chrome og Safari viser dem stadig som default.

Box-shadow

Til at lave skygger på andet end tekst bruges box-shadow. Den er meget ligesom text-shadow, men med lidt forskel på hvordan skyggen opfører sig, det er blandt andet muligt at lave en indre-skygge (Ligesom Photoshop’s inner-shadow). Syntaksen:

box-shadow: none | <shadow> [ , <shadow> ]*
Hvor shadow er:
<shadow> = inset? && [ <length>{2,4} && <color>? ]

box-shadow kan også håndtere flere skygger af gangen, men shadow ser lidt mystisk ud, lad os få den ned på et mere læsbart niveau:

shadow = inset x y blur afstand farve

  • inset – Hvis man have skyggen som en inner-shadow så tilføjes inset foran
  • x, y – Angiver hvor skyggen skal placeres. 5px 5px vil rykke skyggen 5px til højre og 5px ned.
  • blur – Angiver hvor sløret skyggen skal være, en værdi på 0 gør skyggen skarp
  • afstand – Tag en kasse op fra jorden, jo længere væk desto større skygge, en afstand på 10px gør skyggen 10px større i omkreds
  • farve – Angiver farven, er igen valgfri, men sæt en alligevel pga. browser support

Følgende viser nogle eksempler på nogle bokse med skygger som man kan lave med box-shadow:

Six diffent box-shadow examples

Og CSS’en til at lave skyggerne:

.box-1 { box-shadow: 8px 12px 0px #875c5c; }
.box-2 { box-shadow: 8px 12px 4px #875c5c; }
.box-3 { box-shadow: 8px 12px 0px 10px #875c5c; }
.box-4 { box-shadow: 8px 12px 4px 10px #875c5c; }
.box-5 { box-shadow: inset 8px 12px 0px 0px #875c5c; }
.box-6 { box-shadow: inset 8px 12px 0px 0px #875c5c, 
                     8px 12px 0px 0px #5d3a3a; }

Browser understøttelse

De fleste nyere browsere understøtter box-shadow, men Safari kræver -webkit-box-shadow attributten i stedet. IE9 understøtter også box-shadow!

CSS vs Photoshop, time to drop Photoshop in the trash bin? No!

Behold tegneprogrammerne lidt endnu - Foto af Bigoteetoe

Så det er slut med Photoshop?

Nej, selvom det ser fancy ud, så har CSS grafik stadig en stor svaghed: Browserunderstøttelse.

Derudover overlader man renderingen af skyggerne til browserens implementation, dvs. man reelt set ikke kan vide sig sikker på om skyggerne nu egentlig ser ud som de skal på slut-klientens skærm. Firefox og Safari renderer f.eks. ikke slørede skygger på samme måde lige pt. så går man efter et pixelperfekt design skal skyggerne være lavet med png’er.

Men hvis man ikke er så stringent, og kan man leve med lidt forskellig rendering, så sparer man hurtigt en masse tid ved at benytte sig af text- og box-shadow ved simple skygger på sine websider.

Lidt sjov med skygger

Man kan jo som sagt tilføje flere skygger på et element med box-shadow, og det kan give nogle spændende resultater. Lad os prøve følgende:

box-shadow: -15px 0px 0px rgba(255, 0, 0, 0.4), 
	    -27px 0px 0px rgba(255, 150, 0, 0.4), 
	    -36px 0px 0px rgba(255, 255, 0, 0.4), 
	    -45px 0px 0px rgba(0, 255, 0, 0.4), 
	    -52px 0px 0px rgba(0, 0, 255, 0.4), 
	    -58px 0px 0px rgba(155, 0, 255, 0.4),
	    -62px 0px 0px rgba(255, 0, 255, 0.4);

Jeps, regnbuens farver! Og med lidt ekstra CSS er det faktisk muligt at lave en lille regnbue (Live eksempel):

En regnbue lavet vha. css box-shadow

Måske mindre brugbart, men det giver da et godt billede af at CSS er et kraftfuld værktøj!

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.