Skip links en inhoudsopgave

Laatst aangepast: .

Tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow)

Korte omschrijving

Tekst met schaduw zonder gebruik te maken van plaatjes of extra tekst. Alleen de css-eigenschap text-shadow wordt gebruikt. Hiermee is nog veel meer mogelijk dan alleen een gewone schaduw.

Omdat Internet Explorer 7, 8 en 9 text-shadow niet kennen, worden voor die browsers 'filters' gebruikt. Waarmee helaas veel minder mogelijk is.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Als je tot voor kort tekst met schaduw wilde gebruiken, moest je allerlei kunstgrepen toepassen. Je kon bijvoorbeeld 'n afbeelding gebruiken, die je iets naast de tekst zette. Maar dan moest je bij elke wijziging van de tekst 'n nieuwe afbeelding maken. Of je kon de tekst herhalen en dan over elkaar heen projecteren, maar daar werden gebruikers van bijvoorbeeld spraakbrowsers niet dol van blijdschap van, want die hoorden alles twee keer.

Op internet kun je een ongelooflijke hoeveelheid oplossingen vinden, ook met Flash, JavaScript, noem maar op. Alleen het aantal verschillende oplossingen geeft eigenlijk al aan dat geen enkele oplossing echt goed werkte. Zeker als je de lettergrootte gaat verandert of zoomt, werkt vrijwel geen enkele oplossing meer goed.

Schaduw bij tekst met behulp van css heeft een eigenaardige geschiedenis. Microsoft heeft het al in Internet Explorer 5.5 ingebouwd, maar niet volgens de standaard (die toen trouwens nog niet bestond voor text-shadow). Het is al opgenomen in css2, maar in 2.1 weer verwijderd, omdat geen enkele browser het had geïmplementeerd. Dit was kennelijk de aanleiding om het toch in te bouwen, want inmiddels ondersteunen - behalve Internet Explorer - alle browsers het via standaard-css. Het is dus in css3 weer opgenomen.

Het beleid van w3c, de club die de standaard bijhoudt voor css, met betrekking tot text-shadow doet denken aan het beleid van de PvdA met betrekking tot het onderzoek naar de mogelijke Nederlandse deelname aan de oorlog in Irak. Als iemand het me uit kan leggen: graag.

Firefox, Safari, Google Chrome en Opera ondersteunen allemaal text-shadow, zoals het volgens de standaard hoort te werken. In deze browsers kun je meerdere schaduwen opgeven in meerdere kleuren, die eventueel ook nog vervagen. De 'schaduwen' hoeven er dan ook helemaal niet als 'n schaduw uit te zien.

Internet Explorer had al langere tijd z'n eigen manier van schaduw aan 'n tekst toevoegen: 'n filter met de naam dropshadow. Dit heeft veel minder mogelijkheden dan text-shadow, maar 'n simpele gewone schaduw is er goed mee te maken, zeker in combinatie met het filter blur, ook alleen in Internet Explorer te gebruiken.

Omdat Internet Explorer 7, 8 en 9 text-shadow niet kennen, wordt dit gewoon genegeerd door deze browsers. Internet Explorer 10 gaat text-shadow ondersteunen, wat het leven 'n heel stuk simpeler en aangenamer maakt.

Los van een gewone schaduw biedt text-shadow nieuwe mogelijkheden. Het is geen enkel probleem om meerdere schaduwen op te geven. Dat is bij meervoudige en chaotische schaduw gedaan. De eerst opgegeven schaduw ligt bovenop, is dus altijd zichtbaar, de laatst opgegeven ligt onderop.

Met de eerste waarde geef je de verplaatsing in horizontale richting aan. Positief is naar rechts, negatief naar links.

De tweede waarde geeft de verplaatsing in verticale richting aan. Positief is naar onder, negatief naar boven.

Een eventuele derde waarde geeft de lengte aan, waarover de schaduw vervaagt.

Tenslotte wordt een kleur opgegeven. Als je geen kleur opgeeft, gebruiken Opera en Firefox de tekstkleur, maar Google Chrome en Safari laten dan helemaal geen schaduw zien.

Dit voorbeeld valt in twee delen uiteen: een voor alle échte browsers, en een voor Internet Explorer 7, 8 en 9, die door Microsoft abusievelijk ook browser worden genoemd. Vanwege de verschillen tussen deze twee groepen zijn twee afbeeldingen van elk effect gemaakt.

In de eerste kolom staan de afbeeldingen, zoals ze volgens de standaard horen te zijn.

