Skip links en inhoudsopgave

Serie blok-elementen met door­zich­tige schaduw (box-shadow) - uitleg

Laatst aangepast: .

Afbeelding 1: blok-elementen met doorzichtige schaduw

Korte omschrijving

Van een serie <div>'s is alleen een driehoekige border zichtbaar. Met behulp van een doorzichtige box-shadow wordt de omtrek van de eigenlijke <div> zichtbaar gemaakt.

BELANGRIJK

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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.

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.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

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 (Kubuntu). Daarbij is vooral gebruik gemaakt van Komodo Edit, 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:
Naar site van War Child Nederland

Achterliggend idee

Voor dit voorbeeld is als basis een bestaand voorbeeld genomen: Schaalbare driehoeken zonder gebruik van een afbeelding. Omdat Internet Explorer 6 niet meer wordt ondersteund, is de code enigszins gewijzigd. Maar de grote lijnen zijn nog steeds hetzelfde. Nieuw is dat rondom de <div>'s die de driehoeken vormen een box-shadow is neergezet.

Eerst de driehoeken:

Afbeelding 2: vier borders vormen vier driehoeken

Hoewel je dat normaal genomen niet zo vaak zult zien, eindigen borders van een blok-element niet in een rechte hoek. Twee aangrenzende borders vormen een hoek van 45°. In de afbeelding hiernaast is dit zichtbaar gemaakt door elke border een andere kleur te geven. Die hoek van 45° geldt alleen, als beide borders even breed zijn. Als de breedte van twee aangrenzende borders verschilt, wordt de hoek tussen de borders platter of scherper.

De borders op de afbeelding hiernaast zijn behoorlijk breed. De bijbehorende <div> heeft geen hoogte en breedte. Daardoor grenzen de borders in het midden aan elkaar en vormt elke border een driehoek.

Als je nu drie van de vier borders doorzichtig maakt, dan houd je maar één zichtbare border over: een driehoek.

Als je bijvoorbeeld de groene border wilt laten staan, dus een groene driehoek wilt maken, maak je de blauwe en de rode border doorzichtig. Daardoor zie je die niet meer.

De zwarte border kan in dit geval helemaal weg, waardoor de uiteindelijke zichtbare figuur bestaat uit de groene driehoek. In werkelijkheid is die driehoek een rechthoek, want de borders boven- en onderaan zijn ook nog aanwezig. Alleen zie je die niet, omdat ze doorzichtig zijn.

In dit voorbeeld hebben de twee driehoeken aan de linkerkant van elke serie maten in em, en de twee driehoeken rechts in px. Daardoor veranderen de driehoeken links van grootte bij zoomen én bij een andere lettergrootte. De driehoeken rechts veranderen alleen bij zoomen van grootte, bij een andere lettergrootte verandert de grootte niet.

Je zou de <div>'s, en daarmee de borders, ook nog kunnen draaien of op andere manieren aanpassen met transform(). Dat bestond nog niet, toen het oorspronkelijke voorbeeld met de driehoeken werd gemaakt. Maar omdat het hier niet om de driehoeken, maar om de schaduw gaat, wordt dat niet gedaan.

Het nieuwe deel, de box-shadow:

De driehoeken zijn in werkelijkheid borders van gewone <div>'s. Een <div> is altijd rechthoekig. Een deel van de <div> zie je niet, maar dat verandert daar niets aan. Als je een box-shadow aan de <div>'s geeft, zie je gelijk dat het in werkelijkheid rechthoeken zijn.

De box-shadows zijn met behulp van rgba() gedeeltelijk doorzichtig gemaakt. Waar ze elkaar overlappen, zijn ze daardoor donkerder van kleur.

Omdat de box-shadows ook hier en daar de driehoeken zelf overlappen, is ook goed te zien welke box-shadow of welke driehoek bovenaan komt te staan. Een box-shadow gedraagt zich wat dat betreft hetzelfde als een outline: de box-shadow komt óver eerdere elementen in de html te staan, en ónder latere.

