Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

Vind je de schaduwrand onder het menu op deze website ook zo mooi en wil je dat ook op jouw website?
In deze CSS tutorial lees je hoe schaduw kunt maken met CSS 3!

Het toevoegen van een schaduw was vroeger alleen mogelijk met photoshop, maar sinds de introductie van CSS 3 kun je dat ook heel eenvoudig in je stylesheet aanpassen door het onderstaande lijntje code toe te voegen aan de div waar je schaduw aan wilt toevoegen:

box-shadow:  5px  5px  15px  1px   #666;

Het eerste cijfer bepaalt de horizontale positie van de schaduw, het tweede cijfer de verticale positie.
Als je deze beide op 0px zet krijg je een gelijkmatige schaduw rond de gehele div zoals hieronder.

box-shadow:  0px  0px  15px  1px  #666;

Je kunt hier echter ook een beetje mee spelen om andere effecten te krijgen. Als je deze cijfers bijvoorbeeld op 5px zet krijg je het effect van de bovenste box, dus alleen een rand onder en rechts (slagschaduw dus). Als je beide cijfers een negatieve waarde geeft, bijvoorbeeld -5px, verplaatst de schaduwrand zich juist naar linksboven.

Het derde cijfer bepaalt de blur. Blur is het fade out effect, dus hoeveel pixels de schaduw erover doet om van de ingestelde kleur naar transparant te gaan. Hoe hoger de ingestelde waarde, hoe breder de blur.

Het vierde cijfer bepaalt de spread, letterlijk vertaald de spreiding; de breedte van de schaduwrand dus.

De laatste waarde in onze code bepaalt vanzelfsprekend de kleur, in bovenstaand voorbeeld dus #666 (donkergrijs).
Je kunt hier uiteraard ook een minder natuurlijke schaduwkleur voor gebruiken zoals het paars onder ons menu.

Schaduw binnen de box

Het is ook mogelijk de schaduw binnen de box (dus aan de binnenzijde van de div) weer te geven.
Daarvoor voeg je eenvoudigweg inset toe aan de code:

box-shadow:  inset  0px  1px  15px  1px  #666;

Tekstschaduw

In CSS3 kun je ook schaduw aan teksten toevoegen. Dat doe je met de volgende code:

text-shadow: 2px 2px 2px #666;

De eigenschappen zijn hetzelfde als bij de gewone schaduw, dus eerst de horizontale positie van de schaduw, vervolgens de verticale positie, dan de blur en ten slotte de kleur. Je kunt bij een tekstschaduw geen spread instellen.

In dit artikel vind je nog een aantal mooie tekstschaduw effecten.

WordPress verstuurt geen e-mail

Gratis website tips ontvangen?

Wil je op de hoogte gehouden worden van interessante artikelen, kortingsacties van populaire plugins en andere dingen om je website nog beter te maken? Laat dan hieronder je e-mail adres achter!

Gelukt! Controleer je inbox even voor de bevestigingslink.