Skip links en inhoudsopgave

Laatst aangepast: .

Schaduwen zonder gebruik van afbeeldingen (box-shadow)

Korte omschrijving

Schaduwen zonder gebruik van afbeeldingen, dubbele divs, en dergelijke, met gebruik van de css3-eigenschap box-shadow. In Internet Explorer 7 en 8 wordt dit zo goed mogelijk geïmiteerd.

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

Het maken van een schaduw-effect rondom bijvoorbeeld een afbeelding of menu is veel moeilijker dan je zou denken. Aan een combinatie van schaduw en ronde hoeken kun je beter helemaal niet beginnen: herstellingsoorden zitten vol overspannen sitebouwers die dit geprobeerd hebben.

Nog ingewikkelder wordt het, als je ook rekening wilt houden met andere lettergroottes en zoomen. Het overgrote deel van de technieken die je op internet kunt vinden, stort als een kaartenhuis in elkaar op het moment dat je de lettergrootte verandert of zoomt.

Tot css3 verscheen, kon je alleen schaduw bereiken door gebruik te maken van afbeeldingen, extra divs, en dergelijke. css3 heeft de eigenschap box-shadow, waarmee je op uiterst simpele wijze een element van een schaduw kunt voorzien. En zelfs van veel meer dan een enkele simpele schaduw.

Als je box-shadow combineert met een andere css3-eigenschap, border-radius voor ronde hoeken, zijn de mogelijkheden vrijwel eindeloos.

En omdat dit in de browser zelf is ingebouwd, gaat het ook goed bij andere lettergroottes en zoomen. Tot nu toe moest elke sitebouwer dit zelf oplossen, maar het is natuurlijk veel handiger als de browser dit zelf doet.

Naast het maken van een simpele schaduw heeft box-shadow ook de mogelijkheid om meerdere schaduwen weer te geven. Het tweede voorbeeld heeft een grijze én een zwarte schaduw. En het laatste voorbeeld, de veelkleurige cirkel, is opgebouwd uit zes schaduwen, gecombineerd met border-radius. Bij gebruik van meerdere schaduwen komt de eerst opgegeven schaduw bovenaan te staan, de tweede daaronder, enz. De eerste schaduw is dus altijd volledig zichtbaar.

Met de eerste twee getallen geef je de plaats en de breedte van de schaduw aan. Als het eerste getal positief is, komt de schaduw rechts van het element te staan. Als het negatief is, komt de schaduw links van het element te staan.

Als het tweede getal positief is, staat de schaduw beneden het element, als het positief is erboven.

Een eventueel derde getal geeft de blur aan: over de afstand van dit getal vervaagt de schaduw langzaam. Dit getal mag niet negatief zijn.

Een eventueel vierde getal zorgt voor een schaduw, die volledig rondom het element staat: aan alle kanten. De waarde van het getal bepaalt de breedte. Met behulp van de eerste twee getallen, kun je de schaduw eventueel meer aan de ene of meer aan de andere kant zetten. Je kunt de schaduw zelfs op een totaal andere plaats neerzetten dan het element, waar hij bij hoort.

Deze vier getallen werken met elkaar samen. Wat precies de juiste waarden zijn, is vaak een kwestie van even uitproberen.

Een andere totaal nieuwe mogelijkheid is het gebruik van inset, waardoor de schaduw niet buiten, maar bínnen het element komt te staan. Dit is gebruikt bij de blauwe knoppen. Bij de opstaande rand bij het voorbeeld gelijk boven de foto is een inset-schaduw gebruikt samen met een gewone schaduw.

Door gewoon wat te spelen, kun je de grappigste effecten ontdekken. In dit voorbeeld is steeds een 'gewone' kleur genomen, maar je kunt ook een doorzichtige kleur maken met rgba(), wat weer heel andere effecten geeft.

Helaas kennen Internet Explorer 7 en 8 box-shadow en border-radius niet. Om in die browsers een schaduw te krijgen, kan een zogenaamd filter worden gebruikt, een techniek die alleen in Internet Explorer werkt. Met dit filter kan maar één schaduw worden gemaakt, en het kent geen inset. Internet Explorer 9 ondersteunt box-shadow.

Voor de ronde hoeken wordt in Internet Explorer 7 en 8 gebruik gemaakt van een behavior. Dat is een constructie, die alleen in Internet Explorer werkt. Het importeert een bestand waarin JavaScript en Vector Markup Language (VML) staan. VML is een taal voor grafische constructies, die alleen in Internet Explorer werkt, het is geen standaard. Internet Explorer 9 ondersteunt gelukkig border-radius.

De lijst aan problemen die ronde hoeken en schaduwen in Internet Explorer 7 en 8 met zich meebrengen, is helaas omgekeerd evenredig aan de mogelijkheden. Lang niet alle dingen die mogelijk zijn met box-shadow en border-radius kun je in deze browsers reproduceren. Eigenlijk zijn alleen simpele, effen schaduwen zonder ronde hoeken goed te maken in Internet Explorer 7 en 8. Dit kunnen ook meerdere schaduwen zijn, als ze maar effen zijn en geen ronde hoeken hebben.

De problemen worden uitgebreider besproken bij Speciaal voor Internet Explorer 7 en 8.

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" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" 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> 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>

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 <style> 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

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

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.

In dit voorbeeld wordt geen em gebruikt bij lettergroottes, omdat het veranderen van de lettergrootte in Internet Explorer problemen geeft bij het gebruik van border-radius. Maar op de meeste pagina's zal niet alles binnen een element met ronde hoeken staan, dus dan is deze methode wel zinvol.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, 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 voorgrondkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

div

Alle divs.

Van elk voorbeeld is ook een afbeelding aanwezig, waarop te zien is hoe de schaduw er uit zou moeten zien. In elke div staat links een afbeelding en rechts de daarbij horende werkende code. Door deze twee aan twee in een div te zetten, kan ik het redelijk makkelijk over het venster van de browser verdelen.

clear: both;

Zet de inhoud van de divs op een nieuwe regel, ook als eerdere elementen zijn gefloat.

Een div is een blok-element en wordt daarom in principe altijd op een nieuwe regel gezet. Anders is dat voor de inhoud van een blok-element. Als eerdere elementen zijn gefloat, wordt in de regel de inhoud van het volgende blok-element achter of voor het gefloate element neergezet, voor zover er ruimte is.

Wat er zonder clearen gebeurt kun je op de afbeelding hiernaast zien. De puinhoop wordt nog 'ns extra groot, omdat in dit voorbeeld redelijk vaak negatieve marges en zo zijn gebruikt.

Omdat er naar links en naar rechts is gefloat, gebruik ik clear: both: clear naar beide zijden.

