CSSLeren.nl Tutorials Div Met Shaduw

Div Met Shaduw

In deze tutorial gaan we een div maken met een schaduw zoals hieronder is afgebeeld. We doen dit met behulp van achtergrond plaatjes. Het handige is dat de schaduw mee groeit met de div.

Het maken van een goede schaduw is niet een twee drie zo gedaan en soms moet het op een wat omslachtige manier maar dan werkt het wel goed en groeit de schaduw mee met de hoogte van de div.

Om te beginnen moet je drie plaatjes maken, een van de bovenkant, een van de onderkant en een van het midden. de plaatjes van het voorbeeld zien er zo uit. Het plaatje van het midden hoeft maar 1 px dik te zijn.

Een paar dingen waar je op moet letten is dat je de randjes links en rechts van de boven en onder plaatje mee neemt want anders zit er geen mooie border omheen. Nu gaan we de plaatjes in de CSS en HTML zetten. Het is belangrijk dat je bij de div de padding op 0 px instelt want anders gaat het niet, hoe je toch je tekst nog kan uitlijnen vertellen we verderop nog wel.

We maken de div en nemen als achtergrond plaatje het middenplaatje, die herhaalt zich dan van boven naar beneden. Daarna gaan we in de HTML de boven en onder plaatjes er overheen plakken zodat je dan die inhammen krijgt.

Border 0 px hoeft niet perse maar dat is even om duidelijk te maken dat je geen border er aan moet toegvoegen, tevens moet je ook de padding op 0px hebben. hoogte of je ook niet mee te geven.

Nu gaan we in de tabel de boven en onder plaatje toevoegen. Zet simpelweg het bovenste plaatje helemaal bovenaan en het onderste plaatje helemaal onderaan. Het is we belangrijk width en align in te stellen, width op 100% en align bij het boven plaatje op top en onder plaatje op bottom.

Nu als laatste wil je misschien nog een padding voor je tekst en dat kan heel eenvoudig met een aparte div die je in de hoofd div zet. Dan doe je het op deze manier.