In de tweede kolom staat, wat Internet Explorer 7, 8 en 9 laten zien.

In de derde kolom tenslotte staat wat de browser, waarmee je 't voorbeeld bekijkt, er live van bakt. De derde kolom is dus de kolom, waar het om draait: hierin wordt de schaduw daadwerkelijk aangemaakt door de browser zelf.

Omdat Internet Explorer 7, 8 en 9 totaal andere css nodig hebben dan andere browsers, moet je alle css twee keer maken. Bovendien zit er ook nog verschil tussen Internet Explorer 7 aan de ene kant, en Internet Explorer 8 en 9 aan de andere kant.

Bij Internet Explorer 7 moet hasLayout aanstaan. 'n Beknopte uitleg daarover staat in de uitleg bij Filters werken in... Bij Internet Explorer 8 en later bestaat dat hele hasLayout gelukkig niet meer, wat 'n volstrekt overbodig onding was dat.

Bij beide moeten dropshadow en blur in een blok-element staan, anders werken ze niet. Maar tekst is geen blok-element. Om te laten zien hoe je dit kunt oplossen, heb ik daarom in de voorbeelden de tekst in een span, een inline-element, gezet. Die span kun je namelijk in een blok-element veranderen. (Er zijn nog andere redenen om de tekst in een span te zetten, die worden bij de Beschrijving van de code vermeld.)

Omdat dropshadow en blur maar heel beperkte mogelijkheden hebben, ziet het er in Internet Explorer 7, 8 en 9 vaak wat anders uit, en soms totaal anders. Sommige dingen zijn helemaal niet na te maken. Gewone simpele schaduwen zien er wel ongeveer hetzelfde uit als in echte browsers.