(Overigens gebruik ik altíjd both, tenzij dat echt niet de bedoeling is. Er is niets op tegen en soms komt er later 'n float naar de andere kant bij. Waarna je je soms ongelukkig zoekt naar de reden, waarom plotsklaps de lay-out overgaat tot deze verregaande virtuele vorm van het anarchisme van de daad.)

width: 690px;

Door de divs een breedte te geven, kan ik makkelijker floaten. De afbeeldingen komen allemaal tegen de linkerkant van de divs te staan, de voorbeelden rechts. En omdat alle divs even breed zijn, komen afbeeldingen en voorbeelden (ongeveer) op dezelfde plaats te staan. (Het waarom van het 'ongeveer' komt bij de afbeeldingen en voorbeelden afzonderlijk ter sprake.)

Omdat de divs een breedte hebben, kan ik ook horizontaal centreren met behulp van de methode gelijk hieronder.

margin: 0 auto;

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

Boven en onder geen marge, links en rechts auto, wat hier betekent: evenveel. Links en rechts is de marge dus altijd even groot, ongeacht de grootte van het venster van de browser, dus horizontaal staan de divs (en dus ook de inhoud daarvan) altijd in het midden.

padding-top: 30px;

Kleine afstand tussen de verschillende afbeeldingen en voorbeelden.

Waarom gebruik ik geen marge aan de bovenkant? Ik heb in de vorige regel toch al een marge gebruikt, dus als ik die verander van margin: 0 auto; in margin: 30px auto 0; dan heb ik toch ook 30 px afstand aan de bovenkant, en ik spaar een regel css uit.

In dit geval 'verdwijnen' de marges omdat er is gefloat. Ik ga hier niet verder op in, het is een van de ingewikkeldste dingen van css. Er zijn goede redenen voor dit gedrag, maar soms komt het wat onhandig uit.

Bij elementen met een clear werkt padding vrijwel altijd wel goed. Dat is de reden dat ik hier padding gebruik.

(Je kunt met kunstgrepen een marge ook wel werkend krijgen, maar dat is veel ingewikkelder. Bovendien moet je dan weer - het zal 'ns niet zo zijn - voor Internet Explorer ouder dan versie 8 allerlei correcties aan gaan brengen, want die grossieren in afwijkingen van de standaard en de meest exotische bugs bij floats en marges.)

p

Alle paragrafen. Een aantal instellingen is voor alle paragrafen hetzelfde, dus die kan ik hier in één keer opgeven. Dan hoef ik later bij elke paragraaf apart alleen nog maar de afwijkende instellingen op te geven.

In elke div staan in principe twee paragrafen. In de linker staat een afbeelding, in de rechter een werkend voorbeeld. In sommige divs staat nog 'n extra paragraaf, omdat Internet Explorer 7 en 8 die nodig hebben, maar eigenlijk zouden die niet nodig moeten zijn. In Internet Explorer 9 zíjn ze gelukkig ook niet meer nodig, want dat ondersteunt border-radius en box-shadow.

float: right;

Zet zo hoog mogelijk neer en dan zover mogelijk naar rechts. Hierdoor komen álle paragrafen dus netjes op onder elkaar uitgelijnd tegen de rechterkant van de divs te staan. De <p>'s die links moeten komen te staan, zet ik zo meteen op hun plaats.

(Bij sommige paragrafen zijn kleine correcties nodig, omdat sommige iets breder zijn dan andere. Dat doe ik verderop in de css bij de afzonderlijke paragrafen.)

width: 270px;

Alle paragrafen worden even breed. Voor zover een paragraaf een afwijkende breedte heeft, geef ik dat later op met css voor die specifieke paragraaf.

height: 60px;

Alle paragrafen worden even hoog. In de linkerparagrafen komen afbeeldingen, die vaak hoger zijn dan 60 px. Maar dat maakt niet uit. overflow staat standaard op visible, dus de afbeeldingen zullen gewoon zichtbaar zijn.

Voor zover een paragraaf een afwijkende hoogte heeft, geef ik dat later op met css voor die specifieke paragraaf.

margin: 0;

Standaard heeft een paragraaf een marge aan boven- en onderkant. Die wil ik hier niet hebben, ik regel het hier zelf.

padding: 3px;

Kleine afstand tussen de inhoud van de paragraaf en de border. Bij de afbeeldingen maakt dat niets uit, maar de rechterparagrafen met de voorbeelden hebben meestal een border en er staat tekst in. Dit voorkomt dat de tekst tegen de border aan komt te staan.

font-size: 0.8em;

Iets kleinere letter, zodat de tekst niet gelijk uit de paragraaf knalt als iemand de letters iets vergroot. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, 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 voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: white;

Achtergrondkleur wit. Als dat nodig is, verander ik dit later weer voor afzonderlijke paragrafen.

p:first-child

Alle paragrafen, maar alleen maar als ze het eerste kind van een ouder zijn.

Een van de aardige dingen van het maken van sites is, dat je de meest vreemde dingen uit kunt halen met kinderen (en ouders, grootouders, broers en zussen, enz.), zonder dat dat tot vreemde gezichten of juridische gevolgen leidt. Probeer op 'n school maar 'ns uit te leggen waarom je vindt dat alle eerstgeborenen links moeten zitten, en dat alle andere kinderen, de meester en de juf over ze heen mogen lopen alsof ze er niet zijn...

In dit geval zit in elke eerstgeborene een afbeelding: elke eerste paragraaf binnen een div bevat de afbeelding van een voorbeeld.

Hierboven bij p heb ik de instellingen opgegeven die voor álle <p>'s gemeenschappelijk zijn. Verderop komen de instellingen voor elke <p> afzonderlijk. Maar ook de <p>'s met afbeeldingen hebben nog een aantal instellingen gemeenschappelijk, en die geef ik hier op.

float: left;

Bij p heb ik opgegeven dat alle paragrafen naar rechts moeten floaten. Hier geef ik op, dat de paragrafen met een afbeelding zo hoog mogelijk en dan zover mogelijk naar links moeten worden neergezet. Ze komen daardoor netjes op één lijn onder elkaar tegen de linkerkant van de divs te staan. En dus de erin zittende afbeeldingen ook.

Omdat deze afbeeldingen niet allemaal even groot zijn, moet ik later voor een aantal afbeeldingen nog wel kleine correcties aanbrengen.

(De afbeeldingen kunnen niet allemaal even groot zijn. Sommige schaduwen zijn precies even groot als de paragraaf. Bij andere schaduwen staat een deel buiten de paragraaf. De bijbehorende afbeelding is daardoor noodgedwongen ook groter, anders zou het deel van de schaduw buiten de paragraaf er niet op passen.)

background: none;

Bij p heb ik een witte achtergrond aan alle <p>'s gegeven. Maar niet alle afbeeldingen in de rechterparagrafen vullen de paragraaf helemaal. Daardoor zou ik om sommige afbeeldingen grotere of kleinere delen van de witte achtergrond zien. Door de achtergrond weg te halen, voorkom ik die witte plekken.

div#kop p

De paragrafen binnen de div met id="kop". Hierbinnen staan de tekstjes, die boven beide kolommen staan.

height: auto; min-height: 3.6em;

Bij p heb ik alle paragrafen een hoogte van 60 px gegeven. Omdat hier in de linkerparagraaf vrij veel tekst staat, kan die hoogte bij 'n iets grotere letter al snel te klein worden. Daarom laat ik hier de hoogte automatisch aanpassen aan de inhoud.

Eén tekstregel is ongeveer 1.2 em hoog. In de linkerparagraaf staan, bij een normale lettergrootte, 3 regels tekst. Dat is samen dus ongeveer 3.6 em hoog.

In de rechterparagraaf staat minder tekst. Als ik nu de minimumhoogte 3.6 em maak, zal deze bij een normale lettergrootte toch even hoog zijn als de linkerparagraaf. Als ik de lettergrootte verklein, blijven beide paragrafen nog steeds even hoog door de minimumhoogte. Als ik de lettergrootte verhoog, wordt de linkerparagraaf wel hoger dan de rechter. Maar voor zo'n voorbeeld vind ik dit netjes genoeg: vrijwel altijd zullen beide paragrafen even hoog zijn.

border: black dashed 1px;

Zwarte streepjeslijn rondom de paragrafen.

background: #eee;

Achtergrond lichtgrijs.

div#kop p:first-child

De paragraaf die het eerste kind is van de div met id="kop". Dit is de paragraaf met tekst boven de linkerkolom.

margin-left: 4px;

Iets naar rechts verplaatsen. Deze paragraaf staat boven de plaatjes met voorbeelden. Deze plaatjes zijn vaak iets verplaatst, omdat ze niet allemaal even groot zijn. Met deze kleine correctie staat de paragraaf met tekst netjes uitgelijnd boven de afbeeldingen.

#img-rechtsonder, #img-spread-inset

De elementen met id="rechtsonder" en id="img-spread-inset".

De eerste selector hoort bij de bovenste afbeelding met de zwarte schaduw rechtsonder, de tweede selector hoort bij de brede blauwe knop. Beide hebben toevallig dezelfde correctie nodig.

margin: -3px 0 0 1px;

Afbeeldingen 3 px omhoog verplaatsen en 1 px naar rechts.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#rechtsonder Zwarte schaduw rechts en onder

De paragraaf met id="rechtsonder". Wordt in alle browsers hetzelfde weergegeven.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px black;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 7 px breed.

black is gewoon de kleur van de schaduw.

#img-dubbel

Het element met id="img-dubbel". Deze hoort bij de tweede afbeelding met twee schaduwen: een zwarte schaduw linksboven en een grijze rechtsonder.

margin: -11px 0 0 -5px;

Afbeelding 11 px omhoog verplaatsen en 5 px naar links.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#dubbel Zwarte schaduw links en boven, grijze rechts en onder

De paragraaf met id="dubbel". Wordt in alle browsers hetzelfde weergegeven.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px gray, -5px -7px black;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De eerste opdracht zorgt voor de grijze schaduw rechtsonder, de tweede voor de zwarte schaduw linksboven. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De grijze schaduw komt dus rechts te staan, de zwarte schaduw links. Beide zijn 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De grijze schaduw komt dus aan de onderkant te staan, de zwarte aan de bovenkant. Beide zijn 7 px breed.

gray en black zijn gewoon de kleuren van de schaduwen.

#img-linksboven

Het element met id="img-linksboven". Deze hoort bij de derde afbeelding met ronde hoeken en een grijze schaduw linksboven.

margin: -8px 0 0 -3px;

Afbeelding 8 px omhoog verplaatsen en 3 px naar links.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#linksboven Grijze schaduw links en boven, ronde hoeken

De paragraaf met id="linksboven". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt omdat je anders, buiten de schaduw, geen ronde hoeken ziet.

box-shadow: -4px -5px #888;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus links te staan en is 4 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de bovenkant te staan en wordt 5 px breed.

#888 is gewoon de kleur van de schaduw: grijs.

border-radius: 10px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bij hoort. Als ik de schaduw helemaal niet zou verplaatsen (box-shadow: 0 0;), zou hij precies achter de paragraaf vallen, omdat hij precies dezelfde ronde hoeken heeft.

Maar omdat ik de schaduw wel heb verplaatst, komt hij rechtsboven de paragraaf te staan. Maar wel met dezelfde ronde hoeken als de paragraaf heeft.

p#linksboven-ie, p#rechtsonder-blur-ie, p#spread-ie, p#blur-neg-ie

De paragrafen met id="linksboven-ie", "rechtsonder-blur-ie", "spread-ie" en "blur-neg-ie".

Al deze paragrafen zijn alleen voor Internet Explorer 7 en 8 nodig. Ze verstoren de lay-out en worden daarom verborgen voor de browsers die ze niet nodig hebben. Voor Internet Explorer 7 en 8 tover ik ze later met aparte css voor die twee overjarige gedrochten weer tevoorschijn.

display: none;

Niet tonen. Omdat ik display: none; gebruik, zijn ze niet alleen onzichtbaar, maar nemen ze ook geen enkele ruimte in. Ze verpesten de lay-out dus ook niet.

Als ik visibility: hidden; zou gebruiken, zijn ze wel onzichtbaar, maar ze nemen dan nog steeds ruimte in en slopen dan dus nog steeds de lay-out.

#img-rechtsonder-inset

Het element met id="img-rechtsonder-inset". Deze hoort bij de vierde afbeelding met ronde hoeken en een grijze schaduw rechtsonder bínnen de paragraaf.

margin: -3px 0 0 1px;

Afbeelding 3 px omhoog verplaatsen en 1 px naar rechts.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#rechtsonder-inset Grijze inset-schaduw rechts en onder, ronde hoeken

De paragraaf met id="rechtsonder-inset". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra span nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt omdat je anders, buiten de schaduw, geen ronde hoeken ziet.

box-shadow: inset -4px -5px #999;

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij dan een foutmelding geeft. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, waar het ook staat, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Omdat de waarde inset is gebruikt, werkt dit iets anders dan normaal. Een positief getal betekent nu, dat de schaduw links aan de binnenkant van het element komt te staan. Een negatief getal zorgt ervoor, dat de schaduw rechts aan de binnenkant komt te staan. De schaduw komt hier dus aan de rechterbinnenkant te staan en is 4 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Omdat de waarde inset is gebruikt, werkt dit iets anders dan normaal. Een positief getal betekent nu, dat de schaduw boven aan de binnenkant van het element komt te staan. Een negatief getal zorgt ervoor, dat de schaduw onder aan de binnenkant komt te staan. De schaduw komt hier dus aan de binnenkant van de onderkant te staan en wordt 5 px breed.

#999 is gewoon de kleur: grijs.

border-radius: 10px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bij hoort. Als ik de schaduw helemaal niet zou verplaatsen (box-shadow: inset 0 0;), zou hij precies achter de paragraaf vallen, omdat hij precies dezelfde ronde hoeken heeft.

Maar omdat ik de schaduw wel heb verplaatst, komt hij rechtsonder binnen de paragraaf te staan. Maar wel met dezelfde ronde hoeken als de paragraaf heeft.

#img-rechtsonder-blur

Het element met id="img-rechtsonder-blur". Deze hoort bij de vijfde afbeelding met een vervagende schaduw rechtsonder.

margin: -15px 0 0 -11px;

Afbeelding 15 px omhoog verplaatsen en 11 px naar links.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#rechtsonder-blur Zwarte vervagende schaduw rechts en onder

De paragraaf met id="rechtsonder-blur". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px 20px black;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 7 px breed.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

black is gewoon de kleur van de schaduw.

#img-spread

Het element met id="img-spread". Deze hoort bij de zesde afbeelding met een vervagende schaduw rondom, gelijk boven de brede blauwe knop.

margin: -13px 0 0 -16px;

Afbeelding 13 px omhoog verplaatsen en 16 px naar links.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#spread Zwarte vervagende schaduw rondom

De paragraaf met id="spread". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

margin: 10px 1px 0 0;

De paragraaf boven deze heeft een vervagende schaduw aan de onderkant. Deze <p> heeft een vervagende schaduw aan de bovenkant. Daarom geef ik aan de bovenkant 10 px extra ruimte, zodat de schaduwen niet over elkaar heen komen te staan.

De meeste andere paragrafen met een schaduw hebben een border van 1 px breed. Deze paragraaf heeft dat niet. Daarom zet ik hem 1 px naar links, zodat hij toch op gelijke lijn komt met de paragrafen die wel 'n border hebben.

box-shadow: black 0 0 20px 8px;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden black achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als de kleur vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

black is gewoon de kleur van de schaduw.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 20px. De browser zet de schaduw dan gewoon aan de rechterkant, 20 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal.

#img-spread-inset

Het element met id="img-spread-inset". Deze hoort bij de zevende afbeelding, de brede blauwe knop met ronde hoeken.

margin-left: -5;

Afbeelding 5 px naar links verplaatsen.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#spread-inset Blauwe knop met ronde hoeken

De paragraaf met id="spread-inset". In Internet Explorer 7 en 8 is dit onmogelijk na te maken. Dit is 'n beetje onzinnig gebruik van box-shadow, het laat alleen zien wat er mogelijk is.

Bij p hebben alle paragrafen een witte achtergrond gekregen. Dat is ook bij deze schaduw van belang. Als je de achtergrond bijvoorbeeld rood zou maken, ziet het er totaal anders uit.

height: 46px;

Bij p is een hoogte van 60 px opgegeven voor alle paragrafen, plus nog 3 px padding. De totale hoogte is dus 3 + 60 + 3 = 66 px. Deze paragraaf krijgt hieronder echter een padding van 10 px, dus moet de hoogte hier 46 px zijn. Dan wordt hij 10 + 46 + 10 = 66 px, even hoog als de andere paragrafen.

margin-right: -7px;

Bij p hebben alle paragrafen een padding van 3 px gekregen. Deze paragraaf krijgt hieronder echter een padding van 10 px, 7 px meer. Omdat hij naar rechts is gefloat, komt de linkerkant daardoor 14 px meer naar links dan bij de meeste andere paragrafen het geval is. Door hem 7 px naar rechts te zetten, komt hij netjes in lijn met de andere paragrafen met schaduwen te staan: er steekt evenveel links als rechts uit.

padding: 10px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 0 0 40px 15px blue;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 40px. De browser zet de schaduw dan gewoon aan de rechterkant, 40 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde inset is gebruikt, komt de schaduw hier aan de binnenkant van het element te staan.

Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal. Voor het oog lijkt het alsof het witte middendeel verschuift, maar in werkelijkheid verschuift de blauwe schaduw.

blue is gewoon de kleur van de schaduw.

border-radius: 25px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Omdat de schaduw hier met inset aan de binnenkant van de paragraaf is gezet, staat hij netjes tegen de ronde hoeken aan en volgt deze.

#img-blur-neg

Het element met id="img-blur-neg". Deze hoort bij de achtste afbeelding met de blauwe schaduw rondom, gelijk onder de brede blauwe knop.

margin: -25px 0 0 -19px;L

Afbeelding 25 px naar boven en 19 px naar links verplaatsen.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#blur-neg Blauwe vervagende schaduw rondom

De paragraaf met id="blur-neg". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: blue 0 0 50px -4px;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als blue vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

blue is gewoon de kleur van de schaduw.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 50px. De browser zet de schaduw dan gewoon aan de rechterkant, 50 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde hier -4 is, dus negatief, gaat het van de breedte van de blur, het derde getal, af.

#img-inset-outset

Het element met id="img-inset-outset". Deze hoort bij de negende afbeelding met de ronde hoeken en de opstaande rand, gelijk boven de foto.

margin: -12px 0 0 -7px;

Afbeelding 12 px omhoog en 7 px naar links verplaatsen.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#inset-outset Gecombineerde inset en gewone schaduw, ronde hoeken

De paragraaf met id="inset-outset". Wordt in alle browsers hetzelfde weergegeven, maar in Internet Explorer 7 en 8 is het gewoon een platte border.

height: 50px;

Bij p is een hoogte van 60 px opgegeven voor alle paragrafen, plus nog 3 px padding. De totale hoogte is dus 3 + 60 + 3 = 66 px. Deze paragraaf krijgt echter een padding van 8 px, dus moet de hoogte hier 50 px zijn. Dan wordt hij 8 + 50 + 8 = 66 px, even hoog als de andere paragrafen.

margin-right: -5px;

Bij p hebben alle paragrafen een padding van 3 px gekregen. Deze paragraaf krijgt hieronder echter een padding van 8 px, 5 px meer. Omdat hij naar rechts is gefloat, komt de linkerkant daardoor 10 px (2 x 5px) meer naar links dan bij de meeste andere paragrafen het geval is. Door hem 5 px naar rechts te zetten, komt hij netjes in lijn met de andere paragrafen met schaduwen te staan: er steekt evenveel links als rechts uit.

border: black solid 1px;

In dit geval geeft een kleine border een klein extra effect. Door gewoon van alles te proberen blijkt er van alles mogelijk. Of je 't mooi vindt of niet, is een andere zaak...

padding: 8px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 3px 3px 10px black, 3px 3px 10px black;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan. In dit geval levert de combinatie van de twee schaduwen een opstaande rand op.

De eerste schaduw begint met inset. De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan. De tweede schaduw komt dus wel buiten het element te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en black achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als inset achter de getallen staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 3 px breed.

Omdat bij de eerste schaduw de waarde inset is gebruikt, werkt het bij de eerste schaduw iets anders normaal. Een positief getal betekent nu, dat de schaduw links aan de binnenkant van het element komt te staan, een negatief getal zorgt ervoor dat de schaduw rechts aan de binnenkant komt te staan. De schaduw komt hier dus aan de linkerbinnenkant te staan en is 3 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 3 px breed.

Omdat bij de eerste schaduw de waarde inset is gebruikt, werkt het bij de eerste schaduw iets anders dan normaal. Een positief getal betekent nu dat de schaduw boven aan de binnenkant van het element komt te staan, een negatief getal zorgt ervoor dat de schaduw onder aan de binnenkant komt te staan. De schaduw komt hier dus aan de binnenkant van de bovenkant te staan en wordt 3 px breed.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

black is gewoon de kleur van de schaduw.

border-radius: 8px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Bij de schaduw zonder inset wordt de buitenkant gevolgd, de schaduw met inset wordt aan de binnenkant van de paragraaf tegen de ronde gezet en volgt deze.

#img-foto

Het element met id="img-foto". Deze hoort bij de tiende afbeelding: de foto.

margin: -11px 0 0 55px;

Afbeelding 11 px omhoog en 55 px naar rechts verplaatsen.

De foto is veel smaller dan de andere afbeeldingen. De marge links van 55 px zorgt ervoor, dat hij horizontaal ongeveer in het midden van de andere afbeeldingen komt te staan.

p#foto

De paragraaf met id="foto". Dit is de paragraaf waar de foto in komt te staan. Een beetje een buitenbeentje, want het is de enige paragraaf die niet zelf een schaduw krijgt. De schaduw wordt aangebracht bij de afbeelding die in deze paragraaf staat.

width: 149px;

Bij p hebben alle paragrafen een breedte van 270 px gekregen. Dat is veel breder dan nodig is om de foto met de schaduw neer te kunnen zetten. De simpelste manier om de foto op de goede plaats te krijgen, is gewoon de paragraaf even breed te maken als de foto: 149 px.

height: 233px;

Bij p hebben alle paragrafen een hoogte van 60 px gekregen. Dat is te laag om de foto in te kunnen zetten. De simpelste manier om de foto op de goede plaats te krijgen, is gewoon de paragraaf even hoog te maken als de foto: 149 px.

margin-right: 63px;

De foto is veel smaller dan de andere paragrafen met een schaduw. De marge rechts van 63 px zorgt ervoor, dat hij horizontaal ongeveer midden onder de andere afbeeldingen komt te staan.

background: none;

Bij p hebben alle paragrafen een padding van 3 px gekregen. En ook een witte achtergrond. Daardoor is, waar geen schaduw staat, de witte achtergrond zichtbaar rondom de foto. De simpelste manier om dit te voorkomen is gewoon de witte achtergrond weghalen.

#img-foto-2 Foto met schaduw

Het element met id="img-foto-2". Dit is de afbeelding rechts die de schaduw krijgt. De weergave van deze schaduw is in alle browsers hetzelfde.

box-shadow: 5px 6px #666;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 6 px breed.

#666 is gewoon de kleur van de schaduw: grijs.

#img-knop

Het element met id="img-knop". Deze hoort bij de elfde afbeelding: de twee kleine blauwe knoppen. Beide knoppen staan samen op één afbeelding.

margin: -15px 0 0 -12px;

Afbeelding 15 px omhoog en 12 px naar links verplaatsen.

Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.

p#knop, p#knop-muis Twee kleine blauwe knoppen

De paragrafen met id="knop" en id="knop-muis". In p#knop staat de lichtblauwe knop met de tekst 'HOVER', in p#knop-muis de donkerder knop met 'GEWOON'. Als je over een van de knoppen hovert, krijgt hij hetzelfde uiterlijk als de ander.

In Internet Explorer 7 en 8 zijn de kleuren effen, omdat dit gewoon niet is te imiteren. Bovendien werkt het hoveren niet, want dat werkt niet in combinatie met de behavior die nodig is voor de ronde hoeken.

Een aantal instellingen is hetzelfde voor beide knoppen, die geef ik hier op. Instellingen voor één van beide knoppen geef ik later apart op.

width: 100px;

Bij p hebben alle paragrafen een breedte van 270 px gekregen. Dat is veel te breed voor deze knoppen.

height: 46px;

Bij p hebben alle paragrafen een hoogte van 60 px en een padding van 3 px gekregen, samen 3 + 60 + 3 = 66 px hoog. Deze knoppen krijgen een padding van 10 px. De hoogte wordt dan dus 10 + 46 + 10 = 66 px, even hoog als de andere knoppen.

margin-top: 7px;

Door al het gestoei met floaten, marges en hoogtes staan deze knoppen niet meer gelijk met de bijbehorende afbeelding. Door ze iets omhoog te zetten, staan ze weer netjes op dezelfde hoogte.

padding: 10px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 0 0 40px 15px blue;

Eigenlijk is deze schaduw alleen bestemd voor p#knop en niet voor p#knop-muis, want die heeft standaard (zonder hoveren) een andere schaduw. Ik neem hem toch hier op, omdat ik anders een aparte regel alleen voor deze schaduw moet opnemen.

Dat p#knop-muis een andere schaduw krijgt, maakt niet uit. Verderop overrule ik deze schaduw gewoon.

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als gelijk achter box-shadow het getal 0 staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver binnen de paragraaf. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 40px. De browser zet de schaduw dan gewoon aan de rechterkant, 40 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde inset is gebruikt, komt de schaduw hier aan de binnenkant van het element te staan.

Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal. Voor het oog lijkt het alsof het witte middendeel verschuift, maar in werkelijkheid verschuift de blauwe schaduw.

blue is gewoon de kleur van de schaduw.

border-radius: 25px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Omdat de schaduw hier met inset aan de binnenkant van de paragraaf is gezet, staat hij netjes tegen de ronde hoeken aan en volgt deze.

text-align: center;

Tekst horizontaal in het midden zetten.

line-height: 46px;

Tekst wordt altijd in het midden van de regelhoogte gezet. Door die even hoog te maken als de knop zelf, komt de tekst dus ook verticaal in het midden van de knop te staan.

p#knop:hover, p#knop-muis

De paragraaf met id="knop", maar alleen als ik erover hover, en de paragraaf met id="knop-muis". Dit zijn de rechter- en de linker smalle knop.

Bij p#knop, p#knop-muis heb ik een bepaalde schaduw opgegeven. Die moet veranderen als ik over de knop hover.

p#knop-muis moet juist altijd deze schaduw krijgen. Omdat ik bij p#knop, p#knop-muis een andere schaduw heb opgegeven, overrule ik die hier.

box-shadow: inset 0 0 30px 20px rgba(38, 38, 255, 0.5), 0 0 20px 5px blue;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan.

De eerste schaduw begint met inset. De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan. De tweede schaduw komt dus wel gewoon buiten het element te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en rgba() achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als er gelijk achter box-shadow een 0 staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver binnen en buiten de paragraaf. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 30px voor de eerste schaduw, 20px voor de tweede schaduw. De browser zet beide schaduwen dan gewoon aan de rechterkant.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt. Bij de eerste schaduw is die afstand 30 px, bij de tweede schaduw 20 px. Door het gebruik van de waarde inset bij de eerste schaduw, vindt de vervaging daar naar binnen toe plaats. Bij de tweede schaduw is de richting naar buiten toe.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal.

Bij de eerste schaduw wordt de breedte dus 5 px, bij de tweede schaduw 20 px. Door het gebruik van de waarde inset bij de eerste schaduw, staat die schaduw aan de binnenkant van de paragraaf. De tweede schaduw staat aan de buitenkant.

rgba(38, 38, 255, 0.5) en blue zijn de kleuren van de eerste en tweede schaduw.

De eerste schaduw is doorzichtig. De eerste drie getallen geven de kleur aan. De waarde ervan moet tussen 0 en 255 liggen. Het eerste getal geeft rood aan, het tweede groen en het derde blauw.

Het vierde getal achter rgba geeft aan, dat de schaduw half doorzichtig moet zijn. Deze waarde ligt tussen 0 en 1.

p#knop-muis

De paragraaf met id="knop-muis". Dit is de paragraaf waar de links smalle blauwe knop in staat.

margin-right: 35px;

Bij p heb ik alle paragrafen naar rechts gefloat. De eerste paragraaf binnen elke div, dat is de <p> waarbinnen de afbeeldingen staan, wordt bij p:first-child naar links gefloat.

In deze div staan echter drie paragrafen. De eerste en de laatste staan goed, maar de middelste staat tegen de laatste aan. Hierdoor staan beide knoppen pal tegen elkaar aan. Door rechts een marge te geven, staan beide knoppen redelijk goed ten opzichte van de andere paragrafen en ten opzichte van elkaar.

p#knop-muis:hover

De paragraaf met id="knop-muis", maar alleen als ik erover hover. Dit is de paragraaf met de linker smalle blauwe knop.

{box-shadow: inset 0 0 40px 15px blue; border-radius: 25px;}

Als ik over deze knop hover, geef hem dan een andere schaduw. Die schaduw is precies dezelfde als de andere knop heeft zonder hoveren. Hij wordt beschreven bij p#knop, p#knop-muis.

#img-meerkleurig

Het element met id="img-meerkleurig". Deze hoort bij de onderste afbeelding: de veelkleurige rand.

margin-left: 58px;

Afbeelding 58 px naar rechts verplaatsen.

Deze afbeelding is veel smaller dan de andere afbeeldingen. De marge links van 58 px zorgt ervoor, dat hij horizontaal ongeveer in het midden van de andere afbeeldingen komt te staan.

p#meerkleurig Veelkleurige rand

De paragraaf met id="meerkleurig". Dit voorbeeld heeft (natuurlijk) geen enkel praktisch nut. Het laat alleen zien wat er mogelijk is met 'n beetje spelen.

In Internet Explorer 7 en 8 is dit gewoon niet weer te geven met alleen css. Punt.

width: 75px; height: 75px;

Bij p hebben alle paragrafen een hoogte van 270 px en een breedte van 60 px opgekregen. Die zijn hier niet bruikbaar.

margin: 45px 105px 0 0;

Door al het gefloat en gestoei met hoogte en marges en zo, staat deze paragraaf niet op de goede plaats. 'n Marge aan de bovenkant van 45 px is de simpelste manier om dat goed te krijgen. De marge van 105 px links zorgt ervoor, dat deze smalle paragraaf ongeveer in midden onder de bredere komt te staan.

box-shadow: red 0 -15px 15px, 15px 0 15px blue, 0 15px 15px yellow, -15px 0 15px green, 0 0 30px 25px black, 0 0 0 35px orange;

In totaal staan hier 6 schaduwen, gescheiden door een komma. Omdat dit alleen maar 'n speelsel is, ga ik die niet uitgebreid beschrijven, maar alleen de hoofdlijnen.

De eerste schaduw, de rode, staat bovenaan. De tweede, de blauwe, komt daaronder, enz. De eerste schaduw is dus altijd volledig zichtbaar.

In totaal zijn vier getallen mogelijk. De betekenis van het getal wordt afgeleid uit de plaats, dus als je het vierde getal gebruikt, moet je altijd de eerste drie ook gebruiken. Desnoods vul je 'n 0 in.

De eerste twee getallen geven de richting van de schaduw aan. Het derde getal, indien aanwezig, geeft de lengte van de vervaging aan. Het vierde getal, indien aanwezig, zorgt voor een schaduw aan alle kanten.

Bij de eerste schaduw staat red vooraan. Ik heb in de loop der jaren een volgorde ontwikkeld, die mij het best bevalt en fouten helpt voorkomen. Liever zou ik red achteraan zetten, zoals bij de andere schaduwen. Er zit in de validator echter een bug waardoor hij een 0 gelijk achter box-shadow fout rekent. En die fouten zijn verwarrend, dus pas ik de syntax aan. Overigens werkt het altijd, ongeacht de volgorde, het is alleen de validator die de hik krijgt.

border-radius: 40px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Dat je dit op meerdere manieren kunt uitleggen, blijkt uit bovenstaande afbeeldingen.

p#meerkleurig span

De spans binnen de paragraaf met id="meerkleurig". Dat is hier maar één span, waarbinnen een tekst staat, die alleen in Internet Explorer 7 en 8 moet worden weergegeven.

display: none;

Tekst niet weergeven. Ik gebruik display: none; zodat ook geen ruimte wordt ingenomen. Als ik visibility: hidden; gebruik, zie je de tekst niet, maar hij neemt nog steeds ruimte in en verstoort daardoor de lay-out.

Speciaal voor Internet Explorer 7 en 8

<!--[if (IE 7) | (IE 8)]> <style> p#rechtsonder {filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color='black');} p#dubbel {filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color=#888888) progid: DXImageTransform.Microsoft.dropshadow(OffX=-5, OffY=-7, Color='black'); margin: -7px 5px 0 0;} p#linksboven-ie {display: block; position: relative; z-index: -1; top: -6px; left: -7px; margin-bottom: -66px; behavior: url(092-files/border-radius.htc); border-radius: 10px; background: #888;} p#linksboven {behavior: url(092-files/border-radius.htc);} p#rechtsonder-inset {behavior: url(092-files/border-radius.htc); background: #999;} p#rechtsonder-inset span {display: block; width: 268px; height: 57px; position: relative; top: -4px; left: -4px; z-index: 0; padding: 4px 0 0 4px; behavior: url(092-files/border-radius.htc); border-radius: 10px; background: white;} p#rechtsonder-blur-ie {display: block; position: relative; z-index: -1; margin: -6px -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='12'); background: black;} p#spread-ie {display: block; position: relative; z-index: -1; width: 285px; height: 77px; margin: 0 -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='11'); background: black;} p#spread-inset {behavior: url(092-files/border-radius.htc); background: #a1a3f6;} p#blur-neg-ie {display: block; position: relative; z-index: -1; width: 285px; height: 77px; margin: -20px -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='15'); background: #9588e3;} p#inset-outset {behavior: url(092-files/border-radius.htc); margin-right: -7px; border: #333 solid 3px;} #img-foto-2 {filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=6, Color=#666666);} p#knop {behavior: url(092-files/border-radius.htc); background: #4044fd;} p#knop-muis {behavior: url(092-files/border-radius.htc); background: #c1c3fc;} p#meerkleurig span {display: inline;} </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 en 8 (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)]> <link rel="stylesheet" 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 en 8 in. De css voor Internet Explorer 7 en 8 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)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Ik heb geprobeerd de css voor Internet Explorer 7 en 8 net zoals alle andere css te beschrijven. Dat is niet gelukt. Om te beginnen blijkt exact dezelfde html en css in Internet Explorer 7 en 8 volstrekt verschillend uit te pakken. En niet 'n beetje, nee, elementen staan echt op plaatsen die honderden pixels uit elkaar liggen.

Daarnaast lijkt ogenschijnlijk (vrijwel) dezelfde html en css binnen dezelfde versie ook totaal verschillende uit te pakken. Kennelijk zorgen heel kleine veranderingen in de code voor enorme verschillen in weergave. z-index, float, margin, noem maar op, werken op de meest krankzinnige manieren. Het gebruik van behaviors en/of filters schijnt Internet Explorer 7 en 8 gewoon enorm te ontregelen.

Op Internet vind je ook 'n eindeloze hoeveelheid problemen bij het gebruik van filters en/of behaviors. Heel vaak spreken mensen elkaar tegen. Ik neem aan, dat daarbij hetzelfde speelt als wat ik heb gemerkt: om volstrekt onduidelijke redenen werkt (vrijwel) dezelfde code bij de ene constructie wel, bij de andere niet.

En dat is dus ook de reden waarom ik niet goed kan beschrijven wat er gebeurt: het hangt van idiotigheden aan elkaar.

Ik ga hieronder zo goed mogelijk aangeven waarom ik iets heb gedaan, maar details laat ik heel vaak weg. Het komt erop neer, dat je gewoon maar net zolang moet proberen, tot het er net zo als in andere browsers uitziet. Voor zover dat al kan.

Als bij een bepaalde schaduw een extra paragraaf wordt gebruikt voor Internet Explorer 7 en 8, moet die op een of andere manier onder de paragraaf met de tekst komen te staan. Ook hier kun je dat eigenlijk alleen maar uitproberen: er is geen lijn in te ontdekken hoe dingen als marge en relatieve posities werken.

Voor de juiste maten en positie kun je position: relative; (met top en left), margin, float, padding, width en height gebruiken. Verder kan z-index af en toe helpen iets te verbergen of zichtbaar te maken, maar vraag me niet wanneer, want ik heb er geen enkele lijn in kunnen ontdekken. Gewoon uitproberen tot iets werkt.

p#rechtsonder

De paragraaf met id="rechtsonder". De bovenste paragraaf met de zwarte schaduw rechtsonder.

filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color='black');

Internet Explorer 7 en 8 kennen box-shadow niet. In Internet Explorer 9 is dit (eindelijk) geïmplementeerd. Maar voor Internet Explorer 7 en 8 zal gebruik gemaakt moeten worden van een filter: een methode die alleen werkt in Internet Explorer.

Bij het gebruik van hoofdletters heb ik me zoveel mogelijk gehouden aan wat op de site van Microsoft zelf aan voorbeelden staat. Mogelijk werkt het ook prima zonder of met andere hoofdletters.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.dropshadow: de naam van het filter. Waarom dit zo ingewikkeld is (vergeleken met box-shadow), weet ik ook niet.

OffX: de breedte in horizontale richting. Positieve getallen leveren een schaduw aan de rechterkant op, negatieve aan de linkerkant. De grootte van het getal is de breedte van de schaduw in px.

OffY: de hoogte in verticale richting. Positieve getallen leveren een schaduw aan de onderkant op, negatieve aan de bovenkant. De grootte van het getal is de hoogte van de schaduw in px.

Color='black': dit ga je niet geloven: de kleur. Mogelijk is dit niet echt nodig als het gewoon de standaardkleur is, maar in de voorbeelden van Microsoft staat de kleur er ook steeds bij, dus heb ik dat voor de zekerheid ook maar gedaan. Bovendien is het 'n goede gewoonte om bij dit soort eigenschappen altijd de kleur op te geven. Als je later de standaardkleur verandert, veranderen anders de schaduwen ook mee.

Een kleur moet worden opgegeven met de naam of als zes hexadecimale eenheden: #113355. Een kleur opgeven met drie hexadecimale eenheden, zoals #135, werkt niet bij dit filter.

p#dubbel

De paragraaf met id="dubbel". De tweede paragraaf van boven met twee schaduwen: een zwarte schaduw linksboven en een grijze rechtsonder.

filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color=#888888) progid: DXImageTransform.Microsoft.dropshadow(OffX=-5, OffY=-7, Color='black')

Hoe dit filter werkt staat bij filter: Het enige verschil is, dat hier twee filters staan. Beide beginnen met progid. Hierdoor krijg je dus twee schaduwen.

margin: -7px 5px 0 0;

Het gebruik van dit filter levert soms een verplaatsing op van het element dat de schaduw krijgt. Hier staat iets meer over bij Een schaduw die is gemaakt met...

Wanneer dat precies wel en niet gebeurt, is mij niet helemaal duidelijk geworden. Het simpelste is om het gewoon maar uit te proberen en dan van geval tot geval te corrigeren. Aan deze waardes ben ik dus gekomen door uitproberen.

p#linksboven-ie

De paragraaf met id="linksboven-ie". Dit is een extra paragraaf voor Internet Explorer 7 en 8, omdat deze browsers niet in hetzelfde element ronde hoeken én een schaduw kunnen weergeven. Althans: niet met alleen css. In alle andere browsers krijgt p#linksboven ronde hoeken én schaduw.

In de html blijkt deze paragraaf vóór p#linksboven, waar tekst in staat, te moeten staan. p#linksboven-ie heeft een grijze achtergrond, en als deze na p#linksboven zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css voor alle browsers is deze paragraaf met display: none; verborgen. Voor Internet Explorer 7 en 8 maak ik hem weer zichtbaar.

position: relative; z-index: -1; top: -6px; left: -7px; margin-bottom: -66px;

Deze combinatie blijkt ongeveer dezelfde weergave op te leveren als in alle andere browsers.

Ondanks dat deze paragraaf vóór p#linksboven met de tekst staat, wordt hij in Internet Explorer 7 toch over de tekst heen gezet. Een negatieve z-index plaatst deze paragraaf onder alles wat er verder nog staat, en dat werkt. En omdat Internet Explorer 8 er geen last van heeft, zet ik het gewoon hier neer. Dat spaart 'n selector uit in de aparte css voor Internet Explorer 7 verderop. Vraag me niet waarom dit nodig is.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 kennen border-radius niet. Door gebruik te maken van een zogenaamde behavior, kunnen we deze fossielen zover krijgen dat ze het wel herkennen. Een behavior kan worden gebruikt om bepaalde code als het ware te importeren binnen een pagina. Dat is hier het bestand met de naam border-radius.htc.

Hoewel het bestand wordt aangeroepen vanuit de css, moet een pad worden opgegeven ten opzichte van het html-bestand, waarin het wordt gebruikt. Dit is dus anders dan bij bijvoorbeeld een achtergrond-afbeelding, waar het pad moet worden opgegeven ten opzichte van het css-bestand. Waarom Microsoft dit zo afwijkend en verwarrend heeft geïmplementeerd, weet ik ook niet.

In border-radius.htc staat JavaScript. Deze JavaScript stuurt weer VML (Vector Markup Language) aan, een taal die alleen werkt in Internet Explorer. Alle andere browsers gebruiken voor soortgelijke doeleinden de standaardtaal SVG (Scalable Vector Graphics). (Internet Explorer 9 maakt eindelijk ook een allereerste begin maken met de ondersteuning van SVG).

Met behulp van VML worden de ronde hoeken weergegeven. Een uiterst omslachtige methode. En dat zie je ook: in eerste instantie worden de ronde hoeken gewoon rechthoekig op het scherm gezet. Pas na het laden en verwerken van border-radius.htc worden de hoeken alsnog afgerond.

border-radius: 10px;

Omdat deze paragraaf de grijze schaduw bij p#linksboven moet maken, moet hij dezelfde ronding krijgen als p#linksboven in de css voor alle browsers heeft gekregen.

background: #888;

Grijze achtergrond.

p#linksboven

De paragraaf met id="linksboven". De paragraaf die bij alle andere browsers de ronde hoeken en de grijze schaduw linksboven krijgt.

behavior: url(092-files/border-radius.htc);

Met alle extra code en zo bij p#linksboven-ie heb ik alleen nog maar een grijze rechthoek met ronde hoeken geproduceerd, die iets linksboven p#linksboven staat. Nu moet ik p#linksboven nog ronde hoeken geven.

Daarvoor is deze regel nog nodig, uitleg bij behavior: url(092-files/border-radius.htc);

p#rechtsonder-inset

De paragraaf met id="rechtsonder-inset". De vierde paragraaf die bij alle andere browsers de ronde hoeken en een grijze schaduw rechtsonder bínnen de paragraaf krijgt.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #999;

Omdat Internet Explorer 7 en 8 geen schaduw én ronde hoeken kunnen weergeven in hetzelfde element, en ik hierboven al ronde hoeken heb gegeven, geef ik de hele paragraaf de kleur van de schaduw. Als ik daar dan een witte achtergrond overheen zet en die iets verschuif, zie je een grijze schaduw met ronde hoeken. Dat dat in werkelijkheid een volledig grijze <p> is met ronde hoeken, zie je niet.

p#rechtsonder-inset span

Ik heb hierboven p#rechtsonder-inset ronde hoeken gegeven. Maar dan kan ik er geen schaduw meer aan geven, want allebei tegelijk kunnen deze stakkers niet aan. Dus zet ik de tekst gewoon in een span en geef die span ronde een witte achtergrond en ronde hoeken.

Als ik de span een klein stukje omhoog verplaats, wordt aan de onderkant een stukje van de grijze achtergrond van p#rechtsonder-inset zichtbaar: de grijze schaduw.

display: block;

Een span is van zichzelf een inline-element. Door er een blok-element van te maken, kan ik eigenschappen als breedte en hoogte gebruiken.

width: 268px; height: 57px; position: relative; top: -4px; left: -4px; z-index: 0; padding: 4px 0 0 4px;

Deze combinatie blijkt het gewenste resultaat op te leveren.

De witte achtergrond van de span zou over de grijze achtergrond van de paragraaf horen te staan. Maar dat gebeurt niet. Met een andere z-index dan 0, zie je óf alleen wit, óf alleen grijs, en geen tekst. Met een z-index van 0 zie je precies wat de bedoeling is. Vraag me niet waarom. Dit soort vreemde verschijnselen krijg je dus als je met filters en/of behaviors werkt.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

border-radius: 10px;

Ik moet de span nog ronde hoeken geven.

background: white;

Omdat de span een witte achtergrond heeft en de iets grotere paragraaf een grijze, lijkt het er nu op dat de paragraaf een grijze schaduw rechtsonder aan de binnenkant heeft.

p#rechtsonder-blur-ie

De paragraaf met id="rechtsonder-blur-ie". Deze extra paragraaf hoort bij het vijfde voorbeeld: de vervagende schaduw rechts en onder.

Omdat Internet Explorer 7 en 8 geen vervagende schaduw aan alleen de rechter- en onderkant kunnen weergeven, wordt een extra <p> gebruikt. De schaduw wordt aan de extra <p> gegeven en door die <p> iets te verplaatsen, komt er toch 'n vervagende schaduw aan slechts twee kanten te staan.

In de html blijkt deze paragraaf na p#rechtsonder-blur, waar tekst in staat, te moeten staan. p#rechtsonder-blur-ie heeft een zwarte achtergrond, en als deze vóór p#rechtsonder-blur zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; margin: -6px -270px -12px 0;

Deze combinatie is gevonden door gewoon uit te proberen. Met deze marge blijkt het in Internet Explorer 7 en 8 hetzelfde te werken. Als ik de marge weglaat, maar met de rest van de html en css exact hetzelfde, staat deze paragraaf in beide browsers op een totaal andere plaats, zowel in de hoogte als in de breedte.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='12');

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter, dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='12': de breedte van de vervaging in px.

