Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Geschreven 4 augustus 2005;
laatste update wo 06 jan 2021 05:40:49 UTC
Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik
Zie ook de index van alle tips.
Op deze pagina:
CSS versie 3 heeft een eigenschap genaamd 'text-shadow' om een schaduw aan elke letter van wat tekst toe te voegen. In zijn eenvoudigste vorm ziet het er ongeveer zo uit:
h3 {text-shadow: 0.1em 0.1em #333}
Welke een donker grijze (#333) schaduw toevoegt een beetje rechts (0.1em) en beneden (0.1em) ten opzichte van de normale tekst. Het resultaat ziet er zo uit:
De eenvoudigste vorm van de 'text-shadow' eigenschap heeft twee delen: een kleur (zoals de bovenstaande #333) en een offset (0.1em 0.1em in het bovenstaande voorbeeld). Dit resulteert in een scherpe schaduw op de aangegeven offset. Maar de offset kan ook doezelig worden gemaakt, hetgeen resulteert in een meer of minder vage schaduw.
De mate van doezeligheid wordt gegeven door een andere offset. Hier zijn twee lijnen, een met een kleine doezeligheid (0.05em) en een met veel doezeligheid (0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Schaduwen kunnen tekst leesbaarder maken indien het contrast tussen de voorgrond en de achtergrond klein is. Hier is een voorbeeld van witte tekst tegen een bleke blauwe achtergrond, eerst zonder een schaduw en dan met een schaduw:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Zonder schaduw:
Met schaduw:
U kunt meerdere schaduwen toevoegen. Over het algemeen staat dat een beetje vreemd:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Maar met twee goed geplaatste donkere en lichte schaduwen, kan het effect bruikbaar zijn:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
Dit is een beetje gevaarlijk, zoals u kunt zien, indien uw browser 'tekst-schaduw' niet ondersteunt. In feite zijn de kleuren van de achtergrond en de tekst in dit voorbeeld bijna dezelfde (#CCCCCC en #D1D1D1), dus zonder de schaduwen is er nauwelijks enig contrast.
Het twee-schaduwvoorbeeld van de vorige versie kan zelfs verder worden uitgebreid. Met vier schaduwen kunnen aan letters een omtrek worden gegeven:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Het is geen perfecte omtrek en op dit moment (augustus 2005), is de discussie nog steeds gaande of CSS een afzonderlijk eigenschap (of misschien een waarde voor 'text-decoration') zou moeten hebben om betere omtrekken te maken.
Indien u een bedoezelde schaduw recht achter de tekst zet, d.w.z., met nul offset, wordt een gloed om de letters gecreëerd. Als de gloed van één enkele schaduw niet intens genoeg is, herhaal dezelfde schaduw dan een aantal keer.
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}