Web Style Sheets
CSS TIPS & TRUCS

SCHADUW TEKST

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:

(Vanaf augustus 2005 ondersteunen nog niet alle browsers ‘text-shadow’. Het bovenstaande zou in ieder geval in Safari en Konqueror moeten werken.)

BEDOEZELDE SCHADUW TEKST

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}

LEESBARE WITTE TEKST

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}

MEERDERE SCHADUWEN

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 #333}

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.

LETTERS MET OMTREK TEKENEN

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.

NEON GLOED

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}