background: black;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een zwarte vervagende schaduw te krijgen, moet ik een zwarte achtergrond aan de paragraaf geven.

p#spread-ie

De paragraaf met id="spread-ie". Deze extra paragraaf hoort bij het zesde voorbeeld, de vervagende zwarte schaduw rondom, gelijk boven de brede blauwe knop.

Een vervagende zwarte schaduw rondom een element kan alleen maar in Internet Explorer 7 en 8 als je het hele element een massief zwarte achtergrond geeft. Dat is geen goed idee, want dat leest 'n tikkeltje lastig.

Daarom wordt achter p#spread, waar de tekst in staat, een extra paragraaf gezet. En die extra paragraaf krijgt rondom de vervagende schaduw. De zwarte achtergrond van de extra paragraaf valt weg achter de witte achtergrond van p#spread.

In de html blijkt deze paragraaf na p#spread, waar tekst in staat, te moeten staan. p#spread-ie heeft een zwarte achtergrond, en als deze vóór p#spread zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; width: 285px; height: 77px; margin: 0 -270px -12px 0;

Deze combinatie blijkt het juiste resultaat op te leveren. Waarom is mij niet geheel duidelijk, maar het blijkt te werken. De z-index is nodig omdat je anders alleen maar de zwarte achtergrond ziet.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='11')

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='11': de breedte van de vervaging in px.

