text-shadow |
box-shadow |
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.
#schaduw {
text-shadow: 2px 2px;
}
Vervolgens kunnen we een kleur toevoegen aan de schaduw:
#schaduw {
text-shadow: 2px 2px red;
}
Vervolgens kunnen we een vervagingseffect (blur) toevoegen aan de schaduw:
#schaduw {
text-shadow: 2px 2px 5px red;
}
Het volgende voorbeeld toont een witte tekst met een zwarte schaduw:
#schaduw {
color: white;
text-shadow: 2px 2px 4px black;
}
Het volgende voorbeeld toont een rode neon gloedschaduw:
#schaduw {
text-shadow: 0 0 3px red;
}
#schaduw {
text-shadow: 0 0 3px red, 0 0 5px yellow;
}
Het volgende voorbeeld toont een witte tekst met een zwarte, blauwe en donkerblauwe schaduw:
#schaduw {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Je kunt de eigenschap text-shadow
ook gebruiken om een rand rond de tekst te maken:
#schaduw {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
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.
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px purple;
}
div {
box-shadow: 10px 10px 5px purple;
}
div {
box-shadow: 10px 10px 5px 12px purple;
}
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
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. |