Box-shadow | Schaduw met CSS3

Schaduw maken in je website deed je voorheen in Photoshop, maar met CSS3 hoeft dat niet meer. Je kunt namelijk met de box-shadow property met CSS3 een schaduw creëren.

Je kunt box-shadow heel goed gebruiken in combinatie met border-radius. Box-shadow zal geheel de rand volgen van je border-radius instellingen.

De syntax

De syntax van box-shadow is als volgt:

box-shadow: 10px 10px 5px #232323;

Zoals je ziet kun je 3 afmetingen meegeven. Deze 3 afmeting staan respectievelijk voor:

De horizontale offset, bij een positief getal staat de schaduw aan de rechterkant van de box en bij een negatief getal komt de schaduw aan de linkerkant
De verticale offset, bij een positief getal staat de schaduw aan de onderkant van de box en bij een negatief getal komt de schaduw aan de bovenkant
Het derde getal staat voor de blur, dit regelt hoeveel overgang in de schaduw zit

Het laatste gedeelte is de kleur, je kunt hier elke willekeurige kleur aan geven. Afhankelijk van het derde getal dat je hebt opgegeven zal de schaduw één strakke kleur zijn, of netjes overlopen van de kleur die je gekozen hebt naar transparant.

Browser support

Box-shadow | Schaduw met CSS3

De syntax

Browser support

Meer nieuws items

Nieuws

Reageer

Orange Dev Design Twittert

U bent overtuigd?

	Naam (verplicht)
	Mail (zal niet gepost worden) (verplicht)