background: black;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een zwarte vervagende schaduw te krijgen, moet ik een zwarte achtergrond aan de paragraaf geven.

p#spread-inset

De paragraaf met id="spread-inset". De brede blauwe knop. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #a1a3f6;

Achtergrondkleurtje.

p#blur-neg-ie

De paragraaf met id="blur-neg-ie". Deze extra paragraaf hoort bij het achtste voorbeeld, de vervagende blauwe schaduw rondom, gelijk onder de brede blauwe knop.

Een vervagende blauwe schaduw rondom een element kan alleen maar in Internet Explorer 7 en 8 als je het hele element een massief blauwe achtergrond geeft. Dat is geen goed idee. Daarom wordt achter p#blur-neg, waar de tekst in staat, een extra paragraaf gezet. En die extra paragraaf krijgt rondom de vervagende schaduw. De blauwe achtergrond van de extra paragraaf valt weg achter de witte achtergrond van p#blur-neg.

In de html blijkt deze paragraaf na p#blur-neg, waar tekst in staat, te moeten staan. p#blur-neg-ie heeft een blauwe achtergrond, en als deze vóór p#blur-neg zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; width: 285px; height: 77px; margin: -20px -270px -12px 0;

Deze combinatie blijkt het juiste resultaat op te leveren. Waarom is mij niet geheel duidelijk, maar het blikt te werken. De z-index is nodig omdat je anders alleen maar de blauwe achtergrond ziet.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='15')

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='15': de breedte van de vervaging in px.

