Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik

Web Style Sheets CSS tips & trucs

Zie ook de index van alle tips.

Op deze pagina:

Schaduwtekst

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:

The noak and the barcicle

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

Bedoezelde schaduwtekst

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}

“What do you say?” said the UK

In order to see more clearly

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}

Zonder schaduw:

What is in it for me?

Met schaduw:

With a shovel and some oranges

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}

I wish wish wish…

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}

I, Augustus (you know who)

That's extra, of course

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}

Are you feeling red?

A cat, an apple, etcetera

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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2014 W3C®

Geschreven 4 augustus 2005;
laatste update za 20 dec 2014 18:46:51 UTC

Talen

Over de vertalingen