CSS - Schaduw toevoegen


Sinds CSS 3 bestaat er de mogelijkheid om met behulp van CSS een schaduw in te stellen voor elementen net zoals dit kan bij tekst. Een voorbeeld zie je direct hieronder, middels de code stel je de schaduw in evenals de kleur. Op deze manier kun je effecten maken bijvoorbeeld in combinatie met ronde hoeken.

Met de eerste waarde bepaal je de plaatsing horziontaal, met de tweede waarde verticaal. De derde waarde staat voor blur, de vierde waarde voor spread en de laatste waarde is de kleur. Als vijfde eigenschap kan er nog 'inset' worden toegevoegd om de schaduw binnen een element toe te passen zoals in het tweede voorbeeld is te zien.

div.background {
        box-shadow:0px 0px 20px 10px #999;
}


RGBa

In het bovenstaande voorbeeld wordt de kleur ingesteld door een Hex waarde in te voeren. Maar in plaats daarvan kun je ook kleuren aangeven in RGB en aanvullend hierop in RGBa en met name deze laatste kan in het geval van het toepassen van een schaduw bijzonder handig zijn. Wat je zodoende doet is het aangeven van een kleur in RGB door de eerste drie waardes in te voeren, de vierde waarde is de dan mate van doorzichtigheid en zodoende kun je leuke effecten bereiken en conflicten met andere kleuren voorkomen.

div.background {
        box-shadow:0px 0px 20px 10px rgba(0, 0, 0, 0.4);
}