background: #9588e3;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een blauwe vervagende schaduw te krijgen, moet ik een blauwe achtergrond aan de paragraaf geven.

p#inset-outset

De paragraaf met id="inset-outset". Deze hoort bij het negende voorbeeld, gelijk boven de foto.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

margin-right: -7px;

7 px naar rechts verplaatsen, zodat hij op gelijke lijn staat met de andere schaduwen.

border: #333 solid 3px;

Omdat een opstaande rand niet lukt, wordt gewoon een platte rand gegeven. Ook outset, ridge, en dergelijke, waarmee je een opstaande rand en dergelijke zou moeten kunnen maken, werken niet bij gebruik van een behavior.

#img-foto-2

Het element met id="img-foto-2". Dit is de foto die de schaduw moet krijgen.

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=6, Color=#666666);

Hoe dit filter werkt staat bij filter: Alleen de waarden en de kleur zijn anders.

p#knop

De paragraaf met id="knop". De smalle blauwe knop met 'GEWOON'. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

Ook hoveren werkt niet in combinatie met een behavior.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #4044fd;

Achtergrondkleurtje.

p#knop-muis

De paragraaf met id="knop". De smalle blauwe knop met 'GEWOON'. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

Ook hoveren werkt niet in combinatie met een behavior.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #c1c3fc;