(Tip: als je je relatie met 'n sitebouwer moeiteloos wilt beëindigen, fluister dan in zijn of haar oor: "Lief Internet Explorertje van me.")

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html> <html lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Ik gebruik deze lay-out alleen, omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: black;

Tekstkleur zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

p

Alle paragrafen. Alle afbeeldingen en teksten staan in een eigen paragraaf, zodat ze goed over het venster van de browser zijn te verdelen.

float: left;

Zo hoog mogelijk neerzetten en dan zo ver mogelijk naar links.

Een <p> is een blok-element en begint normaal genomen op een nieuwe regel. Door ze naar links te floaten, komen ze naast elkaar te staan. Omdat elke paragraaf ongeveer 'n derde van het venster van de browser vult, komen er drie naast elkaar te staan, zodat ik drie kolommen krijg.

width: 31%;

Een blok-element vult normaal genomen de volle breedte van z'n ouder. Als er geen ouder is, zoals hier, vult hij de volle breedte van het venster van de browser.

Als je 'n blok-element float, zoals met deze paragrafen is gedaan, gebeurt dit echter niet. De breedte wordt dan niet meer dan nodig is om de inhoud van het blok-element weer te kunnen geven. Alle blok-elementen, en dus de inhoud daarvan, komen tegen elkaar aan te staan.

Door de <p>'s 31% breed te maken vullen ze elk ongeveer een derde van het venster van de browser, zodat er precies drie naast elkaar passen. Ik kan geen 33,3% nemen omdat er nog wat dingen als marge bij de breedte komen. Maar voor het oog staan ze zo goed genoeg verdeeld.

Bij een breedte is het percentage altijd ten opzichte van de ouder, dat is hier het venster van de browser.

height: 60px;

Een blok-element krijgt automatisch precies de hoogte die nodig is om de inhoud weer te kunnen geven. Dat werkt hier niet goed, omdat er drie naast elkaar moeten komen. Als die niet even hoog zijn, werkt het floaten niet goed.

Op de afbeelding hiernaast kun je zien, wat er gebeurt. In de laatste kolom is de bovenste paragraaf iets lager dan de andere. Daardoor is er onder die paragraaf nog 'n heel klein beetje ruimte over.

De eerste paragraaf op de volgende regel, dat is de eerste met Schaduw ↓, wordt eerst zo hoog mogelijk neergezet. En past dan nog net in de kleine ruimte onder de bovenste paragraaf. Als ik hem daarna zover mogelijk naar links float, stoot hij tegen de middelste paragraaf aan, want die is net iets lager. En blijft dan dus keurig tegen de middelste paragraaf met Schaduw ↑ aan staan.

Omdat de bovenste regel nu vol is, komen volgende paragrafen gewoon weer 'n regel lager.

Dit is natuurlijk niet de bedoeling. Door de paragrafen allemaal even hoog te maken, wordt elke regel gewoon helemaal gevuld. Als ik nu de eerste paragraaf met Schaduw ↓ zo hoog mogelijk zet en dan zover mogelijk naar links float, stoot hij niet tegen de middelste paragraaf aan, want alle paragrafen zijn even hoog: er steekt er geen enkele naar onder toe uit.

margin: 10px 1%;

Omdat geen waarde voor onder en links is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 10px 1% 10px 1% in de volgorde boven - rechts - onder - links.

Boven en onder 10 px marge, dit zorgt voor wat afstand tussen de diverse paragrafen, en dus tussen de inhoud daarvan.

Links en rechts van elke paragraaf 1 % marge, dat is dus samen 6%. Bij een breedte is het percentage altijd ten opzichte van de ouder, dat is hier het venster van de browser.

De paragrafen hadden elk een breedte van 31% van het venster van de browser. In totaal wordt de breedte van paragrafen en marges dus 1 + 31 + 1 + 1 + 31 + 1 + 1 + 31 + 1 = 99%. Dit vult vrijwel het hele venster van de browser, voor het oog staat het netjes gelijkmatig verdeeld. (Die ene procent die nog over is, kan ik gebruiken voor 'n border.)

En omdat de breedte in procenten is opgegeven, staat alles altijd netjes verdeeld, ongeacht de breedte van het venster van de browser.

border: black solid 1px;

Zwart randje rondom de paragrafen. Dit past nog net bij de 99% breedte van het venster van de browser, die paragrafen en marges al hadden.

background: white;

Achtergrond wit.

p#kop

De paragraaf met id="kop". Dit is de paragraaf waarin de opschriftjes boven de kolommen staan. Ik heb hierboven bij p voor alle paragrafen 'n aantal dingen ingesteld. Maar deze <p> heeft andere instellingen nodig. Die geef ik hier op.

width: 100%;

Een blok-element vult normaal genomen de volle breedte van z'n ouder. Als er geen ouder is, zoals hier, vult hij de volle breedte van het venster van de browser. Als je 'n blok-element float, zoals met deze paragraaf bij p is gedaan, gebeurt dit echter niet. De breedte wordt dan niet meer dan nodig is om de inhoud van het blok-element weer te kunnen geven. Daarom heb ik bij p alle paragrafen 31% breed gemaakt, zodat ik drie kolommen krijg.

Maar deze paragraaf moet even breed worden als het venster van de browser. Daarom geef ik hier 'n breedte van 100% op.

Een breedte in procenten is altijd ten opzichte van de ouder van het blok-element, dat is hier het venster van de browser, dus deze <p> vult altijd de volle breedte van het venster van de browser.

height: 35px;

Bij p heb ik alle paragrafen een hoogte van 60 px gegeven. Voor deze paragraaf is 35 px hoog zat.

border: 0;

Het hierboven bij p aan alle paragrafen gegeven randje is hier niet welkom.

margin: 5px 0;

Bij p heb ik alle paragrafen een bepaalde marge gegeven. De paragraaf moet een andere marge hebben.

Omdat geen waarde voor onder en links is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 5px 0 5px 0 in de volgorde boven - rechts - onder - links. Boven en onder 5 px marge, links en rechts niets.

background: #ff9;

Hierboven bij p is een witte achtergrondkleur aan alle paragrafen gegeven, maar in deze paragraaf met kopjes wil ik dezelfde achtergrondkleur als die van de pagina.

span

Alle spans.

Alle tekst die schaduw moet krijgen, staat binnen span. Dat is alleen maar nodig voor de technische hoogstandjes Internet Explorer 7, 8 en 9.

text-shadow geeft alleen schaduw aan tekst. Het voor Internet Explorer 7, 8 en 9 gebruikte filter geeft echter schaduw aan álles binnen een element. Dus ook aan de border rondom de paragraaf.

Bovendien negeert het filter de opgegeven kleuren, als ik het filter voor de schaduw toepas op de <p>. Als ik de tekst echter binnen een span zet en het filter daarop toepas, wordt de kleur plotsklaps wel gebruikt.

font-size: 2.5em;

Grote letter zodat beter zichtbaar is, hoe de schaduw en dergelijke eruit zien. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

p#kop span

De spans binnen de paragraaf met id="kop". Dat zijn de spans waarbinnen de kopjes boven de kolommen staan.

float: left;

Zet elke span zo hoog mogelijk en daarna zover mogelijk naar links.

Een span is een inline-element, dus de spans zouden hoe dan ook gewoon achter elkaar komen te staan en niet op een nieuwe regel beginnen, zoals een blok-element. Toch float ik ze hier. Als je 'n inline-element float, verandert het in 'n (ietwat apart) blok-element, waardoor ik eigenschappen als breedte kan gebruiken.

width: 31%; margin: 10px 1%;

Elke span bevat een kopje, dat bij een bepaalde kolom hoort.

Omdat bij marge geen waarde voor onder en links is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 10px 1% 10px 1% in de volgorde boven - rechts - onder - links. De marge van 10 px boven en onder zorgt voor een nette plaatsing in verticale richting.

Als ik de breedte en marge van elke span even groot maak als die van de bijbehorende kolom, staan de spans en dus de daarin zittende kopjes altijd boven de bijbehorende kolom, ongeacht de breedte van het venster van de browser, lettergrootte, enz.

Bij p heb ik een breedte van 31% opgegeven en een marge links en rechts van 1%. Als ik dus diezelfde breedte en marge opgeef aan de spans, staan die altijd boven de juiste kolom.

Eigenlijk jok ik een beetje. Bij de <p>'s is nog 'n border van 1 px breed opgegeven. Die mist hier. Dus de meest rechtse span staat maar liefst 5 hele pixels te veel naar links (de meest rechtse marge telt niet mee, want die staat achter de laatste span).

Dat is zo weinig, dat je het eigenlijk niet ziet.

Als je toch 'n verschil ziet en je daaraan ergert, is er maar één oplossing: meld je onmiddellijk aan bij de omscholing en wordt mierentemmer. (Ik bedoel wat anders, maar ik wil eventuele tere kinderzieltjes niet traumatiseren met obscure vormen van lichamelijke communicatie tussen mieren en mensen.)

text-align: center;

Tekst horizontaal in het midden van de span zetten. En omdat elke span even breed is als de bijbehorende kolom, staan ze ook automatisch midden boven de kolom.

font-size: 0.9em;

Bij span heb ik een lettergrootte opgeven van 2.5 em. Dat is natuurlijk veel te groot voor de kopjes boven de kolommen. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

p#eerste

De paragraaf met id="eerste". De eerste paragraaf na de kopjes boven de kolommen.

clear: left;

De spans met de kopjes boven de kolommen zijn naar links gefloat. Bij 'n bepaalde venstergrootte en/of lettergrootte kan Internet Explorer 7 de <p> met het eerste plaatje achter de kopjes zetten. Door te clearen voorkom je dat. En andere browsers hebben er geen last van.

span#op

De span met id="op". De span waarbinnen de tekst met de schaduw aan de linkerbovenkant staat.

text-shadow: -3px -3px 4px #aaa;

De eerste waarde regelt de horizontale verplaatsing. Omdat het negatief is, komt de schaduw 3 px naar links te staan. Bij een positieve waarde zou de schaduw rechts komen te staan.

De tweede waarde regelt de verticale verplaatsing. Omdat het negatief is, komt de schaduw 3 px naar boven te staan. Bij een positieve waarde zou de schaduw onder komen te staan.

De derde waarde is de lengte waarover de schaduw vervaagt. Als je hier niets invult, vervaagt de schaduw niet.

Als laatste wordt een kleur ingevuld. Als je geen kleur invult, gebruiken Firefox en Opera de kleur van de tekst. Bij Google Chrome en Safari zie je echter helemaal geen schaduw, als je geen kleur opgeeft.

span#neer

De span met id="neer". De span waarbinnen de tekst met de blauwe schaduw aan de rechteronderkant staat.

text-shadow: 2px 3px 4px blue;

Voor uitleg zie span#op, alleen de waarden zijn anders.

img#meer

De afbeelding met id="meer".

position: relative; top: -7px;

Door de afbeelding een relatieve positie te geven, kan ik hem een beetje verplaatsen: 7 px naar boven. De afbeelding staat in een <p>, die een zwart kader heeft. De schaduw valt 'n heel klein stukje over dat kader heen. Daarom heb ik de schermafdruk iets groter gemaakt en het kader aan de bovenkant meegenomen.

Maar dan moet ik wel de afbeelding 'n klein stukje omhoog plaatsen, omdat de zwarte lijn van de afbeelding anders niet aansluit op het zwarte kader van de <p>.

span#meervoudig

De span met id="meervoudig". De span waarbinnen de van rood naar groen verlopende 'schaduw' staat.

Deze 'schaduw' werd tot voor kort behoorlijk afwijkend weergegeven door verschillende browsers, maar inmiddels wordt hij overal op dezelfde manier getoond.

text-shadow: 2px -2px 7px red, 4px -4px 6px blue, 6px -6px 5px yellow, 8px -8px 6px green, 10px -10px 7px #999, 12px -12px 16px #f60;

Dit is zes keer 'n verschillende schaduw. Op dit moment is dit het maximale aantal schaduwen, dat alle browsers probleemloos aan kunnen. Bij meer dan zes schaduwen kunnen bij Opera schaduwen gaan wegvallen, en bij nog meer schaduwen crashen sommige browsers, als ik de verhalen mag geloven. Maar mogelijk ligt het maximum inmiddels hoger.

De opbouw is hetzelfde als bij span#op, maar dan zes keer achter elkaar met tussen elke schaduw een komma. Via uitproberen heb ik dit brouwsel verkregen. Absoluut geen hogere schilderkunst, maar 't laat wel zien wat mogelijk is.

Bij meerdere schaduwen komt de eerste altijd bovenop te liggen, en de laatste onderop. De rode schaduw is dus altijd het best zichtbaar.

img#chaos

De afbeelding met id="chaos".

position: relative; left: -10px;

Precies hetzelfde verhaal als bij img#meer, maar nu moet de afbeelding 10 px naar links worden verplaatst, omdat het lijntje aan de linkerkant van de afbeelding staat.

span#chaotisch

De span met id="chaotisch". Dit is de span waarbinnen het woord 'Chaotisch' staat.

Deze 'schaduw' werd tot voor komt behoorlijk afwijkend weergegeven door verschillende browsers, maar inmiddels wordt hij overal op dezelfde manier getoond.

text-shadow: 4px -4px 1px red, -4px 12px 1px blue, 8px 8px 1px green, 12px 3px 10px black;

Zelfde verhaal als bij span#meervoudig, maar nu met vier reeksen. Door de afstanden gewoon groter te nemen krijg je een effect, dat gegarandeerd al je bezoekers wegjaagt. Maar 't laat wel weer zien wat mogelijk is.

img#watje, img#hoog

Verhoogde letters

De afbeeldingen met id="watje" en id="hoog".

Toevallig hebben deze afbeeldingen beide dezelfde correctie nodig, dus heb ik ze hier bij elkaar gezet.

position: relative; left: -4px;

Precies hetzelfde verhaal als bij img#chaos, maar nu moet de afbeelding 4 px naar links worden verplaatst.

span#soft

De span met id="soft". De span waar 'Voor watjes' in staat.

text-shadow: 0 0 12px red;

De eerste waarde geeft de horizontale verschuiving van de schaduw aan, het tweede de verticale. Omdat deze beide 0 zijn, wordt de schaduw niet verplaatst en komt dus bovenop de tekst te staan.

Door de schaduw over 12 px te vervagen, komt er aan alle kanten 'n soort roze schijnsel om de tekst.

Via uitproberen bleek dat je de kleur 'n stuk donkerder moet nemen dan die van de tekst, anders zie je de 'schaduw' nauwelijks.

Hoewel de eerste twee waarden 0 zijn, kan ik die toch niet weglaten. De plaats van de waarde bepaalt de betekenis. Als ik de eerste twee waardes hier weg zou laten, wordt 12 de eerste waarde, en bepaalt daardoor de horizontale verplaatsing. De schaduw wordt dan horizontaal 12 px naar rechts verplaatst.

color: #fcc;

Roze tekstkleur.

span#verhoogd

De span met id="verhoogd". De span waar 'Verhoogd' in staat.

color: white;

Tekst wit maken. De achtergrond is bij p ook wit gemaakt, dus nu is de tekst volledig onzichtbaar. Hij wordt alleen zichtbaar, door er een schaduw aan te geven. Dat is niet zonder risico's, want hierdoor kan in oudere browsers de tekst volledig onzichtbaar worden. Je moet dus nooit belangrijke info op deze manier weergeven. Meer hierover bij Firefox ondersteunt...

text-shadow: -2px -1px black;

De eerste waarde bepaalt de horizontale verplaatsing van de schaduw. Omdat die negatief is, wordt naar links verplaatst.

De tweede waarde bepaalt de verticale verplaatsing van de schaduw. Omdat die negatief is, wordt naar boven verplaatst.

De tekst zelf is onzichtbaar. Door nu 2px links ervan en 1px erboven 'n zwarte schaduw neer te zetten, die niet vervaagt, geeft dit een illusie van een verhoogde letter.

img#doorzichtig

De afbeelding met id="doorzichtig".

Om de doorzichtige schaduw beter zichtbaar te maken, is geen tekst gebruikt. De zwarte rechthoekige blokjes worden verkregen door de code &#x2580; te gebruiken. Dit is een zogenaamde utf-8-code, waar je meer over kunt lezen in utf-8-codes en utf-8-codes en entiteiten.

position: relative; left: -2px;

Precies hetzelfde verhaal als bij img#chaos, maar nu moet de afbeelding 2 px naar links worden verplaatst.

p#glazig

De paragraaf met id="glazig". Dit is de paragraaf, waarbinnen de doorzichtige schaduw staat.

background: url(070-pics/bg.gif);

Achtergrond in de paragraaf zetten. Hierdoor is beter te zien, dat de schaduw doorzichtig is.

p#glazig span

De spans binnen de paragraaf met id="glazig". Dit zijn er twee. Binnen de eerste staat de schaduw, binnen de tweede staat het woord 'Doorzichtig'.

Ik gebruik geen id of class voor de span, dus wat hier staat geldt voor beide spans. Voor de tweede span komt hier gelijk onder andere css.

text-shadow: 18px 15px rgba(0,0,0,0.5);

De eerste waarde geeft de verplaatsing in horizontale richting aan. Omdat het positief is, komt de schaduw 18 px naar rechts te staan.

De tweede waarde geeft de verplaatsing in verticale richting aan. Omdat het positief is, komt de schaduw 15 px naar onder te staan.

Met rgba() geef ik de kleur aan. Met het eerste getal rood, met het tweede groen en met het derde blauw. De waarde van de getallen kan 0 t/m 255 zijn. Omdat ze alle drie 0 zijn, levert dit zwart op.

Het vierde getal geeft de doorzichtigheid aan. Dit loopt van 0 tot 1. 0.5 is dus half doorzichtig. Daardoor zie je door de schaduw heen de achtergrond.

p#glazig span + span

De span die gelijk op een andere span volgt binnen de paragraaf met id="glazig". Omdat er maar twee spans binnen deze paragraaf staan, kan dit alleen maar gelden voor de tweede span. Dat is de span waar 'Doorzichtig' in staat.

float: right;

Zover mogelijk naar rechts zetten. Omdat de breedte van de paragraaf waar deze span in staat bij p is opgegeven in procenten, weet ik niet zeker hoe breed deze paragraaf is. Door de tekst zover mogelijk naar rechts te zetten, staat hij altijd goed.

Een span is een inline-element. Door hem te floaten verandert hij in een soort blok-element, waardoor ik eigenschappen als hoogte kan gebruiken.

height: 60px;

Even hoog maken als de paragraaf waar hij in staat.

font-size: 1em;

Bij span is de lettergrootte op 2.5 em gezet. Dat is veel te groot, dus kleiner maken. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

line-height: 60px;

Tekst wordt altijd halverwege de regelhoogte gezet. Door de regelhoogte even hoog te maken als de span zelf, zal de tekst altijd halverwege de span komen te staan. Oftewel: verticaal gecentreerd.

background: white;

Achtergrond wit maken. De span wordt automatisch precies breed genoeg om de tekst erin weer te kunnen geven. Bij een grotere letter wordt de span breder. Hierdoor is de witte achtergrond van de span ook altijd precies breed genoeg.

De span is even hoog als de paragraaf, dus de witte achtergrond van de span is dat ook.

Omdat de witte achtergrond over de bruine achtergrond van de <p> heen staat, sluit de witte achtergrond altijd naadloos op de bruine achtergrond van de paragraaf aan, ongeacht de lettergrootte.

text-shadow: none;

Bij p#glazig span heb ik aan alle spans binnen p#glazig een tekst-schaduw gegeven. Dat geldt dus ook voor deze span. Bij deze tweede span is die schaduw niet welkom, dus weg ermee.

Speciaal voor Internet Explorer 7, 8 en 9

<!--[if (IE 7) | (IE 8) | (IE 9)> <style type="text/css"> span#op {display: block; height: 60px; filter: dropshadow(color=#eeeeee, offX=-3, offY=-3) blur(direction=315, strength=4);} span#neer {display: block; height: 60px; filter: dropshadow(color=blue, offX=2, offY=3) blur(direction=135, strength=4);} span#meervoudig {display: block; height: 60px; filter: dropshadow(color=yellow, offX=2, offY=-2) blur(direction=45, strength=10);} span#chaotisch {display: block; height: 60px; filter: dropshadow(color=blue, offX=-4, offY=12);} span#soft {font-weight: bold;} span#verhoogd {display: block; height: 60px; filter: dropshadow(color=black, offX=-2, offY=-1;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 7, 8 en 9 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if (IE 7) | (IE 8) | (IE 9)]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 7, 8 en 9 in. De css voor Internet Explorer 7, 8 en 9 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 7) | (IE 8) | (IE 9)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Ik noem specifiek de versies van Internet Explorer en niet gewoon alleen if IE. Het is namelijk 'n belangrijke hobby van Microsoft om bij 'n nieuwe versie van Internet Explorer 'n aantal dingen fors te veranderen, zodat je behoorlijk in de problemen komt, als je geen versie hebt genoemd.

In plaats van één stylesheet voor Internet Explorer 7, 8 en 9 kun je er ook twee maken. Het begin wordt dan voor bijvoorbeeld Internet Explorer 7: <!--[if IE 7]>, het laatste deel blijft hetzelfde. Haakjes zijn niet nodig, want de browser kan nu niet 'in de war' raken over wat bij wat hoort.

Aparte stylesheets zijn sowieso verstandig, omdat de css voor de verschillende versies van Internet Explorer nogal kan verschillen. En dat kan mekaar behoorlijk dwarszitten.

span#op

De span met id="op". Dat is de span waarin de schaduw linksboven staat.

display: block;

Internet Explorer 7, 8 en 9 kennen geen text-shadow. Hier moeten filters, een idee van Microsoft, worden gebruikt. Filters werken echter alleen in blok-elementen, en 'n span is van zichzelf 'n inline-element.

In dit voorbeeld levert dit geen problemen op, maar dat kan prima wel gebeuren. 'n Blok-element begint op 'n nieuwe regel, en dat is niet altijd gewenst. Mogelijk kan het helpen in zo'n geval de span te floaten of de span met 'n negatieve marge op z'n plaats te zetten.

height: 60px;

Dit is alleen nodig voor Internet Explorer 7, maar 8 en 9 hebben er geen last van, dus zet ik het maar hier neer. Dit komt namelijk vijf keer voor, en anders zou ik voor Internet Explorer 7 vijf selectors extra moeten gebruiken.

Filters werken in Internet Explorer 7 alleen maar als hasLayout aan staat.

Pardon?

hasLayout is 'n bedenksel van Microsoft. Als het aanstaat, is de weergave totaal anders, dan wanneer het uitstaat. Waarom dit ooit bedacht is, weet helemaal niemand. Inmiddels kennelijk ook niet meer bij Microsoft, want in versie 8 en later is dit weerzinwekkend sadistische bedenksel gelukkig verdwenen.

Maar goed, door 'n hoogte te geven wordt hasLayout aangezet. Je kunt dit kreng namelijk nog niet eens rechtstreeks aan- of uitzetten, maar alleen door 'n bepaalde eigenschap te gebruiken. Die eigenschappen zijn ook nog 'ns deels verschillend voor de verschillende versies van Internet Explorer.

filter: dropshadow(color=#eeeeee, offX=-3, offY=-3) blur(direction=315, strength=4);

Dit zijn feitelijk twee filters: dropshadow en blur.

Bij dropshadow wordt een kleur opgegeven. Vreemd genoeg werkt de verkorte notatie (in dit geval #eee) niet. Namen van kleuren worden wel geaccepteerd.

offX is de verplaatsing in horizontale richting, offY in verticale richting. Het getal geeft de hoeveelheid pixels aan. De schaduw wordt dus 3 px naar boven en 3 px naar links gezet.

De vierde waarde van text-shadow, die aangeeft over welke lengte de schaduw moet vervagen, kent dropshadow niet. Daarvoor gebruiken we blur.

direction geeft de richting aan waarin wordt vervaagd, strength geeft ongeveer de lengte aan.

De richting wordt uitgedrukt in graden. 0 is omhoog, 45 is rechtsboven, 90 is rechts, enz., steeds met 45 omhoog.

Met een combinatie van dropshadow en blur is een gewone text-shadow dus redelijk goed na te maken in Internet Explorer 7, 8 en 9.

span#neer {display: block; height: 60px; filter: dropshadow(color=blue, offX=2, offY=3) blur(direction=135, strength=4);}

De span met id="neer". In deze span staat de tekst met de blauwe schaduw rechtsonder.

Zelfde als bij span#op, maar met andere waarden.

span#meervoudig {display: block; height: 60px; filter: dropshadow(color=yellow, offX=2, offY=-2) blur(direction=45, strength=10);}

De span met id="meervoudig".

Bij andere browsers staan hier zes 'schaduwen', waardoor een kleur ontstaat die verloopt. Dat kan niet bij Internet Explorer 7, 8 en 9, dus hier staat maar één kleur, die het zo goed mogelijk imiteert.

Voor de beschrijving van de code zie span#op.

span#chaotisch {display: block; height: 60px; filter: dropshadow(color=blue, offX=-4, offY=12);}

De span met id="chaotisch".

Bij andere browsers wordt hier de tekst herhaald in andere kleuren. Dat kan bij Internet Explorer 7, 8 en 9 niet, dus hier staat maar één kleur. Het lijkt dus in de verste verte niet op wat échte browsers weergeven.

Voor de beschrijving van de code zie span#op.

span#soft {font-weight: bold;}

De span met id="soft".

Andere browsers zetten 'n soort aureool om de tekst heen. Dat kunnen Internet Explorer 7, 8 en 9 niet, dus het enige wat ik hier doe is de tekst vet maken. Het is me niet gelukt iets te maken wat zelfs maar in de buurt komt van wat de andere browsers laten zien.

span#verhoogd

De span met id="verhoogd". De span waar 'Verhoogd' in staat.

display: block; height: 60px; filter: dropshadow(color=black, offX=-2, offY=-1;}

In de algemene css is de tekstkleur wit gemaakt, net als de achtergrond. Deze tekst is alleen zichtbaar via de schaduw, de tekst zelf is onzichtbaar. blur wordt niet gebruikt.

Voor de beschrijving van de code zie span#op.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> p#glazig span + span {margin-top: -50px;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 7, 8 en 9.

p#glazig span + span

De span die gelijk op een andere span volgt binnen de paragraaf met id="glazig". Omdat er maar twee spans binnen deze paragraaf staan, kan dit alleen maar gelden voor de tweede span. Dat is de span waar 'Doorzichtig' in staat.

margin-top: -50px;

Om een of andere reden staat deze span te laag. Met enig speurwerk is de oorzaak waarschijnlijk wel te vinden, maar dit lost het ook afdoende op: gewoon 50 px naar boven verplaatsen.

De code aanpassen aan je eigen ontwerp

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 6 februari 2012.

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Er is getest met behulp van muis en toetsenbord.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

18 september 2009:

Nieuw opgenomen.

8 november 2010

6 februari 2012

Bekende problemen

Zoomen en grote letters

Bij inzoomen (vergroten) en grotere lettergroottes passen de woorden niet meer binnen de witte achtergronden. Losse woorden komen op verschillende regels te staan. Op een scherm van 1024 x 768 speelt dit vanaf 140%, op een scherm van 1280 x 1024 vanaf 170 tot 180%.

Dit heeft helemaal niets te maken met de schaduwen en zo. De oorzaak is dat ik hoe dan ook drie kolommen naast elkaar wilde hebben, en tja, dat past gewoon niet als je heel sterk gaat vergroten.

Oudere browsers

Browsers die wel css gebruiken, maar text-shadow nog niet kennen, kunnen in bepaalde omstandigheden tekst helemaal onzichtbaar maken. Zie verder bij Firefox ondersteunt...

Valideren

Er zit een bug in de validator voor css3, waardoor je bij een combinatie van text-shadow en rgba() een foutmelding krijgt over een ongeldige waarde. Dit werkt gewoon, het is alleen de validator die protesteert. Dit is allemaal nog vrij nieuw, en ik neem aan dat deze bug wel snel zal verdwijnen.

Printen

De meer ingewikkelde 'schaduwen' gaan redelijk de mist in bij printen. Als de pagina printbaar moet zijn, zou ik dus 'n stylesheet voor de printer maken, waarin hooguit de 'gewone' schaduwen aan blijven staan.

Safari en Google Chrome

Als geen kleur wordt opgegeven, wordt in Firefox en Opera de tekstkleur gebruikt. In Google Chrome en Safari wordt echter helemaal geen schaduw weergegeven, als je geen kleur opgeeft.

Internet Explorer 7, 8 en 9