De box-shadow neemt, net als de outline, geen ruimte in. Een <div> met een breedte van 100 px en een box-shadow van 30 px blijft 100 px breed. De box-shadow wordt gewoon onder of boven de buur-elementen gezet. Als de box-shadow niet binnen het browservenster past, verdwijnt deze gewoon. Er verschijnt geen scrollbalk. (Er verschijnt normaal genomen natuurlijk wel een scrollbalk als niet alleen de box-shadow, maar ook tekst en dergelijke niet binnen het browservenster passen.)

Afbeelding 3: drie divs met schaduw en borders die eruit zien als een driehoek

Op de afbeelding zijn de bovenste vier rode driehoeken afgebeeld, met de bijbehorende doorzichtige zwarte box-shadow. De rode driehoeken zijn in werkelijkheid borders, die bij een <div> horen. De box-shadows staan rondom die <div>'s, waardoor je kunt zien, hoe groot de driehoeken in werkelijkheid zijn.

Rondom elke <div> staat een doorzichtige box-shadow van 20 px breed. Waar deze box-shadows elkaar overlappen, is de box-shadow donkerder. De box-shadow aan de linkerkant van de vierde <div> staat over de derde driehoek heen, omdat de vierde <div> laten in de html staat. Hetzelfde geldt voor de box-shadow aan de linkerkant van de derde <div> ten opzichte van de tweede driehoek.

De eerste <div> heeft een relatieve positie en een z-index van 10 gekregen. Daardoor staat deze boven de andere elementen. Dit geldt ook voor de box-shadow van de eerste <div>. Hierdoor staat de box-shadow aan de rechterkant van de eerste <div> een klein stukje over de tweede driehoek heen. En de eerste driehoek staat boven de box-shadow van de tweede driehoek, wat zonder z-index andersom zou zijn.

Met behulp van de z-index kun je dus regelen, wat in de weergave bovenaan komt te staan.

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 (in het Engels 'accessibility') is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat 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

We zijn hier snel klaar. Omdat alleen de opmaak hier wordt veranderd, heeft dit geen enkele invloed op schermlezers en dergelijke. En omdat er – buiten die opmaak – geen inhoud zoals tekst aanwezig is, zie je zonder css een volmaakt lege pagina.

Getest in

Laatst gecontroleerd op 20 juni 2016

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan hierboven bij Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de aan het begin van dit hoofdstukje 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.

Ik maak één uitzondering: Android browser. Omdat Android vaak niet geüpdatet kan worden, test ik ook nog in oudere versies van Android browser.

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 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad, Android en Windows Phone, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met een touchscreen, met een combinatie van toetsenbord en touchpad, en met een combinatie van toetsenbord en muis.

Als dat relevant is, is op de desktop ook getest, als JavaScript uitstaat. Eventuele problemen staan hierboven bij Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld. (Op iOS, Android en Windows Phone is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge.)

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack en VoiceOver.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE is een browser die gericht is op mensen met een handicap. Er is getest op Windows 7.

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest in combinatie met Firefox op Windows 7.

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS en OS X.

Als het voorbeeld in deze 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 specifiek voor dit voorbeeld staan hierboven bij 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 op 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 (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.

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 (en oplossingen) 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!)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Er zijn geen bekende problemen. Helaas ontbreken daardoor ook de gebruikelijke en – in alle bescheidenheid – briljante oplossingen.

Wijzigingen

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

:

Nieuw opgenomen.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

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

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn 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.

schaduw-112-dl.html: de pagina met het voorbeeld.

schaduw-112.pdf: deze uitleg (aangepast aan de inhoud van de download).

schaduw-112-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

112-css-dl:

schaduw-112-dl.css: stylesheet voor schaduw-112-dl.html.

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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>

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.

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

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

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

In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in breedte. En dat is een probleem. Sites waren, in ieder geval tot voor kort, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enz., maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. Op deze pagina bijvoorbeeld worden de <div>'s met driehoeken nooit breder dan het venster. Als er geen vier driehoeken naast elkaar passen, worden ze onder elkaar gezet.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die gebruik ik niet. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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.

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

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

        div p {
            margin-left: 16px;
            height: 120px;
            text-align: center;
        }

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enz., met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Als je op internet zoekt naar 'css' en 'compress' of 'comprimeren', vind je tal van sites, waar je dat automatisch kunt laten doen.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, wil ik dat mensen zonder al te veel moeite de css kunnen bekijken.)