Achtergrondkleurtje.

p#meerkleurig span

De spans binnen de paragraaf met id="meerkleurig". Dit is hier maar één span. Deze bevat een tekst, die getoond moet worden in Internet Explorer 7 en 8. Hierin staat, dat de meerkleurige rand onmogelijk gemaakt kan worden met alleen html en css. In alle andere browsers wordt deze tekst verborgen.

display: inline;

In de css voor alle browsers is deze span verborgen met display: none; Voor Internet Explorer 7 en 8 moet hij zichtbaar worden gemaakt.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> p#dubbel-ie {margin: 0 9px -60px 0;} p#rechtsonder-blur-ie {margin: -6px -296px -12px 0;} p#spread-ie {width: 287px; height: 74px; margin: 0 -294px -16px 0;} p#blur-neg-ie {width: 287px; height: 74px; margin: -20px -301px -16px 0;} </style> <![endif]-->

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

In deze css staan alleen maar wat aanpassingen om de paragrafen met schaduw op de goede plaats te krijgen en de goede breedte en hoogte te geven. Omdat je dit alleen maar via uitproberen kunt regelen, valt er weinig aan uit te leggen. Gewoon net zolang aan sleutelen tot het goed staat. De benodigde maten kunnen totaal anders zijn dan voor Internet Explorer 8. Vraag me niet waarom. Bij het gebruik van behaviors en filters breekt gewoon de totale chaos uit.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

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:

Specifiek voor dit voorbeeld

Omdat zonder css, zoals veel spraakbrowsers en dergelijke de pagina weergeven, alleen de schaduwen en de afgeronde hoeken en/of borders verdwijnen, leveren box-shadow en border-radius geen problemen op wat betreft toegankelijkheid.

Getest in

Laatst gecontroleerd op 1 mei 2012.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en – voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android.

Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan bij Bekende problemen. Dat stukje is er niet voor niets. Hierboven is alleen aangegeven, waarin is getest. Dat wil niet zeggen dat het werkt, en al helemaal niet dat het foutloos werkt. Lees Bekende problemen dus!

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA 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. NVDA 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 onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest bijvoorbeeld ’n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

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.

:

Nieuw opgenomen.

25 december 2010:

19 mei 2011:

1 mei 2012:

Bekende problemen

Valideren

Er lijkt een bug in de css3-validator van w3c te zitten. Niet zo vreemd, want box-shadow is nog behoorlijk nieuw. box-shadow valideert niet altijd goed, terwijl de syntax goed is.

inset lijkt vooraan te moeten staan, maar soms geeft dat juist een fout. Een 0 mag niet gelijk als eerste na box-shadow staan. Een kleur mag niet altijd vooraan staan.

Het zijn overduidelijk bugs, want de voorbeelden die w3c zelf in de specificatie geeft, valideren ook niet.

