CSS Basis

Selectors

Geavanceerd

< >

CSS Schaduw effecten

Met CSS kun je schaduw effecten toevoegen aan tekst en aan elementen.

Met CSS kun je schaduweffecten creëren!

CSS schaduw effecten

Zoals je in de bovenstaande voorbeeld kunt zien is er schaduw toegevoegd aan de afbeelding en de tekst. In deze hoofdstuk leer jeover de volgende eigenschappen.

text-shadow

box-shadow

CSS text-shadow eigenschap

Je kunt de eigenschap text-shadow gebruiken om schaduweffecten op tekst toe te passen. Dit is heel simpel te creëren je hoeft alleen de horizontale schaduw (2px) en de verticale schaduw (2px) op te geven.

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  text-shadow: 2px 2px;
}

Uitproberen

Vervolgens kunnen we een kleur toevoegen aan de schaduw:

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  text-shadow: 2px 2px red;
}

Uitproberen

Vervolgens kunnen we een vervagingseffect (blur) toevoegen aan de schaduw:

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  text-shadow: 2px 2px 5px red;
}

Uitproberen

Het volgende voorbeeld toont een witte tekst met een zwarte schaduw:

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  color: white;
  text-shadow: 2px 2px 4px black;
}

Uitproberen

Het volgende voorbeeld toont een rode neon gloedschaduw:

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  text-shadow: 0 0 3px red;
}

Uitproberen

CSS Meerdere schaduwen

Om meer dan één schaduw aan de tekst toe te voegen, kun je een door komma gescheiden lijst met schaduwen creëren. Het volgende voorbeeld toont een rode en een gele neon gloedschaduw.

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  text-shadow: 0 0 3px red, 0 0 5px yellow;
}

Uitproberen

Het volgende voorbeeld toont een witte tekst met een zwarte, blauwe en donkerblauwe schaduw:

Tekst schaduw effect!

Voorbeeld:

#schaduw {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Uitproberen

Je kunt de eigenschap text-shadow ook gebruiken om een rand rond de tekst te maken:

Rand rond de tekst!

Voorbeeld:

#schaduw {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Uitproberen

CSS box-shadow eigenschap

De eigenschap box-shadow kun je gebruiken om schaduw voor je elementen te genereren en diepte te voegen aan je knoppen, afbeeldingen enz. de basis opbouw voor het maken van een box is als volgt:

box-shadow: horizontaal(x) verticaal(y) blurradius spreadradius kleur;

Laten we beginnen met een heel simpel voorbeeld waar we alleen een horizontale en een verticale schaduw gaan maken. Indien er geen kleur is opgegeven dan is de huidige tekstkleur de standaardkleur voor de schaduw.

Een <div> element met een box-shadow

Voorbeeld:

div {
  box-shadow: 10px 10px;
}

Uitproberen

Kleur voor de schaduw opgeven

Met de kleurparameter geef je simpelweg de kleur van de schaduw op.

Een <div> element met een paarse box-shadow

Voorbeeld:

div {
  box-shadow: 10px 10px purple;
}

Uitproberen

Blurradius voor de schaduw opgeven

De parameter blur definieert de vervagingseffect voor de schaduw. Hoe hoger het nummer, hoe waziger de schaduw zal zijn.

Een <div> element met een paarse box-shadow en 5px blur

Voorbeeld:

div {
  box-shadow: 10px 10px 5px purple;
}

Uitproberen

Spreadradius voor de schaduw opgeven

De parameter spread definieert de spreadradius. Een positieve waarde verhoogt de grootte van de schaduw, een negatieve waarde vermindert de grootte van de schaduw.

Een <div> element met een paarse box-shadow, 5px blur en een gespreide straal van 12px

Voorbeeld:

div {
  box-shadow: 10px 10px 5px 12px purple;
}

Uitproberen

Meerdere schaduwen toevoegen

Elementen kunnen ook meerdere schaduwen hebben:

Een <div> element met meerdere schaduwen

Voorbeeld:

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.