/* schaduw-112-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

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

background: #ff9;

Achtergrondkleurtje.

Normaal genomen is het een goede gewoonte om met behulp van color bij een achtergrondkleur ook een voorgrondkleur op te geven. De voorgrondkleur is ook de kleur van de tekst. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

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

In dit geval is er helemaal geen tekst aanwezig op de pagina en maakt de voorgrondkleur niet uit.

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

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

margin: 0;

Slim om te doen vanwege verschillen tussen browsers. Kleine afstand tussen inhoud van de pagina en bovenkant van het browservenster.

padding: 30px 0 0;

Kleine afstand tussen inhoud van de pagina en bovenkant van het browservenster. Hiermee zijn ook gelijk de verschillen tussen browsers gecorrigeerd.

#red, #green, #blue, #black

De elementen met id="red", id="green", id="blue" en id="black". Binnen elk van deze vier <div>'s staan vier andere <div>'s, die elk een driehoek voor hun rekening nemen.

clear: both;

In elk van deze vier <div>'s staan weer vier andere <div>'s genest, de <div>'s met de eigenlijke driehoeken. Deze worden bij div div naar links gefloat. Hierdoor worden deze geneste <div>'s zo hoog mogelijk en dan zover mogelijk naar links gezet. Als daar ruimte voor is, komen hierdoor op sommige regels geen vier, maar vijf driehoeken naast elkaar te staan.

Door deze vier <div>'s te clearen, komt de inhoud ervan altijd op een nieuwe regel te staan. Die inhoud bestaat hier uit de vier geneste <div>'s die voor de driehoeken zorgen. De vier geneste <div>'s, en dus de driehoeken, worden nu altijd op een nieuwe regel gezet.

(Je zou hier kunnen volstaan met clear: left;, omdat alle geneste <div>'s naar links zijn gefloat. Maar het is een goede gewoonte om, als dat ook maar enigszins kan, both te gebruiken. Als er later ergens een float: right; wordt toegevoegd, kan het anders leiden tot moeilijk te vinden fouten, waar je schuimbekkend dol van kunt worden. Daar worden alleen fabrikanten van kalmerende middelen blij van, dus als je niet toevallig aandelen in de farmaceutische maffia hebt, kun je kunt beter clear: both; gebruiken.)

width: 21.5em;

Met deze breedte staan de <div>'s ongeveer horizontaal in het midden in iets bredere browservensters.

Als je gaat in- of uitzoomen, blijven ze in het midden staan. Als je echter alleen de lettergrootte verandert, lijken de driehoeken niet meer in het midden te staan. Dat komt doordat voor de driehoeken links de relatieve eenheid em is gebruikt, en voor de driehoeken rechts de absolute eenheid px. Bij een andere lettergrootte verandert daardoor alleen de grootte van de driehoeken links. De driehoeken rechts blijven even groot.

Als je een border aan deze buitenste vier <div>'s geeft, zul je zien dat deze vier <div>'s wel degelijk nog in het midden staan. Alleen zijn de twee driehoeken rechts gewoon niet meegegroeid met de lettergrootte, waardoor een (groot) deel van deze vier <div>'s rechts onzichtbaar is.

max-width: 100%;

Een breedte in procenten is altijd ten opzichte van de ouder van het element. Dat is hier <body>, een blok-element. Een blok-element wordt normaal genomen even breed als z'n ouder. Die ouder is <html>, het hoogste element. Normaal genomen wordt <html> daardoor even breed als het venster van de browser.

Via deze keten worden ook de vier <div>'s nooit breder dan 100% van de breedte van het venster. Als hierdoor geen vier driehoeken naast elkaar passen, worden één of meer driehoeken gewoon op de volgende regel gezet.

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 hetzelfde betekent als evenveel. De vier <div>'s staan dus altijd horizontaal gecentreerd, ongeacht de breedte van het browservenster.

Deze manier van horizontaal centreren van een blok-element werkt alleen, als het te centreren element een breedte heeft.

div div

Alle <div>'s die binnen een andere <div> staan. De driehoeken staan elk in een eigen <div>. En die <div>'s staan weer per serie van vier in 'n andere <div>. De enige <div>'s die hieraan voldoen zijn dus de <div>'s waarbinnen de driehoeken staan.

Dat geeft de mogelijkheid om 'n paar instellingen die voor al deze <div>'s hetzelfde zijn hier in één keer op te geven.

float: left;

Zo hoog mogelijk en dan zoveel mogelijk naar links neerzetten. Normaal genomen komt een <div> op een nieuwe regel te staan. Door ze te floaten blijven ze op dezelfde regel staan. Hierdoor komen ook de driehoeken met dezelfde kleur op dezelfde regel te staan, als de ruimte dat toelaat. Als het venster van de browser te smal is om alle driehoeken op één regel te zetten, wordt het teveel gewoon op de volgende regel gezet.

Afbeelding 4: de divs staan niet naast, maar onder elkaar

Normaal genomen wordt een blok-element zoals een <div> automatisch even breed als z'n ouder. Dat zijn hier div#red, div#green, div#blue of div#black, die bij #red, #green, #blue, #black een breedte van 21,5 em hebben gekregen. Deze <div>'s zouden dus ook 21,5 em breed worden. Dat is hier niet de bedoeling.

Om een goede driehoek te kunnen vormen, mag de <div> geen breedte en hoogte hebben. Alleen de borders worden gebruikt om de driehoek te vormen.

Op de afbeelding gedraagt de <div> zich als een normaal blok-element en wordt even breed als z'n ouder. Als je goed kijkt, zie je links en rechts nog steeds dezelfde zijkanten van de driehoeken. Maar in het midden is er een enorm stuk tussen geplaatst, want de border is opeens een stuk langer geworden. Daarom mogen deze <div>'s geen breedte hebben.

(Niet alle driehoeken vervormen, dat is afhankelijk van welke borders zijn gebruikt om de driehoek te vormen.)

Als een blok-element wordt gefloat, wordt het niet meer automatisch even breed als z'n ouder. Het wordt dan niet breder, dan nodig is om de inhoud ervan weer te geven. Aangezien deze <div>'s helemaal geen inhoud hebben, krijgen ze daarom ook geen breedte. Waarmee de breedte is geregeld. Dit is ook de reden dat float hier tot de essentiële css wordt gerekend: het zorgt voor een breedte van 0 px.

Hetzelfde verhaal geldt voor de hoogte: als de <div> een hoogte zou hebben, vervormen veel driehoeken. Een blok-element wordt normaal genomen automatisch precies hoog genoeg om de inhoud ervan, zoals tekst, weer te kunnen geven. Omdat er hier geen inhoud is, krijgt de <div> geen hoogte.

margin: 10px 0 0 10px;

Kleine afstand tussen de <div>'s en daarmee ook tussen de driehoeken.

#red-1

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div div {float: left; margin: 10px 0 0 10px;}

Het element met id="red-1". Dit is de <div> die de meest linkse rode driehoek vormt.

border-top: red solid 3em;

Rode border aan de bovenkant. Als de waarde wordt verhoogd of verkleind, wordt de driehoek hoger of lager.

Als eenheid wordt de relatieve eenheid em gebruikt. Hierdoor zal de hoogte van de driehoek ook veranderen, als de lettergrootte wordt veranderd. Bij zoomen verandert de hoogte altijd, ook bij gebruik van een absolute eenheid als px.

border-right: transparent solid 3em; Afbeelding 5: doorzichtige border rechts even zichtbaar gemaakt

Doorzichtige border aan de rechterkant. Deze border is niet te zien, maar hij is er wel degelijk. In feite is de driehoek dus helemaal geen driehoek, maar een gewone rechthoek. Als de waarde wordt verhoogd of verkleind, wordt de rechter zijkant van de driekant langer of korter en is de driehoek niet meer rechthoekig.

Op de afbeelding is de kleur transparent vervangen door blauw, waardoor te zien is dat de rechterborder inderdaad gewoon aanwezig is. En doordat twee aan elkaar grenzende borders, die even breed zijn, een hoek van 45° krijgen, ontstaat de linker schuine zijkant van de driehoek.

Als eenheid wordt de relatieve eenheid em gebruikt. Hierdoor zal de lengte van de rechter zijkant van de driehoek ook veranderen, als de lettergrootte wordt veranderd. Bij zoomen verandert de lengte altijd, ook bij gebruik van een absolute eenheid als px.

border-bottom: none; Afbeelding 6: met border aan de onderkant

Aan de onderkant is geen border nodig. Als je die toch zou gebruiken, komt er aan de onderkant nog een driehoek bij. Omdat het hier om enkele driehoeken gaat, wordt dat niet gedaan.

Op de afbeelding heeft de border aan de onderkant een groene kleur en een breedte van 10 px gekregen. Hierdoor komt onder de rode driehoek een omgekeerde groene driehoek te staan. Zonder rechte hoeken, want de linker- en rechterborder zijn 3 em breed, en de onderste border slechts 10 px. Door deze verschillende breedtes is ook de hoek tussen de borders hier geen 45°,

border-left: transparent solid 3em;

Doorzichtige border aan de linkerkant. Het verhaal hiervoor is precies hetzelfde als bij border-right iets hierboven, maar dan in spiegelbeeld.

position: relative; z-index: 10;
Afbeelding 7
Afbeelding 7: links heeft de linker driehoek geen hogere z-index. De rechterpunt staat onder de box-shadow van de tweede driehoek. De box-shadow van de linker driehoek staat onder de tweede driehoek.
Rechts heeft de linker driehoek een z-index van 10. De rechterpunt van de linker driehoek staat nu boven de box-shadow van de tweede driehoek. De box-shadow van de linker driehoek staat boven de linkerpunt van de tweede driehoek.

Normaal genomen wordt een later element in de html over een eerder element gezet. Normaal genomen zou daardoor de box-shadow links van de tweede rode driehoek over de eerste rode driehoek worden gezet.

En de box-shadow aan de rechterkant van de eerste rode driehoek zou onder de tweede rode driehoek komen te staan. De afbeelding maakt dit hopelijk iets duidelijker.

Door de eerste driehoek een hogere z-index te geven, komt deze toch boven de tweede driehoek te staan.

Een z-index werkt alleen in sommige omstandigheden, zoals bij een gepositioneerd element. Vandaar de relatieve positie. Omdat voor top en dergelijke niets wordt opgegeven, heeft dit verder geen enkele invloed.

#red-2

{border-top: red solid 6em; border-right: transparent solid 5em; border-bottom: none; border-left: transparent solid 3em;}

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div div {float: left; margin: 10px 0 0 10px;}

Het element met id="red-2". De <div> die de tweede rode driehoek van links vormt.

Dit werkt precies hetzelfde als div#red-1, alleen de maten zijn anders.

#red-3

{border-top: red solid 40px; border-right: none; border-bottom: none; border-left: transparent solid 40px;}

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div div {float: left; margin: 10px 0 0 10px;}

Het element met id="red-3". De <div> die de derde rode driehoek van links vormt.

Dit werkt precies hetzelfde als div#red-1, met twee verschillen: de maten zijn anders en als eenheid wordt niet de relatieve eenheid em, maar de absolute eenheid px gebruikt. Hierdoor verandert de maat van deze driehoek niet mee bij een andere lettergrootte. Bij zoomen verandert de maat wel gewoon mee.

Alle andere driehoeken

Alle andere driehoeken zijn precies hetzelfde opgebouwd, alleen hebben ze 'n andere kleur en zijn de maten anders. De twee linker driehoeken gebruiken als eenheid steeds de relatieve eenheid em, de twee rechts de absolute eenheid px.

#red div

Voor deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div div {float: left; margin: 10px 0 0 10px;}

#red-1 {border-top: red solid 3em; border-right: transparent solid 3em; border-bottom: none; border-left: transparent solid 3em; position: relative; z-index: 10;}

#red-2 {border-top: red solid 6em; border-right: transparent solid 5em; border-bottom: none; border-left: transparent solid 3em;}

#red-3 {border-top: red solid 40px; border-right: none; border-bottom: none; border-left: transparent solid 40px;}

#red-4 {border-top: red solid 80px; border-right: transparent solid 40px; border-bottom: none; border-left: none;}

De <div>'s binnen het element met id="red". De vier <div>'s met de rode driehoeken.

box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.3);

Schaduw aan de <div> geven.

Met behulp van box-shadow kan schaduw worden gegeven aan een element. Als je verder niets opgeeft, is de schaduw precies even groot als het element, waar de schaduw bij hoort. Dat schiet niet echt op, want dat betekent dat de schaduw precies onder het element staat en dus onzichtbaar is. De natte droom van de Gevorderde Geheim Agent, maar niet van een sitebouwer.

Het eerste getal geeft de verplaatsing in horizontale richting aan. Als hier bijvoorbeeld 10px staat, wordt de schaduw 10 px naar rechts verplaatst en steekt 10 px uit aan de rechterkant van de <div>. Bij een negatieve waarde wordt de schaduw naar links verplaatst.

Omdat de waarde hier 0 is, wordt de schaduw niet verplaatst in horizontale richting.

Het tweede getal geeft de verplaatsing in verticale richting aan. Als hier bijvoorbeeld 10px staat, wordt de schaduw 10 px naar omlaag verplaatst en steekt 10 px uit aan de onderkant van de <div>. Bij een negatieve waarde wordt de schaduw naar boven verplaatst.

Omdat de waarde hier 0 is, wordt de schaduw niet verplaatst in verticale richting.

Afbeelding 8: schaduw met alleen blur

Het derde getal geeft de 'blur' aan: de afstand waarover de schaduw vervaagt. Op de afbeelding is de blur 40 px: de schaduw vervaagt over een afstand van 40 px. (De andere drie op de afbeelding gebruikte waarden zijn 0.)

In het voorbeeld zelf is de waarde voor het vervagen 0: geen vervaging, wat een duidelijke, strakke grens van de schaduw oplevert.

De eerste drie waarden zijn 0. Dat betekent dat, tot nu toe, de schaduw precies onder de <div> staat en dus onzichtbaar is. En daarmee een voor een schaduw tamelijk zinloos leven leidt. Dit lost de vierde waarde op: 20px. Dit is de breedte van de schaduw. Omdat horizontaal en verticaal geen verplaatsing is aangebracht en er ook geen vervaging is, levert dit een egale schaduw van 20 px breed aan alle kanten van de <div> op.

Hierdoor is ook duidelijk te zien dat de driehoeken bij een <div> met gewone rechte hoeken horen, want de box-shadow komt gewoon aan de buitenkant van die <div> te staan. Niet aan de buitenkant van de driehoek (die in werkelijkheid uit borders van de <div> is samengesteld).

Uiteindelijk wordt nog een kleur voor de box-shadow opgegeven: rgba(0, 0, 0, 0.3).

Vaak wordt voor 'n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is 't dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enz. Daarbij is A gelijk aan het tientallige 10, B aan 11, enz. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van 'n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(10%, 20%, 100%, 0.3).

Omdat in dit voorbeeld drie keer 0 is opgegeven, levert dit een zwarte kleur op.

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1. Volledig doorzichtig is 0, volledig ondoorzichtig is 1.

Het getal voor het alfa-kanaal wordt als decimale breuk aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je 'n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je 'n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur behoorlijk doorzichtig: 0.3. Hierdoor zie je de driehoeken nog behoorlijk goed door de schaduw heen.

Als geen kleur wordt opgegeven, wordt de waarde van color gebruikt.

#green div

{box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.3);} #blue div {box-shadow: 0 0 0 20px rgba(0, 128, 0, 0.3);} #black div {box-shadow: 0 0 0 20px rgba(0, 0, 255, 0.3);}

Het verhaal voor deze drie eigenschappen is precies hetzelfde als dat bij #red div, alleen is de kleur van de schaduw anders.

rgba(255, 0, 0, 0.3) is doorzichtig rood.

rgba(0, 128, 0, 0.3) is doorzichtig groen.

rgba(0, 0, 255, 0.3) is doorzichtig blauw.