Ik heb gewoon wat geprobeerd tot het wel valideerde. Echt uitgezocht heb ik het niet. Omdat het bugs zijn, is dat tijdverspilling.

(Aanvulling 19 mei 2011 en 1 mei 2012: ik heb niet gekeken of deze bug inmiddels is verholpen.)

Safari en Google Chrome

Safari en Google Chrome moeten bij box-shadow een kleur krijgen. Als je geen kleur meegeeft, wordt de schaduw doorzichtig en zie je hem dus niet.

Safari op de iPad

Hoveren (over de onderste twee blauwe knoppen) werkt niet.

Firefox, Opera Mobile, Android browser en Chrome op Android

Als je de onderste twee blauwe knoppen aanraakt, verkleuren ze net zo als wanneer je er op de desktop over hovert. Dat is leuk, maar in feite werkt hoveren natuurlijk gewoon niet op ’n touchscreen.

Safari

Op Windows werkt box-shadow volledig, al is nog wel het voorvoegsel -webkit- nodig. Vreemd genoeg werkt het op OS X nog lang niet volledig. Vreemd, omdat Safari door Apple wordt gemaakt, wat ook de maker van OS X is.

Omdat Safari, net als Google Chrome, voor de weergave gebruik maakt van webkit, neem ik aan dat het niet al te lang zal duren, voordat box-shadow (of -webkit-box-shadow) ook op OS X volledig werkt.

Op dit moment werkt de waarde inset niet, en ook het vierde getal, dat aangeeft dat de schaduw volledig rondom moet komen te staan, werkt nog niet. Als je inset of het vierde getal gebruikt, heeft dit tot gevolg dat er helemaal geen schaduw verschijnt.

Dit houdt voor deze pagina met voorbeelden concreet in, dat de voorbeelden 4, 6, 7, 8, 9, de knoppen en de veelkleurige ring niet worden getoond in Safari op OS X. Als er ook een border is opgegeven, wordt alleen die normale border getoond. Als er geen border is opgegeven, zie je dus helemaal geen rand.

Ronde hoeken worden wel gewoon weergegeven. En ook de tekst en dergelijke wordt gewoon weergegeven, alleen de schaduw zie je niet.

Internet Explorer 7 en 8