CSS text-shadow eigenschap
- Vorige pagina Tekst-overloop
- Volgende pagina text-transform
Definitie en gebruik
De text-shadow-eigenschap stelt een schaduw in voor de tekst.
Zie ook:
CSS3 handleiding:CSS3 teksteffecten
HTML DOM referentiehandleiding:textShadow-eigenschap
Voorbeeld
Basis effect van tekstschaduw:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Er zijn meer voorbeelden onderin de pagina.
CSS syntaxis
text-shadow: h-shadow v-shadow blur color;
Opmerking:De text-shadow-eigenschap voegt een of meerdere schaduwen toe aan de tekst. Deze eigenschap is een komma-gescheiden lijst van schaduwen, waarbij elke schaduw twee of drie lengtewaarden en een optionele kleurwaarde wordt bepaald. Overgeslagen lengtes zijn 0.
Eigenschapswaarde
| Waarde | Beschrijving | Test |
|---|---|---|
| h-shadow | Verplicht. De horizontale positie van de schaduw. Negatieve waarden zijn toegestaan. | Test |
| v-shadow | Verplicht. De verticale positie van de schaduw. Negatieve waarden zijn toegestaan. | Test |
| blur | Optioneel. De afstand van de vervaaging. | Test |
| color | Optioneel. De kleur van de schaduw. Zie CSS Kleurwaarde. | Test |
Technische details
| Standaardwaarde: | geen |
|---|---|
| Inheritantie: | ja |
| Versie: | CSS3 |
| JavaScript syntaxis: | object.style.textShadow="2px 2px #ff0000" |
Meer voorbeelden
- Tekstschaduw met een vervaagd effect
- Dit voorbeeld demonstreert de tekstschaduw met een vervaagd effect.
- Tekstschaduw op witte tekst
- Dit voorbeeld demonstreert de tekstschaduw op witte tekst.
- Tekstschaduw met neon-effect
- Dit voorbeeld demonstreert de tekstschaduw met neon-effect.
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- Vorige pagina Tekst-overloop
- Volgende pagina text-transform
