Vind je de schaduwrand onder het menu op deze website ook zo mooi en wil je dat ook op jouw website?
\nIn deze CSS tutorial lees je hoe schaduw kunt maken met CSS 3!<\/p>\n
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:<\/p>\n
Het eerste cijfer<\/strong> bepaalt de horizontale positie<\/em> van de schaduw, het tweede cijfer<\/strong> de verticale positie<\/em>. 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.<\/p>\n Het derde cijfer<\/strong> bepaalt de blur<\/em>. 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.<\/p>\n Het vierde cijfer<\/strong> bepaalt de spread<\/em>, letterlijk vertaald de spreiding; de breedte van de schaduwrand dus.<\/p>\n De laatste waarde in onze code bepaalt vanzelfsprekend de kleur, in bovenstaand voorbeeld dus #666 (donkergrijs). Het is ook mogelijk de schaduw binnen de box (dus aan de binnenzijde van de div) weer te geven. In CSS3 kun je ook schaduw aan teksten toevoegen. Dat doe je met de volgende code:<\/p>\n 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.<\/p>\n
\nAls je deze beide op 0px<\/strong> zet krijg je een gelijkmatige schaduw rond de gehele div zoals hieronder.<\/p>\n
\nJe kunt hier uiteraard ook een minder natuurlijke schaduwkleur voor gebruiken zoals het paars onder ons menu.<\/p>\nSchaduw binnen de box<\/h2>\n
\nDaarvoor voeg je eenvoudigweg inset <\/strong>toe aan de code:<\/p>\nTekstschaduw<\/h2>\n