Voorbeelden van <hr>'s die geen aaneengesloten, rechte lijn zijn

Laatst aangepast: 18 september 2015.

Korte omschrijving

Een <hr> hoeft geen rechte lijn te zijn. Met behulp van wat css kan het uiterlijk volledig worden veranderd.

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, kun je bovenaan de pagina de hele handel 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 onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Opmerkingen

In de voorbeelden hier zijn in de <hr> geen achtergrond-afbeeldingen en dergelijke gebruikt, Als je dat wel zou doen, is nog veel meer mogelijk. Voorbeelden daarvan zijn bijvoorbeeld te vinden op smashingmagazine.com. Wat op deze pagina staat is alleen bedoeld om een beetje een idee te geven, wat er mogelijk is met een simpele <hr> en wat css, zonder enig verder hulpmiddel.
In tegenstelling tot de meeste andere voorbeelden is de css hier niet gecombineerd: elke lijn heeft z'n eigen volledige css. Zo staat er bij vrijwel elke <hr> bijvoorbeeld border: none;. Normaal genomen zou ik dat soort dingen combineren, maar in dit geval vond ik het overzichtelijker bij elke lijn de volledige css te beschrijven. Anders blijf je heen en weer schieten tussen de betreffende <hr> en een beschrijving elders.

Omdat dit wel heel erg veel herhalingen oplevert, staat bij sommige eigenschappen bij de <hr> zelf 'n korte beschrijving. Voor een uitgebreidere beschrijving wordt dan verwezen naar een apart verhaal over 'n bepaalde eigenschap.
Om de verschillende <hr>'s enigszins makkelijk aan de uitleg te kunnen koppelen, is de id gewoon het volgnummer van de <hr>. #vijf bijvoorbeeld hoort bij de vijfde <hr>.

(En dat nummer 1 mist, is dus geen vergissing. Dat is een gewone standaardlijn, zonder enige css.)
Als je in een desktopbrowser met behulp van zoomen het beeld vergroot, heeft dit hetzelfde effect, als wanneer de pagina in een kleiner browservenster wordt getoond. Je kunt hiermee dus kleinere apparaten zoals een tablet of een smartphone simuleren. Maar het blijft natuurlijk wel een simulatie: het is nooit hetzelfde als testen op een écht apparaat. Zo kun je bijvoorbeeld aanrakingen alleen echt testen op een echt touchscreen.

Inmiddels hebben veel browsers mogelijkheden voor het simuleren van weergave op een kleiner scherm in de ontwikkelgereedschappen ingebouwd. Ook dit blijft een simulatie, maar geeft vaak wel een beter beeld dan zoomen.

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.

Achterliggend idee

Een <hr> wordt relatief weinig gebruikt. Oorspronkelijk was het een horizontale lijn, waarvan het uiterlijk een beetje kon worden aangepast. Je kon er 'n kleurtje aan geven, of wat (lelijke) schaduw, dat was het wel zo'n beetje.

Feitelijk was de <hr> een element om het uiterlijk van de pagina te veranderen, net zoals verouderde tags als <font>. Echte semantische betekenis had het niet.

Als html goed wordt gebruikt, hebben elementen een semantische betekenis. Een <h1> bijvoorbeeld is automatisch een belangrijke kop, ongeacht wat er verder precies in staat, of hoe de <h1> er verder uitziet. Gewoon omdat het een <h1> is. Een <img> is een afbeelding. Mooi of lelijk of klein of groot, maar het is altijd een afbeelding. Een <ul> is altijd een opsomming. Enz.

Die semantische betekenis is belangrijk voor schermlezers en dergelijke. Bij een <h1> meldt de schermlezer op een of andere manier dat het hier om een <h1> gaat, zodat de gebruiker weet dat het om een belangrijke kop gaat. De spider van een zoekmachine is redelijk te vergelijken met een blinde, dus ook voor zoekmachines is een juist gebruik van de semantische betekenis belangrijk. Als je het niet voor de toegankelijkheid wilt doen, kun je het dus uit egoïstische motieven doen.

Een <hr> was wel altijd een lijn, maar dat zei verder eigenlijk helemaal niets over de semantische betekenis. Die lijn kon de scheiding zijn tussen twee hoofdstukken, of 'n onbelangrijk lijntje van 10 px lang om 'n gaatje in een tabel te vullen.

In html5 heeft de <hr> ook een semantische betekenis gekregen: het is een scheiding tussen bijvoorbeeld twee scènes in een toneelstuk. Niet zo sterk als een <section>, maar meer een scheiding bínnen een <section>. Op de site gebruik ik bijvoorbeeld een <hr> op de navigatiepagina's als scheiding binnen de beschrijving van de betreffende pagina. Boven de <hr> staan de afzonderlijke onderwerpen die bij de afzonderlijke links horen, onder de <hr> staat een algemeen verhaal over de pagina zelf.

Omdat de opmaak inmiddels volledig met css kan worden gedaan, is er geen enkele reden, waarom de <hr> er als een lijn uit zou moeten zijn. In VoiceOver wordt een <hr> gelezen als 'scheidingsteken', en in NVDA als 'scheiding'. (TalkBack negeert het, maar dat zal ooit ook wel veranderen.) Een <hr> blijft altijd een scheiding, ook als je de lijn vervangt door een achtergrond-afbeelding van de kerstman. Dat maakt voor de semantische betekenis niets uit.

Alle lijnen op deze pagina worden op dezelfde manier voorgelezen door VoiceOver en NVDA, ongeacht het uiterlijk. Maar juist omdat ze worden voorgelezen, is het wel belangrijk een <hr> alleen te gebruiken, als er echt een of andere scheiding is.

Als je verder niets verandert aan een <hr>, wordt die in alle browsers als een horizontale lijn weergegeven. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder. Bij de meeste <hr>'s is dan ook geen breedte opgegeven.

Met border: none; haal je die standaard horizontale lijn weg. Waarmee de <hr> volledig onzichtbaar is geworden. Vervolgens kun je met behulp van css het uiterlijk van de <hr> volledig aanpassen, net zoals bij elk ander element. Je kunt bijvoorbeeld aan één kant de border weer terugzetten en deze ronde hoeken geven. Of met behulp van een gradiënt een achtergrond aan de <hr> geven.

Bij een aantal <hr>'s is gebruik gemaakt van met behulp van ::before en/of ::after aangemaakte pseudo-elementen. Waarmee je in feite de enkele <hr> hebt uitgebreid tot drie elementen, zonder de semantische betekenis te veranderen. Die pseudo-elementen kun je gebruiken om extra lijnen toe te voegen, die je bijvoorbeeld afwijkende ronde hoeken kunt geven.

In de meeste voorbeelden op deze pagina zijn dingen als zoomen, resolutie, en dergelijke geen enkel probleem. Een cirkel van 50 px blijft gewoon een cirkel van 50 px, op wat voor scherm dan ook. Eventuele afwijkingen in diverse browsers, problemen met zoomen, en dergelijke zijn te vinden bij Bekende problemen (en oplossingen).

De voorvoegsels -moz-, -ms- en -webkit-

Voordat een nieuwe css-eigenschap wordt ingevoerd, is er in de regel een experimentele fase. Browsers passen het dan al toe, maar met een aangepaste naam. Tijdens deze fase kunnen problemen worden opgelost en worden veldslagen uitgevochten over hoe de standaard precies moet worden toegepast.

Als iedereen het overal over eens is en alle problemen zijn opgelost, wordt de officiële naam uit de standaard gebruikt.

De belangrijkste browsers hebben elk een eigen voorvoegsel:

Firefox: -moz-, naar de maker: Mozilla.

Op webkit gebaseerde browsers, zoals Google Chrome en Safari: -webkit-.

(Google Chrome is van webkit overgestapt op een eigen weergave-machine: blink. Blink gaat geen voorvoegsels gebruiken. Het is echter een aftakking van webkit, dus het zal nog wel even duren voor -webkit- hier helemaal uit is verdwenen. Ook Opera gebruikt inmiddels Blink, inclusief het daar nog in gebruikte -webkit-. Hierdoor is het tot voor kort door Opera gebruikte voorvoegsel -o- niet meer nodig.)

Internet Explorer: -ms-, naar de maker: Microsoft.

In dit voorbeeld worden transform, linear-gradient, repeating-linear-gradient en radial-gradient gebruikt.

Zodra de experimentele fase voorbij is, wordt het voorvoegsel weggelaten. Omdat dat moment niet bij alle browsers hetzelfde is, zet je nu ook al de officiële naam erbij. Deze wordt als laatste opgegeven. Bijvoorbeeld Android browser herkent -webkit-linear-gradient. Zodra Android browser linear-gradient gaat herkennen, zal dit -webkit-linear-gradient overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

transform:

Op dit moment moet je nog het volgende schrijven:

{-ms-transform: ...; -webkit-transform: ...; transform: ...;}

In de toekomst kun je volstaan met:

{transform: ...;}

linear-gradient:

Op dit moment moet je nog het volgende schrijven:

{-webkit-linear-gradient: ...; linear-gradient: ...;}

In de toekomst kun je volstaan met:

{linear-gradient: ...;}

Internet Explorer 9 kent linear-gradient helemaal niet, die negeert deze regel gewoon.

(De syntax van linear-gradient is nogal fors gewijzigd tijdens de proefperiode. Voor oudere op webkit gebaseerde browsers was er een syntax die begon met -webkit-gradient(linear. Die gebruik ik niet meer, want er zijn steeds minder browsers die die syntax gebruiken. Die krijgen gewoon geen gradiënt, maar een horizontale rechte lijn.)

repeating-linear-gradient

Op dit moment moet je nog het volgende schrijven:

{-webkit-repeating-linear-gradient: ...; repeating-linear-gradient: ...;}

In de toekomst kun je volstaan met:

{repeating-linear-gradient: ...;}

Internet Explorer 9 kent repeating-linear-gradient helemaal niet, die negeert deze regel gewoon.

radial-gradient

Op dit moment moet je nog het volgende schrijven:

{-webkit-radial-gradient: ...; radial-gradient: ...;}

In de toekomst kun je volstaan met:

{radial-gradient: ...;}

Internet Explorer 9 kent radial-gradient helemaal niet, die negeert deze regel gewoon.

Inmiddels is de algemene mening dat 'vendor prefixes', zoals deze voorvoegsels in het Engels heten, geen groot succes zijn. Eén van de grootste problemen: veel sitemakers gebruiken alleen de -webkit-variant. Daar kwamen ze in het verleden nog mee weg, omdat Apple op mobiel zo'n beetje 'n monopolie had. Inmiddels is dat niet meer zo, maar deze gewoonte bestaat nog steeds. Waardoor 'n site alleen in op webkit georiënteerde browsers goed is te bekijken.

Dit is zo'n groot probleem dat andere browsers soms de variant met -webkit- ook maar zijn gaan implementeren, naast de standaard. Want als 'n site het niet goed doet in 'n bepaalde browser, krijgt in de regel niet de site maar de browser de schuld.

Voorlopig zijn we echter nog niet van deze voorvoegsels af. Als je ze gebruikt, gebruik dan álle varianten, en eindig met de variant zonder voorvoegsel, zoals die uiteindelijk ooit gebruikt gaat worden. Als je alleen de -webkit-variant gebruikt, ben je in feite 'n onbetaalde reclamemaker voor Apple.

Semantische elementen en WAI-ARIA

Deze twee onderwerpen zijn samengevoegd, omdat ze veel met elkaar te maken hebben.

Semantische elementen

De meeste elementen die in html worden gebruikt, hebben een semantische betekenis. Dat wil zeggen dat je aan de gebruikte tag al (enigszins) kunt zien, wat voor soort inhoud er in het element staat. In een <h1> staat een belangrijke kop. In een <h2> staat een iets minder belangrijke kop. In een <p> staat een alinea. In een <table> staat een tabel (en geen lay-out, als het goed is!). Enz.

Door het op de goede manier gebruiken van semantische elementen, kunnen zoekmachines, schermlezers, enz. de structuur van een pagina begrijpen. De spider van een zoekmachine is redelijk te vergelijken met een blinde. Het is dus ook in je eigen belang om semantische elementen zo goed mogelijk te gebruiken. Een site die toegankelijk is voor mensen met een handicap, is in de regel ook goed te verwerken door een zoekmachine en maakt dus een grotere kans gevonden en bezocht te worden.

Als het goed is, wordt het uiterlijk van de pagina bepaald met behulp van css. Het uiterlijk staat hierdoor (vrijwel) los van de semantische inhoud van de pagina. Met behulp van css kun je een <h1> heel klein weergeven en een <h6> heel groot, terwijl schermlezers, zoekmachines, en dergelijke nog steeds weten dat de <h1> een belangrijke kop is.

Slechts enkele elementen, zoals <div> en <span>, hebben geen semantische betekenis. Daardoor zijn deze elementen uitstekend geschikt, om met behulp van css het uiterlijk van de pagina aan te passen: de semantische betekenis verandert niet, maar het uiterlijk wel. Voor een schermlezer of zoekmachine verandert er (vrijwel) niets, voor de gemiddelde bezoeker krijgt het door de css een heel ander uiterlijk.

(De derde laag, naast html voor de inhoud en css voor het uiterlijk, is JavaScript. Die zorgt voor de interactie tussen site en bezoeker. De min of meer strikte scheiding tussen css en html aan de ene kant en JavaScript aan de andere kant is met de komst van css3 en html5 veel vager geworden. Je kunt nu bijvoorbeeld ook met css dingen langzaam verplaatsen en met html deels de invoer in formulieren controleren.)

In html 4.01 en eerder had een <hr> geen semantische betekenis. Het was gewoon een horizontale lijn, al dan niet beperkt opgeleukt met behulp van css.

In html5 heeft de <hr> wel een semantische betekenis: het is een scheiding tussen twee delen op het niveau van een <p>, zoals een nieuwe scène in een toneelstuk. Het is een minder sterke scheiding dan die van het html5-element <section>.

Als je een <hr> alleen voor de sier gebruikt, zorg je voor verwarring bij schermlezers en dergelijke, omdat die een <hr> aankondigen met iets als 'scheiding'.

WAI-ARIA-codes

WAI-ARIA wordt vaak ingekort tot ARIA. Voluit betekent het Web Accessibility Initiative – Accessible Rich Internet Applications.

Deze codes zijn speciaal bedoeld voor schermlezers en dergelijke. Er zijn er enkele honderden, waaronder role="presentation". Als je dit attribuut toevoegt aan een element, wordt dit genegeerd door schermlezers. Althans: de semantische betekenis wordt genegeerd:

<h1 role="presentation">Boehoe, ik ben niets</h1>

Een schermlezer kondigt dit niet aan als een belangrijke kopregel, maar zal wel de tekst 'Boehoe, ik ben niets' voorlezen. Als het goed is, want veel schermlezers zijn peperduur en worden daarom niet vaak vervangen door nieuwere versies.

Het best kun je een element gebruiken, waar het voor is bedoeld. Maar als je beslist een <hr> wilt gebruiken voor een lijn of zoiets, zonder dat het een scheiding is, zou je op z'n minst dit attribuut moeten toevoegen:

<hr role="presentation">

De code aanpassen aan je eigen ontwerp

Als je dit voorbeeld gaat aanpassen voor je eigen site, houdt het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.
Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.

Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft. Als je beslist iets van Microsoft wilt gebruiken, schaf dan (voor 'n fikse prijs) een nieuwer programma aan, dat zich wel aan de standaarden houdt.

Ook OpenOffice en LibreOffice leveren een uiterst beroerd soort html af. Tekstverwerkers met al hun toeters en bellen zijn gewoon niet geschikt om websites mee te bouwen.

Je kunt natuurlijk ook een goed gratis programma gebruiken. Links naar dat soort programma's vind je op de pagina met links onder Gereedschap → wysiwyg-editor.

Maar het allerbeste is om gewoon zelf html, css, enz. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.
Als je 'n site maakt in Firefox, Opera, Safari, Google Chrome of Edge, is er 'n hele grote kans dat hij in alle browsers werkt. Ik geef de voorkeur aan Firefox, omdat het de enige grote browser is die niet bij een bedrijf hoort dat vooral op je centen of je data uit is.

Google Chrome wordt ook door veel mensen gebruikt, maar ik heb dus wat moeite met hoe Google je hele surfgedrag, je schoenmaat en de kleur van je onderbroek vastlegt. Daarom gebruik ik Google Chrome zelf alleen om in te testen.
Het allereerste dat je moet invoeren, is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.

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.
Gebruik een 'strict' doctype of (beter!) het doctype voor html5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe. Het doctype voor html5 is uiterst simpel: <!DOCTYPE html>.

Het transitional doctype staat talloze tags toe, die in html5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.

Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.
Als tweede voer je de charset in. Dit vertelt de browser, welke tekenset er gebruikt moet worden, zodat letters met accenten en dergelijke overal goed worden weergegeven. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren. In html5 is het simpele <meta charset="utf-8"> voldoende.
Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden, waar ikzelf op test. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Op de pagina met links staan onder de kopjes Gereedschap → Meerdere versies van Internet Explorer draaien en Gereedschap → Weergave testen 'n aantal links die daarbij kunnen helpen. De compatibiliteitsweergave in Internet Explorer is niet geschikt om te testen, omdat deze enigszins verschilt van de weergave in échte browsers.
Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan met het alleen veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds, of alles nog goed werkt.
Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen, zoals je wilt. Ga daarna pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok op de plaats, waar uiteindelijk het menu komt te staan.

Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Zorg eerst dat de blokken werken, zoals je wilt. Dan zul je het daarna gelijk merken, als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat verstoren. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers, of alles nog wel goed werkt.

Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enz., tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet ongemerkt drie regels onderaan naar 't virtuele walhalla zijn verhuisd.

Om de breedte te vullen, kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig, om aan 't einde (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.
Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, zou ik je aanraden de verschillende delen een achtergrondkleur te geven. Je ziet dan goed, waar 'n deel precies staat. Een achtergrondkleur heeft – anders dan bijvoorbeeld een border – verder geen invloed op de lay-out, dus die is hier heel geschikt voor.
Als je instellingen verandert in de style, verander er dan maar één, hooguit twee tegelijk. Als je er zeventien tegelijk verandert, is de kans groot dat je niet meer weet, wat je hebt gedaan. En dat je 't dus niet meer terug kunt draaien.
margin, padding en border worden bij de hoogte en breedte van het element opgeteld. Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.

css geeft de mogelijkheid om margin, padding en border bínnen de breedte en hoogte van de inhoud te zetten met behulp van box-sizing, als je dat handiger vindt.
In plaats van een absolute eenheid als px kun je ook een relatieve eenheid gebruiken, met name em. Voordeel van em is dat een lettergrootte, regelhoogte, en dergelijke in em in alle browsers kan worden veranderd. Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken. Voor weergave in mobiele apparaten zijn relatieve eenheden als em vrijwel altijd beter dan vaste eenheden als px.

Zoomen kan trouwens altijd, ongeacht welke eenheid je gebruikt.
Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.

Valiwie???

Valideren is het controleren van je html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.

Je kunt je css en html zowel valideren, als 't online staat, als wanneer 't nog in je computer staat.

html kun je valideren op: validator.w3.org/nu.

css kun je valideren op: jigsaw.w3.org/css-validator.

Valideren kan helpen om gekmakende fouten te vinden. Valide code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valide code is over twintig jaar ook nog te bekijken.

Valideren moet trouwens ook niet worden overdreven. Het is een hulpmiddel om echte fouten te vinden, meer niet. Het gaat erom dat je site goed werkt, niet dat je het braafste kind van de klas bent. Als de code niet valideert, maar daar is een goede reden voor, is daar niets op tegen.

Op deze site is alle css en html gevalideerd. Als de code niet helemaal valide is (wat regelmatig voorkomt), staat daar onder Bekende problemen (en oplossingen) de reden van.

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

Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst wordt gebruikt, als afbeeldingen niet kunnen worden getoond of gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien, als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.

Als een afbeelding alleen maar voor de sier wordt gebruikt, zet je daarbij alt="", om aan te geven dat de afbeelding niet belangrijk is voor het begrijpen van de tekst of zo.
Als uit de tekst bij een link niet duidelijk blijkt, waar de link naartoe leidt, gebruik dan een title bij de link. Een tekst als 'pagina met externe links' is waarschijnlijk duidelijk genoeg, een tekst als alleen 'links' mogelijk niet. Een duidelijke zwart-witregel is niet te geven, omdat dit ook van tekst en dergelijke in de omgeving van de link afhangt.
Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze geven te veel problemen omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk, welke toetsen het zijn.

Op zichzelf zijn accesskeys een heel goed idee. Maar helaas zijn ze ook in html5 volstrekt onvoldoende gedefinieerd. Er is nog steeds geen standaard voor de meest gebruikelijke accesskeys, zoals Zoek of Home.

Er is nog steeds niet vastgelegd, hoe accesskeys zichtbaar gemaakt kunnen worden. Voor de makers van browsers zou dit 'n relatief kleine moeite zijn, voor de makers van 'n site is het bergen extra werk.

Voor mij redenen om accesskeys (vrijwel) niet te gebruiken. Ik kan me wel voorstellen dat ze op sites die gericht zijn op 'n specifieke groep gebruikers nog enig nut kunnen hebben, maar voor algemene sites zou ik zeggen: niet gebruiken.
Met behulp van de Tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door links, invoervelden, en dergelijke lopen. Elke tab brengt je één link, invoerveld, en dergelijke verder, Shift+Tab één plaats terug. Met behulp van tabindex kun je de volgorde aangeven waarin de Tab-toets werkt. Zonder tabindex wordt de volgorde van de html aangehouden bij gebruik van de Tab-toets, maar soms is een andere volgorde logischer.

In principe is het beter, als tabindex niet nodig is, maar gewoon de volgorde van de html wordt aangehouden. Bij verkeerd gebruik kan tabindex heel verwarrend zijn. Het is niet bedoeld om van de pagina een hindernisbaan voor kangoeroes te maken, waarop van beneden via links over rechts naar boven wordt gesprongen.
In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn schermlezers en dergelijke zo sterk verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als die op het scherm, omdat het anders juist verwarrend kan werken.

Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar in speciale programma's zoals tekstbrowsers en schermlezers, want die kijken gewoon naar wat er in de broncode staat.

Zo'n link staat boven menu, header, en dergelijke en linkt naar de eigenlijke inhoud van de pagina, zodat mensen met één toetsaanslag naar de eigenlijke inhoud van de pagina kunnen gaan.

Een skip-link is ook nuttig voor gebruikers van de Tab-toets. Zodra de normaal genomen onzichtbare link door het indrukken van de Tab-toets focus krijgt, kun je hem op het scherm plaatsen, waardoor hij zichtbaar wordt. Bij een volgende tab wordt hij dan weer buiten het scherm geplaatst en is dus niet meer zichtbaar, zodat de lay-out niet wordt verstoord.
Van oorsprong is html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.

De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een externe stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de <head> van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf: <div style="...">.)
Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enz. Schermlezers en dergelijke kunnen van kop naar kop springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.

Dit geldt voor al dit soort structuurbepalende tags.

Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.
<table> is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel 'n lagere plaats in een zoekmachine.
Frames zijn een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. <iframe>'s hebben voor een deel dezelfde nadelen. Eén van die nadelen is dat de verschillende frames voor zoekmachines, schermlezers, en dergelijke als los zand aan elkaar hangen, omdat ze los van elkaar worden weergegeven. Ze staan wel naast elkaar op het scherm, maar er zit geen verband tussen.

Als je 'n stuk code vaker wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, voeg dat dan in met PHP of SSI. Dan wordt de pagina niet in de browser, maar al op de server samengesteld. Hierdoor zien zoekmachines, schermlezers, en dergelijke één pagina, net zoals wanneer je maar één pagina met html zou hebben geschreven.
Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van lang="..". Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal. Maar bij enigszins 'normale' teksten hoor je een taalwisseling aan te geven.
Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="ten opzichte van">t.o.v.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>t.o.v.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n schermlezer 't.o.v.' uit gaat spreken als 'tof', en 'n zoekmachine kan er ook geen chocola van maken.
De spider van 'n zoekmachine, schermlezers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina, als de plaatjes worden weggehaald. Hetzelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht.

Op Linux kun je met Lynx kijken, hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op invisible-island.net/lynx.

Ook kun je in Windows het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een tekstbrowser en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk.

Ten slotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele.

toptal.com/designers/colorfilter Laat zien hoe een kleurenblinde de site ziet. Engelstalig.

wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Engelstalig.

Op de pagina met links kun je onder Toegankelijkheid links naar testen en dergelijke vinden.

Specifiek voor dit voorbeeld

Zonder css zie je gewoon horizontale lijnen. De <hr> vult automatisch de volle breedte van het element, waar de <hr> in staat.

Mits alleen gebruikt voor scheidingen, is een <hr> geen probleem. TalkBack negeert het (nog), NVDA noemt de <hr> 'scheiding' en VoiceOver noemt de <hr> 'scheidingsteken'. Daarmee wordt gelijk duidelijk, waarom je een <hr> niet alleen voor de sier moet gebruiken, maar alleen als scheiding tussen verschillende delen van de tekst en dergelijke. Voor de sier kun je beter iets als een border gebruiken.

Als je toch beslist een <hr> wilt misbruiken voor een sierlijn zonder verder enige functie, lees dan eerst Semantische elementen en WAI-ARIA voor tips om de door jou veroorzaakte kommer en kwel enigszins te beperken.

Getest in

Laatst gecontroleerd op 18 september 2015.

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 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 onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Windows 7:
Firefox, UC Browser, Google Chrome, Internet Explorer 9 en 10, in meerdere resoluties.
Windows 8.1:
Bureaublad-versie: Firefox, UC Browser, Google Chrome en Internet Explorer 11, in meerdere resoluties.
Startscherm-versie: Internet Explorer 11.
OS X:
Firefox, Safari en Google Chrome, in meerdere resoluties. In Safari is ook de Reader-weergave getest.
Linux:
Firefox en Google Chrome, in meerdere resoluties.
Windows Phone 8.1 in een resolutie van 800x480 (Nokia Lumia 520):
Internet Explorer (portret en landschap).
UC Browser (portret en landschap).
iPad met iOS 9 in een resolutie van 1024x768 (MC979NF):
Safari (reader-weergave aan/uit, portret en landschap).
Chrome for IOS (portret en landschap).
UC Browser (portret en landschap).
Android 4.1.2 in een resolutie van 800x480 (Samsung Galaxy Core i8620):
Chrome, Android browser, UC Browser en Firefox (alle portret en landschap).
Android 4.4.2 in een resolutie van 1280x800 (Samsung Tab 3):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).

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.

Ook op Windows XP kunnen mensen surfen met Firefox, Opera of Google Chrome, dus ook daar zijn mensen niet afhankelijk van Internet Explorer 8. 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 is getest met een touchscreen, met een combinatie van toetsenbord en touchpad, en met een combinatie van toetsenbord en muis.

Op de desktop is 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 OSX.

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.

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

Internet Explorer 9

Internet Explorer kent geen gradiënten. Met een zogenaamd filter is een gradiënt enigszins te imiteren in oudere versies van Internet Explorer, maar dat ziet er toch anders uit dan een echte gradiënt en is hier niet gedaan.

De elfde <hr> is hierdoor een grijze balk met afgeronde hoeken. De veertiende, vijftiende en zestiende <hr> zijn een gewone rechte lijn. De zeventiende <hr> is een grijze balk. De twintigste <hr> heeft geen rode ronde stippen binnen de cirkels aan weerszijden van de lijn.

Verschillen in weergave

Het gaat hier om kleine, niet ernstige verschillen in weergave tussen diverse browsers. Dit heeft vermoedelijk te maken met dingen als het afronden van hoeken.

De vijfde <hr> is iets korter in alle browsers op iOS, in Safari op OS X en in Android browser.

De zesde en zevende <hr> zijn iets korter in Android browser.

Android browser

In Android browser zit in de twaalfde <hr> een kier tussen de krullen en de horizontale lijn. Waardoor dat komt, is volslagen onduidelijk. 't Kreng is er nog niet met tien Afrikaanse olifanten uit te meppen, wat je ook probeert.

Zoomen

Bij uitzoomen (verkleinen), verdwijnen sommige lijnen. Dit heeft te maken met afronden. Als je 'n lijn van 1 px breedte gaat verkleinen, wordt die in sommige browsers op 'n gegeven moment afgerond tot 0 px en wordt daarmee onzichtbaar. Dit verschilt per browser en, binnen dezelfde browser, per besturingssysteem. Afhankelijk van de browser treedt het op bij een verkleining vanaf 55% tot 70%. Eigenaardig genoeg komt de lijn soms weer terug, als je weer verder uitzoomt.

Dit is trouwens geen specifiek probleem voor de lijnen in dit voorbeeld, het kan zich ook voordoen bij smalle borders en dergelijke.

Wijzigingen

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

18 september 2015:

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.

tekst-105-dl.html: de pagina met de lijnen.

tekst-105.pdf: deze uitleg (aangepast aan de inhoud van de download).

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

105-css-dl:

tekst-105-dl.css: stylesheet voor tekst-105-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 onderstippeld blauw. 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.

Als je dit lastig vindt, kun je bovenaan de pagina de hele handel 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 (ä 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 past de breedte van de <div> met de lijnen zich aan de breedte van het venster aan: nooit breder dan het venster. En omdat een <hr>, als geen breedte is opgegeven, even breed wordt als die <div>, blijven ook de lijnen netjes binnen het venster. Alleen bij border-radius zijn soms maten in px opgegeven, die niet binnen een smal venster passen. Maar ronde hoeken worden automatisch verkleind, als ze niet binnen het element passen. Indirect past de volledige pagina zich dus aan smallere vensters aan.

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.

<link rel="stylesheet" href="105-css-dl/tekst-105-dl.css">

Dit is een koppeling naar een externe stylesheet (stijlbestand), waarin de css staat. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld. Je moet uiteraard de naam van en het pad naar de stylesheet aanpassen aan de naam en plaats waar je eigen stylesheet staat.

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 in één enkele stylesheet aan te brengen, in plaats van in elke pagina apart. Op een grotere site kan dit ontzettend veel werk schelen. Bovendien hoeft de browser zo'n externe stylesheet maar één keer te downloaden, ongeacht hoeveel pagina's er gebruik van maken. Zou je de css in elke pagina opnieuw aanbrengen, dan worden de te downloaden bestanden veel groter.

In dit voorbeeld heeft een extern stylesheet eigenlijk geen nut, omdat er maar één pagina is die dit stylesheet gebruikt. In dit geval kun je de css beter in de <head> van de html-pagina zelf zetten. Voor de omvang maakt het hier niets uit, want de css wordt hoe dan ook altijd precies één keer gedownload, en nooit vaker. Voor het onderhoud maakt het ook geen verschil, want ook hier hoef je de css maar op één plaats te wijzigen. Maar het scheelt wel een extra aanroep naar de server, omdat geen apart stylesheet hoeft te worden gedownload.

Dat opnemen in de <head> gaat heel simpel: je kopieert gewoon het hele stylesheet en zet die bovenin de <head>, tussen <style> en </style>:

<style> body {color: black;} (...) rest van de css (...) div {color: red;} </style>

Maar zodra een stylesheet op meerdere pagina's wordt gebruikt, wat meestal het geval zal zijn, is een extern stylesheet beter.

(De reden dat er toch een extern stylesheet is, terwijl ik hierboven omstandig beweer dat dat in dit voorbeeld eigenlijk geen nut heeft: overzichtelijkheid. Nu kun je html en css los van elkaar bekijken.)

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 onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Als je dit lastig vindt, kun je bovenaan de pagina de hele handel 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 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.)

Uitgebreide beschrijvingen van een eigenschap

border-radius

Met behulp van border-radius kunnen ronde hoeken worden aangebracht. De naam border-radius is nogal ongelukkig gekozen, omdat deze suggereert dat alleen borders ronde hoeken zouden kunnen krijgen. Dat is niet zo. Ook achtergronden, schaduwen, en nog tal van andere eigenschappen kunnen met behulp van border-radius ronde hoeken krijgen.

border-radius geldt voor alle vier de hoeken van een element. (css kent, op dit moment, alleen rechthoekige en vierkante elementen.) Daarnaast zijn er eigenschappen voor de afzonderlijke hoeken: border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius.

Verderop in dit hoofdstukje worden voorbeelden gegeven met in dit voorbeeld gebruikte combinaties van allerlei waarden, hier eerst de algemene regels.

border-radius is eigenlijk een zogenaamde 'shorthand' (een Nederlandse naam bestaat niet) voor de vier eigenschappen voor de afzonderlijke hoeken. Een 'shorthand' is een verkorte manier van schrijven. Een tamelijke simpele is die voor border:

border: black solid 1px;

is de 'shorthand', de verkorte versie van:

border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px;

Is exact hetzelfde als

border: black solid 1px;

De natte droom van Dijsselbloem: dat je zoveel kunt bezuinigen. Enige verschil met Dijsselbloem en kornuiten: dit treft niet voornamelijk de zwakkeren. Van deze bezuiniging heeft iedereen alleen maar voordeel. Hmmm, ik schijn weer wat af te dwalen. Ja, wat wil je ook met zo'n regering...

Hieronder worden eerst de eigenschappen voor de afzonderlijke hoeken beschreven, daarna de shorthand border-radius.

border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius

Voor deze vier eigenschappen is de syntax exact hetzelfde. Ze verschillen alleen in de hoek, waarop ze betrekking hebben.

Voor elke ronde hoek kun je twee waarden opgeven: de ronding in horizontale richting en de ronding in verticale richting. Als je maar één waarde opgeeft, geldt die voor beide richtingen.

border-top-left-radius: 10px 20px;

In horizontale richting is de ronding 10 px breed, in verticale richting 20 px hoog. Dit levert een enigszins staande ronde hoek op.

border-top-right-radius: 10px;

Er is maar één waarde opgegeven, daarom is de ronding hier zowel in horizontale als in verticale richting 10px: volmaakt cirkelvormig. Als je alle vier de hoeken deze waarde zou geven en het element is 20 px hoog en breed, krijg je inderdaad een volmaakte cirkel.

border-bottom-right-radius: 30px 10px;

In horizontale richting is de ronding 30 px, in verticale richting 10 px. Dit levert een enigszins liggende ronde hoek op.

Je kunt per hoek twee waarden opgeven. En die twee waarden mogen voor elke ook nog 'ns verschillen. Wat een totaal van acht waarden oplevert. Dit geeft de mogelijkheid om allerlei vormen te maken. Van een brave welopgevoede cirkel tot een volslagen anarchistische op hol geslagen woeste maniak. (Waarmee ik zeker niet wil suggereren dat alle anarchisten op hol geslagen woeste maniakken zijn, of dat alle op hol geslagen woeste maniakken anarchisten zijn.)

Enkele voorbeelden van een <div> met afgeronde hoeken, waarbij de niet-relevante code is weggelaten:

width: 400px height: 400px; border-top-left-radius: 100px; border-top-right-radius: 30px 100px; border-bottom-right-radius: 100px 30px; border-bottom-left-radius: 200px;

Deze <div> is 400 px breed en hoog. De linkerbovenhoek heeft maar één waarde, waardoor de ronding zowel horizontaal als verticaal 100 px is: een kwart cirkel.

De rechterbovenhoek heeft horizontaal een ronding van 30 px, verticaal van 100 px. Dit levert een min of meer staande hoek op. Bij de rechteronderhoek zijn de waarden juist omgekeerd. wat een liggende hoek oplevert.

De linkeronderhoek heeft weer één waarde: 200 px: een kwart cirkel met horizontaal en verticaal een ronding va 200 px. Dit is precies de helft van de breedte en hoogte van de <div>.

Als je alle vier de hoeken deze waarden zou geven, zou de <div> volledig cirkelvormig zijn, zoals in het volgende voorbeeld:

height: 200px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;

(Dit kan veel simpeler worden geschreven dan met vier aparte regels, maar dat komt later nog aan de orde.)

Elke hoek heeft maar één waarde, dus horizontaal en verticaal is de ronding 100 px. Dat is precies de helft van de breedte en hoogte van de <div>, waardoor deze een cirkel wordt.

Nog twee voorbeelden:

width: 400px; height: 200px; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-right-radius: 70px; border-bottom-left-radius: 70px;

Alle hoeken horizontaal en verticaal even groot: 70 px. Omdat de <div> breder en hoger is dan 140 px (twee rondingen naast of boven elkaar), levert dit een rechthoek met ronde hoeken op.

width: 400px; height: 100px; border-top-left-radius: 200px 50px; border-top-right-radius: 200px 50px; border-bottom-right-radius: 200px 50px; border-bottom-left-radius: 200px 50px;

Horizontaal zijn alle hoeken de helft van de breedte van de <div>, en verticaal de helft van de hoogte van de <div>. Dat levert een ellips op.

Waarden

De opgegeven waarde bij border-radius moet altijd meer dan 0 zijn. Een negatieve hoek bestaat niet. (Het zou leuk zijn als een negatieve waarde een hoek naar buiten opleverde, maar dat is niet zo.)

Een waarde van 0 is zinloos, want een hoek met een ronding van 0 graden is een gewone rechte lijn. Ook als maar één waarde 0 is, heeft dat geen nut, omdat een hoek van bijvoorbeeld 100 px breed en 0 px hoog ook een rechte lijn is.

De breedte of hoogte ronding van een hoek kan nooit groter zijn dan de breedte of hoogte van het element. Als het element 100 px breed is, kan een hoek breder dan 100 px zijn. Twee naast elkaar liggende hoeken kunnen ook nooit meer zijn dan de breedte of hoogte van het element.

Als de waarde bij 'n hoek, of de gezamenlijke waarde van twee naast elkaar liggende hoeken, toch groter is dan de breedte of hoogte van het element, wordt die waarde teruggebracht tot wat in het element past. Dat geldt niet alleen voor de rondingen die te groot zijn: álle hoeken worden aangepast, wat de volgende voorbeelden hopelijk iets kunnen verduidelijken:

width: 300px; height: 300px; border-top-left-radius: 150px; border-top-right-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 150px;

Gewoon een simpele cirkel. Alle hoeken zijn in beide richtingen precies de helft van de breedte en hoogte van de <div>.

Nu ga ik de horizontale richting van de linkerbovenhoek 450 px maken. Omdat de rechterbovenhoek horizontaal een ronding van 150 px heeft, wordt het totaal aan de bovenkant hierdoor 600 px: twee keer zoveel als de breedte van de <div>:

width: 300px; height: 300px; border-top-left-radius: 450px 150px; border-top-right-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 150px;

Alleen de linkerbovenhoek is veranderd, en daarvan alleen de horizontale waarde, want de verticale ronding was al 150 px. Toch is de hele cirkel nu veranderd, en niet alleen de linkerbovenhoek. De figuur hiernaast lijkt, na één kleine verandering, totaal niet meer op de cirkel iets hierboven.

De linker- en rechterbovenhoek samen hebben een horizontale ronding van 450 + 150 = 600 px. Twee keer te breed. Van dat teveel neemt de linkerbovenhoek driekwart (450 px) en de rechterbovenhoek een kwart (150 px) voor z'n rekening.

Om de ronding toch te laten passen in de <div> van 300 px breedte, wordt de horizontale ronding van 600 px verminderd tot 300 px. Hiervan krijgt de linkerbovenhoek driekwart en de rechterbovenhoek een kwart: de verhouding tussen beide hoeken blijft hetzelfde.

Om de horizontale ronding aan de bovenkant van 600 px laten passen binnen de breedte van 300 px van de <div>, is de horizontale ronding bij beide hoeken aan de bovenkant gehalveerd.

Zodra één of meer hoeken worden aangepast, omdat ze niet passen, wordt die aanpassing bij alle hoeken in beide richtingen toegepast. Vandaar dat ook de beide hoeken aan de onderkant plotsklaps half zo breed en hoog zijn: ook deze zijn gehalveerd en teruggebracht van 150 px naar 75 px. En ook de verticale ronding van de beide hoeken aan de bovenkant is gehalveerd tot 75 px.

Een figuur kan er hierdoor op bijvoorbeeld een smartphone volkomen anders uitzien dan op een desktop. De hoogte wordt niet aangepast als de figuur niet in het venster van de browser past, maar de breedte wel. En dat kan door de bovengenoemde aanpassingen tot enorme vervormingen leiden. Als dit ongewenst is, kan een tweede manier om de rondingen op te geven mogelijk beter uitkomen.

Hierboven zijn de hoeken in een absolute eenheid opgegeven: px. Een px is altijd even groot. Als je de rondingen in een relatieve maat zoals procenten opgeeft, wordt ligt dat anders. Een ronding van 150 px is altijd 150 px en moet dus worden aangepast, als dat niet meer in het element past.

Maar een hoek die een horizontale ronding van 50% heeft, past altijd. De helft van de breedte van het element is altijd de helft, hoe breed het element ook is. Hetzelfde geldt voor een ronding van 10%, of 37%, of...

Hieronder staat een <div> met vier ronde hoeken:

div met verschillende ronde hoeken

Ik geef direct toe dat dit geen Escher is. Maar gelukkig gaat het hier niet om het resultaat, maar om de weg naar het resultaat: de code.

Deze <div> heeft een breedte van 800 px, een maximumbreedte van 100% en een hoogte van 300 px. De linkerbovenhoek heeft een horizontale ronding van 600 px, de rechterbovenhoek van 200 px. De totale ronding aan de bovenkant is 800 px.

Aan de onderkant is de horizontale ronding van beide hoeken 400 px, samen ook 800 px.

Zolang de <div> minimaal 800 px breed is, past dat allemaal prima.

Op bijvoorbeeld een smartphone is dat te breed. Omdat de <div> een maximumbreedte van 100% heeft, wordt de <div> daar (sterk) versmald. Waardoor de rondingen aan de bovenkant, samen 800 px, niet meer passen. Hier wordt het verschil tussen een absolute en een relatieve maat goed zichtbaar.

De <div> op een smartphone als absolute maten zijn gebruikt:

width: 800px; max-width: 100%; height: 300px; border-top-left-radius: 600px 150px; border-top-right-radius: 200px 150px; border-bottom-right-radius: 400px 150px; border-bottom-left-radius: 400px 150px;

Vervorming van een te brede div bij gebruik van de eenheid px voor ronde hoeken

De hoogte blijft hetzelfde: 300 px. In de hoogte passen de rondingen nog steeds want die zijn 150 px. Twee verticale rondingen samen zijn 300 px, en dat is de <div> ook nog steeds.

In de breedte is het 'n ander verhaal. Omdat de smartphone bij lange na geen 800 px breed is, wordt de <div> veel smaller dan 800 px. De <div> op de afbeelding heeft nog iets meer dan 'n kwart van de breedte van de <div> hierboven.

En dus passen de rondingen aan boven- en onderkant niet meer binnen de <div>. Deze worden daarom aangepast. Op de afbeelding zijn ze tot ongeveer 'n kwart teruggebracht, zodat ze weer passen. Omdat alle hoeken worden aangepast, zijn alle rondingen tot ongeveer 'n kwart teruggebracht. Ook de verticale, waar dat eigenlijk niet nodig is, want de hoogte van de <div> is nog steeds 300 px.

Dit is ook de reden van de rechte lijn links en rechts: de verticale rondingen zijn teruggebracht van 150 px naar ongeveer 40 px, haast vier keer zo klein. Waardoor er ruimte komt voor een rechte lijn links en rechts in het midden.

Aan de bovenkant heeft de linkerhoek drie vierde gekregen en de rechterhoek een vierde, want de rondingen waren oorspronkelijk 600 px en 200 px.

Onderaan hebben beide hoeken evenveel gekregen, want oorspronkelijk waren ze beide 400 px.

Nog eens precies dezelfde <div>, maar nu zijn voor de rondingen geen px, maar procenten gebruikt:

width: 800px; max-width: 100%; height: 300px; border-top-left-radius: 75% 50%; border-top-right-radius: 25% 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;

Vervorming van een te brede div bij gebruik van de eenheid procenten voor ronde hoeken

De horizontale rondingen bovenaan waren 600 px en 200 px, dat is hier veranderd in 75% en 25%. De verhouding is hetzelfde, alleen de eenheid is veranderd.

Van alle andere rondingen zijn ook de verhoudingen behouden. Verticaal waren die 150 px, dat is 50 %.

Onderaan waren ze links en rechts 400 px, dat is ook 50% elk.

Maar het resultaat is volkomen anders dan bij het gebruik van absolute eenheden zoals px.

Bovenaan zijn de horizontale rondingen 75% en 25%. Dat is ten opzichte van de breedte van de <div>, ongeacht hoe breed die <div> is.

Onderaan zijn de horizontale rondingen 50%: de helft van de breedte van de <div>, ongeacht hoe breed die <div> is.

Omdat de horizontale rondingen altijd binnen de <div> passen – ze zijn relatief ten opzichte van de breedte van de <div> – worden nu geen hoeken aangepast. Daardoor blijven de verticale rondingen precies even groot, want de <div> is alleen smaller geworden, niet lager. De verticale rondingen zijn nog steeds 50%, de helft van de hoogte van de <div>.

Opgeven in relatieve of absolute eenheden moet je van geval tot geval bekijken. Bij deze voorbeelden heb ik meestal gekozen voor de absolute eenheid px, omdat ik dat hier meestal beter uit vind komen. Maar vaak zullen procenten of andere relatieve eenheden beter werken.

De shorthand border-radius

Tot nu toe zijn alle hoeken apart genoemd. Daar worden vermoedelijk alleen RSI-therapeuten vrolijk van, want je typt je ongans. Gelukkig bestaat er een zogenaamde 'shorthand' (een Nederlandse naam bestaat niet), die veel korter is: border-radius.

Alles wat tot nu toe is opgeschreven over de aparte hoeken, geldt ook voor border-radius. Soms is het duidelijker om aparte hoeken te gebruiken in plaats van de hieronder beschreven shorthand. Dat is vooral een kwestie van persoonlijke voorkeur (en leesbaarheid van de code).

Als je een van de hoeken apart gebruikt, is dat relatief simpel. Als er maar één waarde staat, wordt die voor horizontaal en verticaal gebruikt. Als er twee waarden staan, wordt de eerste voor horizontaal en de tweede voor verticaal gebruikt.

In totaal zijn er vier hoeken die elk twee waarden kunnen krijgen. Dat zijn in totaal acht waarden. Daarom is een bepaalde syntax nodig om duidelijk te maken, welke waarde bij welke hoek en bij welke richting hoort, als je de shorthand gaat gebruiken.

Er zijn twee groepen, gescheiden door een schuine streep /. Die schuine streep is nodig, omdat hier niet gelijk duidelijk is waarvoor welke waarde is bedoeld. Voor de schuine streep staan de waarden voor de horizontale rondingen, achter de streep die voor de verticale. Als er geen waarden voor de verticale rondingen zijn ingevuld, krijgen die dezelfde waarde als de horizontale ronding.

Als voor de schuine streep vier waarden zijn ingevuld, geldt de eerste waarde voor linksboven, de tweede voor rechtsboven, de derde voor rechtsonder en de vierde voor linksonder: met de richting van de klok mee. (Voor jongere lezers: kerktorens en overgrootouders hebben nog dat soort klokken.)

Als drie waarden zijn ingevuld, geldt de eerste voor linksboven, de tweede voor rechtsboven en de derde voor rechtsonder. Omdat voor linksonder geen waarde is opgegeven, krijgt die automatisch dezelfde waarde als de tegenoverliggende hoek: rechtsboven.

Als twee waarden zijn ingevuld, geldt de eerste voor linksboven en de tweede voor rechtsboven. Omdat voor rechtsonder geen waarde is ingevuld, krijgt die automatisch dezelfde waarde als de tegenoverliggende hoek: linksboven. Hetzelfde geldt voor linksonder, dat dezelfde waarde krijgt als rechtsboven.

Als slechts één waarde is ingevuld, geldt die voor alle hoeken.

Voor de rondingen in verticale richting, die na de / komen te staan, geldt precies hetzelfde, maar dan in verticale richting.

Nog 'n keer alle voorbeelden van hierboven, van makkelijk naar ingewikkeld, maar nu in shorthand-notatie.

border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;

Alle hoeken in beide richtingen hetzelfde. Dit wordt:

border-radius: 100px;

border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-right-radius: 70px; border-bottom-left-radius: 70px;

Ook weer alle hoeken hetzelfde in beide richtingen, dus ook een simpele vervanging:

border-radius: 70px;

border-top-left-radius: 200px 50px; border-top-right-radius: 200px 50px; border-bottom-right-radius: 200px 50px; border-bottom-left-radius: 200px 50px;

Nu wordt het al iets ingewikkelder, maar dit is nog steeds redelijk overzichtelijk. De horizontale waarden zijn voor alle hoeken hetzelfde: 200 px. Ook de verticale waarden zijn hetzelfde: 50 px. Dit kan worden vervangen door:

border-radius: 200px / 50px;

Voor de / staan de horizontale waarden, achter de streep de verticale. En omdat die voor alle vier de hoeken hetzelfde zijn, kan met één waarde worden volstaan.

border-top-left-radius: 100px; border-top-right-radius: 30px 100px; border-bottom-right-radius: 100px 30px; border-bottom-left-radius: 200px;

Nu wordt het echt gezellig gruwelijk. Dit kan worden ingekort tot:

border-radius: 100px 30px 100px 200px / 100px 100px 30px 200px;

In feite doe je niet meer dan het op 'n rijtje zetten van alle horizontale waarden voor de /, en alle verticale waarden na de /. De hoek linksboven heeft maar één waarde, die daarmee voor beide richtingen geldt. Idem voor de hoek linksonder.

border-top-left-radius: 450px 150px; border-top-right-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 150px;

wordt:

border-radius: 450px 150px 150px / 150px;

Voor de streep staan drie waarden voor de horizontale ronding: voor de linkerbovenhoek, de rechterbovenhoek en de rechteronderhoek. Omdat voor linksonder niets is opgegeven, krijgt die automatisch dezelfde waarde als de tegenoverliggende rechterbovenhoek: 150 px.

Na de streep staan de waarden voor de verticale ronding. Omdat dat er hier maar eentje is, geldt die voor alle vier de hoeken.

border-top-left-radius: 600px 150px; border-top-right-radius: 200px 150px; border-bottom-right-radius: 400px 150px; border-bottom-left-radius: 400px 150px;

kan worden ingekort tot:

border-radius: 600px 200px 400px 400px / 150px;

Voor de / weer de waarden voor horizontaal in de volgorde linksboven – rechtsboven – rechtsonder – linksonder. Na de / staat maar één waarde: de verticale ronding is voor alle hoeken hetzelfde.

border-top-left-radius: 75% 50%; border-top-right-radius: 25% 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;

Hier zijn procenten gebruikt, maar dat maakt verder geen enkel verschil:

border-radius: 75% 25% 50% 50% / 50%;

Voor de streep weer de horizontale ronding voor linksboven, rechtsboven, rechtsonder en linksonder. Na de streep de verticale voor alle vier de hoeken.

overflow

De standaardinstelling van overflow is visible. Als bijvoorbeeld niet alle tekst in een <div> past, toon die tekst dan toch. Misschien raakt de lay-out wat in de war, maar er verdwijnen in ieder geval geen stukken tekst en dergelijke. Meestal is dit wat je wilt.

Ook als overflow niet wordt opgegeven, is dit toch aanwezig. Dit geldt voor vrijwel alle eigenschappen: ook als je 'n eigenschap niet gebruikt, is die toch aanwezig, waarbij de standaardwaarde wordt gebruikt.

Bij sommige lijnen wordt gebruikt gemaakt van met behulp van ::after en ::before aangemaakte pseudo-elementen. Bijvoorbeeld om een deel van de lijn weer te geven. Die pseudo-elementen kunnen hoger zijn dan de <hr>, en op dat moment wordt de waarde van overflow belangrijk. Als deze gewoon op visible staat, de standaardwaarde, zie je de pseudo-elementen en dus de daarin zittende lijnen en dergelijke gewoon. Ook als het pseudo-element groter is dan de <hr>.

Om een of andere duistere reden wordt deze standaardwaarde visible in alle versies van Internet Explorer en UC browser op Windows Phone veranderd in hidden: verberg wat niet binnen het element, hier de <hr>, past. Daarom wordt bij diverse lijnen overflow: visible; toegevoegd. Op andere browsers heeft dit geen enkele invloed, want daar is dit al zo.

Je zou ook bij elke <hr> de hoogte zo groot kunnen maken, dat de pseudo-elementen er altijd in passen, maar dit is veel simpeler en betrouwbaarder.

(Deze standaardinstellingen zijn vaak niet te zien in het ontwikkelgereedschap van de browser. Ik heb ook geen documentatie kunnen vinden over de toch ietwat exotische vraag betreffende de instelling van overflow bij een <hr> met betrekking tot pseudo-elementen.

In dit geval heb ik met behulp van JavaScript de instelling van overflow opgevraagd in genoemde browsers, waarbij duidelijk werd dat dit de oorzaak was van het verdwijnen van (delen van) de pseudo-elementen.)

Gradiënt

Een gradiënt is een verlopende kleur. Er bestaan verschillende varianten van, waarvan hier linear-gradient, repeating-linear-gradient en radial-gradient worden gebruikt.

De syntax van gradiënten is tijdens het uitproberen een aantal keren ingrijpend gewijzigd. Hier wordt alleen de uiteindelijke syntax besproken, omdat van de hier ondersteunde browsers alleen UC browser op Android de oude syntax nog gebruikt. In de code zelf staat deze syntax wel.

Een gradiënt is, op de heel simpele na, vrij lastig te maken. Daarom kan een gradiënt het best met behulp van een programmaatje worden gemaakt. Op de pagina met links staan onder CSS → Online uitproberen, code genereren, en dergelijke sites, waarop je gratis allerlei soorten gradiënten kunt maken. Veel van deze online gradiënt-generators leveren ook code voor (heel) oude browsers, als je dat belangrijk vindt.

(Overigens is het wel raadzaam die code op te schonen, omdat er wel heel erg veel code voor heel erg oude versies van verschillende browsers in staat.)

Een gradiënt wordt vaak als achtergrond-afbeelding gebruikt. Dat kan prima, want een gradiënt ís een afbeelding. De afbeelding wordt ter plekke door de browser gefabriceerd aan de hand van de opgegeven kleuren en dergelijke. Ook de meeste eigenschappen als background-position; zijn gewoon te gebruiken bij een gradiënt, net als bij andere afbeeldingen.

Oudere browsers kennen geen gradiënten. Die negeren css-regels waarin een gradiënt voorkomt. (Van de op deze site ondersteunde browsers geldt dat alleen voor Internet Explorer 9. Andere oudere browsers worden hier niet meer ondersteund.) Als je een achtergrond opgeeft met behulp van een gradiënt, zouden deze browsers hierdoor geen achtergrond krijgen.

Soms is dat geen enkel probleem. Maar soms wel. Bijvoorbeeld als er tekst op een gekleurde achtergrond staat. Hier wordt bij bijvoorbeeld de elfde <hr> de border weggehaald. Zonder achtergrond is de <hr> daardoor volledig onzichtbaar. Om dit te voorkomen, krijgt de <hr> een achtergrond met een gradiënt. Waar oudere browsers dus niets mee kunnen. Daarom is het raadzaam gelijk voor de achtergrond met de gradiënt een normale achtergrond op te geven:

background: #aaa; background: linear-gradient(to bottom, white, black);

Browsers die geen gradiënt kennen, negeren de tweede regel en zullen de gewone achtergrondkleur gebruiken. Minder mooi, maar in ieder geval zie je iets.

Nieuwere browsers gebruiken de gradiënt, omdat die onder de gewone achtergrond staat, en een lagere regel in de css 'wint' van een eerdere. (Dat geldt alleen als de selector van de eerste regel niet meer specificiteit, meer 'gewicht', heeft, dus daar moet wel even op worden gelet.)

linear-gradient

background: linear-gradient(to bottom, white 0%, black 50%, white 100%);

levert de volgende gradiënt op:

(De ronde hoeken hebben niets met de gradiënt te maken, dat is gewoon met border-radius opgegeven bij het element.)

linear-gradient valt in een aantal delen uiteen:

to bottom: de kant waar de gradiënt naartoe gaat. Omdat alleen de onderkant is opgegeven, loopt de gradiënt loodrecht van boven naar onder. (Je kunt desgewenst ook twee kanten of een aantal graden opgeven, maar dat wordt in de voorbeelden niet gebruikt.)

Na de richting staan drie keer twee waarden, gescheiden door een komma. De eerste waarde is steeds de kleur, de tweede de plaats waar die kleur staat. Je kunt zoveel waarden opgeven, als je wilt. Hier worden er drie gebruikt.

#white 0%: wit 0% vanaf de bovenkant neerzetten (dat is helemaal bovenaan).

#black 50%: zwart 50% vanaf de bovenkant neerzetten (dat is halverwege).

#white 100%: wit op 100% vanaf de bovenkant neerzetten (dat is helemaal onderaan).

Het wit onder‑ en bovenaan is hier wat moeilijk te zien, omdat de achtergrond van het voorbeeod ook wit is, maar boven- en onderkant zijn echt wit.

Er zijn slechts drie plaatsen opgegeven die een bepaalde kleur moeten krijgen: bovenaan, halverwege en onderaan. De overgang tussen die kleuren verloopt geleidelijk, dat regelt de browser verder. In dit geval gaat het van wit bovenaan via zwart in het midden weer naar wit onderaan. Dit is een vrij simpele gradiënt, maar je kunt ook tig kleuren op tig plaatsen aangeven. En ook nog in allerlei richtingen.

repeating-linear-gradient

In grote lijnen is de syntax van deze variant hetzelfde als van een gewone linear-gradient. Maar deze gradiënt wordt herhaald, tot de hele achtergrond van het element is gevuld. Daardoor kun je met relatief weinig css ingewikkelde patronen maken. Voorbeelden hiervan kun je bijvoorbeeld vinden op projects.verou.me/css3patterns.

background: repeating-linear-gradient(to right, black, black 33.3%, white 33.3%, white 66.6%);

levert de volgende gradiënt op:

Dat levert niet direct de VN-prijs voor Meest Kunstzinnige Lijn Van Het Jaar op, maar het is wel een manier om een onderbroken lijn te maken met slechts één element.

to right: de kant waar de gradiënt naartoe gaat. Omdat alleen de rechterkant is opgegeven, loopt de gradiënt loodrecht van links naar rechts. (Je kunt desgewenst ook twee kanten of een aantal graden opgeven, maar dat wordt in de voorbeelden niet gebruikt.)

black: dit is de eerste kleur. Als je daar geen plaats bij opgeeft, wordt aangenomen dat die plaats 0% is: helemaal links.

black: 33.3%: hé, weer zwart, net als helemaal links. Je geeft opdracht om van helemaal links tot 33,3% vanaf links een gradiënt te maken, die verloopt van zwart naar zwart. En omdat een browser nou eenmaal wat dom en trouwhartig is, doet die dit braaf: de kleur verloopt van zwart naar zwart. Oftewel: gewoon helemaal zwart. Dit is de lijn aan de linkerkant, die loopt tot 33,3% vanaf links. Dat is een derde van de breedte van de <hr>.

white 33.3%: op 33,3% beginnen met wit. Dit is precies dezelfde plaats, als waar het zwart eindigt. Hierdoor is er geen geleidelijke, maar een abrupte overgang van zwart naar wit.

white 66.6%: zelfde verhaal als hierboven bij zwart, maar nu voor wit. Maak een gradiënt van wit naar wit tussen 33,3% en 66,6% vanaf links. Een verloop van wit naar wit levert een witte lijn op van een derde tot twee derde van de breedte van de <hr>.

Hiermee is twee derde van de achtergrond van de <hr> afgehandeld. Blijft nog een derde open, en die kunnen we toch moeilijk in z'n blootje laten staan. Bij een gewone linear-gradient zou alles na 66,6% ook wit worden: wat er te weinig is opgegeven, wordt aangevuld tot 100% met de laatst opgegeven kleur. Dat zou een lijn van een derde zwart en twee derde wit opleveren.

Maar hier is repeating-linear-gradient gebruikt. Na de 66,6% begint de gradiënt vrolijk opnieuw met het eerste deel: de zwarte streep die 33,3% vult. Net zolang tot de volle 100% van de breedte is gevuld. Dat is hier heel snel, er is maar ruimte voor nog één zwarte streep aan het einde.

Omdat de plaatsen in procenten zijn opgegeven, zullen de zwarte streep links en rechts en de witte streep in het midden altijd een derde van de ruimte beslaan, ongeacht de breedte van de <hr>.

background: repeating-linear-gradient(to right, black, black 4%, white 4%, white 8%,);

levert de volgende gradiënt op:

Dit wordt al wat interessanter. Met behulp van border-style kun je wel een gestreepte lijn maken, maar de breedte van de streepjes kun je niet veranderen. Dat kan wel met deze gradiënt.

Alles is hetzelfde als bij de gradiënt gelijk hierboven, alleen zijn de plaatsen anders.

Zwart loopt van links tot 4%. Dan volgt op 4% een abrupte overgang naar wit, wat doorloopt naar 8%. Waarna alles weer opnieuw begint.

Als je het 'n beetje goed uitkient, kun je de streeplijn laten beginnen en eindigen met een zwart streepje. En omdat de plaatsen in procenten zijn opgegeven, blijft het aantal streepjes altijd gelijk, ongeacht de breedte van de <hr>.

background: repeating-linear-gradient(to right, blue, blue 8px, yellow 8px, yellow 16px, red 16px, red 24px, green 24px, green 32px, black 32px, black 40px, orange 40px, orange 48px, white 48px, white 56px, lime 56px, lime 64px, gold 64px, gold 72px);

levert de volgende gradiënt op:

Volgens mij moet je knetterkleurenblind én een gediplomeerd mensenhater zijn om dit ooit te gebruiken, maar het kán.

Het zijn wat meer kleuren en plaatsen, maar verder is het precies hetzelfde als de twee gradiënten hierboven.

Weer van links naar rechts. Blauw van links tot 8 px. Abrupte overgang naar geel tot 16 px. Abrupte overgang naar rood tot 24 px. Enz. En na 72 px begint de hele handel weer opnieuw.

Hierboven zijn voor de plaatsen procenten gebruikt. Omdat hier px zijn gebruikt, blijven de verschillende blokjes altijd even breed. Als de <hr> smaller wordt, krijg je minder blokjes, maar ze blijven 8 px breed.

radial-gradient

Naast de lineaire gradiënt, waarbij alles in rechte lijnen wordt weergegeven, is er nog de radiale gradiënt. Hier wordt alleen een uiterst simpele vorm gebruikt. Op de iets hierboven genoemde sites kun je veel ingewikkelder patronen vinden.

Als je niets opgeeft om dat te veranderen, wordt een radiale gradiënt cirkelvormig vanuit het midden opgebouwd.

background: radial-gradient(red 25%, white 25%);

levert de volgende gradiënt op:

De gradiënt is het wit met in het midden de rode stip. Deze zit in een vierkant element met een border, waarvan de hoeken cirkelvormig zijn gemaakt. De zwarte rand heeft niets met de gradiënt te maken. En in een vierkant element zou de gradiënt er precies hetzelfde uit hebben gezien: de gradiënt is van zichzelf cirkelvormig (tenzij je dat wijzigt).

De syntax is weer vrijwel hetzelfde als bij de andere gradiënten, als je deze hele simpele vorm gebruikt.

Een gradiënt is een door de browser ter plekke gemaakt afbeelding. In plaats van het hier gebruikte background kun je ook background-image gebruiken. De gradiënt wordt automatisch even groot als de achtergrond van het element (tenzij je dat wijzigt, wat hier niet gebeurt).

Je moet uitgaan van een denkbeeldige punt in het midden van de gradiënt, in het midden van de cirkel.

red 25%: maak vanuit het middelpunt van de cirkel 25% rood. Aan alle kanten van het middelpunt komt evenveel rood te staan: 12,5% aan alle kanten. En omdat het een radiale gradiënt is, levert dit een rode stip op die precies in het midden staat.

white 25%: begin op 25% vanuit het middelpunt met wit. Omdat dit dezelfde plaats is, als waar rood eindigt, is de overgang abrupt. En omdat verder geen kleuren meer zijn opgegeven, blijft het wit tot de hele gradiënt is gevuld.

Omdat de plaatsen in procenten zijn opgegeven, verandert de grootte van de stip met de grootte van het element, waar de stip in staat.

Hoewel je een gradiënt kunt gebruiken voor verlopende kleuren, hoeft dat niet. Hier is de gradiënt alleen gebruikt om een simpele rode stip te maken.

background: radial-gradient(red 10%, white 50%); Radiale gradiënt: wit overlopend naar rode stip in het midden

Dit is dezelfde code als hierboven, alleen zijn de plaatsen gewijzigd. Tot 10% van het middelpunt van de cirkel is het nu egaal rood. Vanaf 50% van het middelpunt is het effen wit. En tussen 10% en 50% verloopt de kleur geleidelijk van rood naar wit. Hier zorgt de gradiënt echt voor een verlopende kleur, maar dat hoeft dus niet.

Volledige css

/* tekst-105-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.

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

margin: 0; padding: 0;

Verschillende browsers hebben verschillende standaard-instellingen hiervoor. Door ze gewoon op 0 te zetten, zijn ze overal hetzelfde.

#content

De elementen met id="content". Dat is er hier maar eentje: de <div> waar alle <hr>'s in zitten.

background: white;

Witte achtergrond.

box-sizing: border-box;

Normaal genomen worden border en padding bij de breedte en hoogte opgeteld. Hier komt het beter uit, als border en padding binnen de breedte vallen. Met deze regel wordt dat bereikt.

Iets hieronder wordt een maximumbreedte opgegeven van 100%: niet breder dan het venster van de browser. Daar komen normaal genomen padding (links en rechts 20 px) en border (links en rechts 1 px) echter nog bij. In smalle vensters zoals smartphones wordt het totaal daardoor te breed. Door border en padding binnen de breedte te laten vallen, geldt de maximumbreedte van 100% nu voor de breedte inclusief border en padding.

width: 800px;

Breedte.

max-width: 100%;

Maximumbreedte.

Een breedte in procenten wordt altijd genomen ten opzichte van de breedte van de ouder. Dat is hier het blok-element <body>. Als een blok-element geen breedte heeft gekregen, wordt dat automatisch even breed als z'n ouder. De ouder van <body> is <html>. Ook weer een blok-element zonder breedte, dat dus ook weer even breed wordt als z'n ouder.

Dan zijn we er eindelijk: de ouder van <html> is het venster van de browser. <html> en in het kielzog daarvan <body> en div#content worden nooit breder dan 100% van het browservenster. Oftewel: ook in smalle vensters wordt de inhoud van de pagina nooit breder dan het venster.

margin: 0 auto;

Omdat voor onder en links geen waarden zijn ingevuld, krijgen onder en links 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. Ongeacht de breedte van het venster van de browser staat de <div> hierdoor altijd in horizontaal gecentreerd.

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

border: black solid 1px;

Zwart randje.

padding: 20px;

Kleine afstand tussen <hr>'s en buitenkant van de <div>.

Een <hr> wordt automatisch even breed als het element waar hij in staat. Dit geeft wat afstand tussen de rand rondom de <div> en de <hr>'s.

#twee

Het element met id="twee". De tweede <hr>. Een groene rand met ronde hoeken, zonder achtergrond.

height: 14px;

Een <hr> heeft van zichzelf geen hoogte. Hier gelijk onder wordt een border aan de <hr> gegeven. Zonder hoogte zou je alleen een lijn van 4 px hoogte zien: de border van 2 px aan de bovenkant en de border van 2 px aan de onderkant, die tegen elkaar aan komen te staan.

border: lime solid 2px;

Groen randje rondom.

border-radius: 7px;

Ronde hoeken.

Omdat maar één waarde is opgegeven, is de ronding horizontaal en verticaal even groot: 7px. Dat is half zo groot als de hoogte van de <hr>, waardoor je aan beide uiteinden een halve cirkel krijgt.

Een uitgebreider verhaal over border-radius staat bij border-radius.

#drie

Het element met id="drie". De derde <hr>. Blauwe rand met ronde hoeken, gele achtergrond.

background: yellow;

Gele achtergrond. Een <hr> kan, als de <hr> een hoogte heeft, net als veel andere elementen gewoon een achtergrondkleur krijgen.

height: 14px;

Een <hr> heeft van zichzelf geen hoogte. Hier gelijk onder wordt een border aan de <hr> gegeven. Zonder hoogte zou je alleen lijn van 4 px hoogte zien: de border van 2 px aan de bovenkant en de border van 2 px aan de onderkant, die tegen elkaar aan komen te staan. Bovendien zou je geen achtergrondkleur aan de <hr> kunnen geven.

border: blue solid 2px;

Blauw randje rondom.

border-radius: 7px;

Ronde hoeken.

Omdat maar één waarde is opgegeven, is de ronding horizontaal en verticaal even groot: 7px. Dat is de half zo groot als de hoogte van de <hr>, waardoor je aan beide uiteinden een halve cirkel krijgt.

Een uitgebreider verhaal over border-radius staat bij border-radius.

#vier

Het element met id="vier". De vierde <hr>. Een gestippelde lijn.

margin-top: 10px;

Marge aan de bovenkant voor wat afstand met de <hr> hierboven.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-top: #777 dotted 4px;

Gestippelde grijze border aan de bovenkant. Omdat alle andere borders zijn weggehaald, is het resultaat een gestippelde lijn.

#vijf

Het element met id="vijf". De vijfde <hr>. Een kromme lijn.

height: 26px;

Een <hr> heeft van zichzelf geen hoogte. Iets hieronder worden ronde hoeken aan de border onderaan gegeven. Dat kan alleen, als de <hr> een hoogte heeft. Zonder hoogte kun je wel ronde hoeken opgeven, maar het resultaat is een gewone rechte lijn.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-bottom: black solid 1px;

Zwarte border aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen, moet voor hoeken naar omhoog een border aan de onderkant worden gebruikt.

border-bottom-right-radius: 379px 26px;

Rechterbenedenhoek rond maken. De eerste waarde is voor de horizontale ronding, de tweede voor de verticale.

Bij #content heeft div#content een breedte van 800 px gekregen. Daar gaan een padding links en rechts van 20 px en een border links en rechts van 1 px af. (Normaal genomen is dat niet zo, maar met behulp van box-sizing is hier opgegeven dat padding en border binnen de breedte vallen.)

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

De helft van 758 is 379. Daar komt die exotische waarde van 379 px vandaan. In horizontale richting is de ronding van de rechterbenedenhoek de helft van de breedte van de <hr>: 379 px.

De hoogte van de <hr> is 26 px. De verticale hoogte van de rechterbenedenhoek is ook 26 px. Daarmee wordt de hoek even hoog als de <hr>.

Op de afbeelding hiernaast is de achtergrond van de <hr> grijs gemaakt, waardoor de omtrek is te zien. De border is door de verkleining wat weggevallen, maar er is nog wel te zien dat de hoek horizontaal de helft van de lengte beslaat, en verticaal de volle hoogte.

Een uitgebreider verhaal over border-radius staat bij border-radius. Daar is ook, onder het kopje Waarden, te vinden, wat er gebeurt, als de <div> in een smaller browservenster smaller wordt dan 758 px.

border-bottom-left-radius: 379px 26px;

Exact hetzelfde verhaal als gelijk hierboven, maar nu voor de linkerbenedenhoek.

#zes

Het element met id="zes". De zesde <hr>. Een horizontale lijn met aan beide uiteinden een ronde hoek naar beneden.

height: 50px;

Een <hr> heeft van zichzelf geen hoogte. Iets hieronder worden ronde hoeken aan de border onderaan gegeven. Dat kan alleen, als de <hr> een hoogte heeft heeft. Zonder hoogte kun je wel ronde hoeken opgeven, maar het resultaat is een gewone rechte lijn.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-top: black solid 1px;

Zwarte border aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen, moet voor hoeken naar beneden een border aan de bovenkant worden gebruikt.

border-top-left-radius: 60px 50px;

Linkerbovenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

Een horizontale van ronding 60 px is nog geen tiende van de breedte van de <hr>. Daardoor krijg je 'n enigszins scherpe ronding.

In verticale richting is de ronding 50 px: even hoog als de <hr> zelf is.

border-top-right-radius:60px 50px;

Exact hetzelfde verhaal als gelijk hierboven, maar nu voor de rechterbovenhoek.

#zeven

Het element met id="zeven". De zevende <hr>. Links heeft de lijn een ronding naar beneden, rechts naar boven.

height: 70px;

Voor de lijn zelf is deze hoogte niet nodig, omdat de krommingen door met behulp van ::before en ::after gemaakte pseudo-elementen worden gemaakt.

De hoogte wordt hier alleen gebruikt om wat afstand tussen de lijnen te scheppen. Dat kan op allerlei manieren. Ook bijvoorbeeld een marge aan boven- en/of onderkant had gebruikt kunnen worden.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. De lijn wordt hier getekend met behulp van met ::before en ::after aangemaakte pseudo-elementen.

position: relative;

Hieronder worden de met behulp van ::before en ::after aangemaakte pseudo-elementen absoluut gepositioneerd. Dat positioneren gebeurt ten opzichte van de eerste voorouder die zelf is gepositioneerd. Om te zorgen dat dat deze <hr> is, krijgt die een relatieve positie. Omdat er verder niets bij top en dergelijke wordt ingevuld, heeft dat verder geen enkele invloed op de <hr> zelf.

#zeven::before

Met behulp van ::before bij het element met id="zeven", de zevende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de rechterhelft van de lijn.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier de <hr>. Het pseudo-element wordt dus half zo breed als de <hr>.

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

Het pseudo-element is 50% van deze breedte en wordt dus 379 px breed. Als de <hr> smaller wordt dan 758 px, wordt het pseudo-element ook smaller, omdat als eenheid procenten zijn gebruikt.

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

border-bottom: black solid 1px;

Zwarte border aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen, moet voor hoeken naar boven een border aan de onderkant worden gebruikt.

border-bottom-right-radius: 379px 36px;

Rechteronderhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

Iets hierboven is het pseudo-element 379 px breed gemaakt. De horizontale ronding beslaat dus de volle breedte van het pseudo-element.

Iets hierboven is het pseudo-element 36 px hoog gemaakt. De verticale ronding beslaat dus de volle hoogte van het pseudo-element.

position: absolute;

Om het pseudo-element op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft. Dat is hier de <hr>, waar dit pseudo-element bij hoort.

Van zichzelf is een pseudo-element een inline-element, waardoor eigenschappen als breedte en hoogte niet gebruikt kunnen worden. Door het absoluut te positioneren verandert het in 'n soort blok-element, waardoor dit soort eigenschappen wel gebruikt kunnen worden.

top: -18px;

18 px naar boven neerzetten. Dat is de helft van de hoogte van het pseudo-element. Het pseudo-element met de linkerhelft van de lijn wordt hieronder 18 px naar omlaag verplaatst. Daardoor sluiten de borders van beide pseudo-elementen precies op elkaar aan.

left: 50%;

Horizontaal halverwege de <hr> neerzetten. Omdat de relatieve eenheid procenten wordt gebruikt, staat dit pseudo-element altijd in het midden, ongeacht de breedte van de <hr>.

#zeven::after

Met behulp van ::after bij het element met id="zeven", de zevende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de linkerhelft van de lijn.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50%;

Half zo breed maken als de <hr>.Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier de <hr>. Het pseudo-element wordt dus half zo breed als de <hr>.

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

Het pseudo-element is 50% van deze breedte en wordt dus 379 px breed. Als de <hr> smaller wordt dan 758 px, wordt het pseudo-element ook smaller, omdat als eenheid procenten zijn gebruikt.

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

border-top: black solid 1px;

Zwarte border aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen, moet voor hoeken naar beneden een border aan de bovenkant worden gebruikt.

border-top-left-radius: 379px 36px;

Linkerbovenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

Iets hierboven is het pseudo-element 379 px breed gemaakt. De horizontale ronding beslaat dus de volle breedte van het pseudo-element.

Iets hierboven is het pseudo-element 36 px hoog gemaakt. De verticale ronding beslaat dus de volle hoogte van het pseudo-element.

position: absolute;

top: 18px;

18 px naar beneden neerzetten. Dat is de helft van de hoogte van het pseudo-element. Het pseudo-element met de rechterhelft van de lijn is hierboven 18 px naar omhoog verplaatst. Daardoor sluiten de borders van beide pseudo-elementen precies op elkaar aan.

#acht

Het element met id="acht". De achtste <hr>. Links heeft de lijn een ronding naar boven, rechts naar omlaag. In het midden staan twee verticale streepjes.

height: 40px;

Voor de lijn zelf is deze hoogte niet nodig, omdat de krommingen door met behulp van ::before en ::after gemaakte pseudo-elementen worden gemaakt. Het rechte deel is gewoon een border bij de <hr>, en daar is geen hoogte voor nodig.

De hoogte wordt hier alleen gebruikt om wat afstand tussen de lijnen te scheppen. Dat kan op allerlei manieren. Ook bijvoorbeeld een marge aan boven- en/of onderkant had gebruikt kunnen worden.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. Dat zou deze <hr> onzichtbaar maken, maar dat wordt voorkomen door de border van de met behulp van ::before en ::after hieronder gemaakte pseudo-elementen.

position: relative;

#acht::before

Met behulp van ::before bij het element met id="acht", de achtste <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de rechterhelft van de lijn en de twee staande streepjes in het midden.

content: "||";

De twee verticale streepjes in het midden van de lijn. Deze staan niet exact in het midden, omdat beide streepjes in het eerste pseudo-element staan. Om ze perfect in het midden te krijgen, zou één van de streepjes in het met behulp van ::after gemaakte pseudo-element moeten staan. Maar als je dat doet, staan de streepjes in alle versies van UC browser en Android browser ongelijk: de een staat hoger dan de andere.

Dit lijkt de beste oplossing te zijn. In bredere browservensters, als de lijn langer is, is nauwelijks of niet te zien dat de streepjes niet precies in het midden staan. In smallere vensters ook niet, omdat dan de rondingen aan de uiteinden dit vrijwel onzichtbaar maken.

color: black;

Om een of andere reden geeft Firefox een <hr> (en alles daarbinnen) niet zwart, maar grijs weer (om precies te zijn: rgb(128, 128, 128)). In alle andere browsers zijn de streepjes al zwart, nu ook in Firefox.

Meestal is dit geen enkel probleem, omdat meestal een border wordt gebruikt voor de lijn, en bij die border wordt steeds expliciet een kleur opgegeven. Maar voor deze streepjes gebruikt Firefox z'n standaardgrijs, als dat niet wordt gecorrigeerd.

width: 50%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier de <hr>. Het pseudo-element wordt dus half zo breed als de <hr>.

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

Het pseudo-element is 50% van deze breedte en wordt dus 379 px breed. Als de <hr> smaller wordt dan 758 px, wordt het pseudo-element ook smaller, omdat als eenheid procenten zijn gebruikt.

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

line-height: 0;

De twee streepjes zijn gewone tekst. Op de afbeelding zijn ze aangevuld met de letter 'a'.

Bij voldoende tekst wordt een nieuwe regel begonnen. Op de afbeelding is de achtergrond van het pseudo-element oranje gemaakt, zodat is te zien dat er gewoon twee regels met tekst staan.

Er is dus ook een regelhoogte aanwezig. Dat komt hier slecht uit, omdat de verticale streepjes midden op de liggende lijn moeten komen te staan. Door de regelhoogte te verwijderen, komen ze daar te staan.

text-align: left;

Dit is de standaardinstelling voor uitlijnen, maar Microsoft heeft 'n wat apart gevoel voor humor: alle versies van Internet Explorer centreren de verticale streepjes spontaan. Waardoor ze niet meer in het midden van de <hr>, maar in het midden van dit pseudo-element komen te staan. Dat is in het midden van de rechterhelft, dus op 'n kwart vanaf het linkereinde van de <hr>. UC browser op Windows Phone heeft kennelijk hetzelfde idee over grappen en humor en zo, want die doet dit ook.

Hiermee wordt de standaardinstelling teruggezet in deze browsers en komen de streepjes gewoon links te staan. In alle andere browsers was dit al zo, dus daar heeft dit geen invloed.

border-top: black solid 1px;

Zwarte rand aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoek naar beneden gaat, moet een border aan de bovenkant worden gebruikt.

Iets hierboven is het pseudo-element met width: 50%; half zo breed gemaakt als de <hr>. Daarmee heeft ook deze border die breedte gekregen.

border-top-right-radius: 135px 36px;

Rechterbovenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

position: absolute;

top: 18px;

18 px omlaag verplaatsen. Het hieronder met behulp van ::after gemaakte pseudo-element wordt 18 px omhoog verplaatst, waardoor de rechter‑ en linkerhelft van de horizontale lijn (in feite twee borders) precies tegen elkaar aan komen te staan.

left: 50%;

Horizontaal halverwege de <hr> neerzetten. Omdat de relatieve eenheid procenten wordt gebruikt, staat dit pseudo-element altijd in het midden, ongeacht de breedte van de <hr>.

#acht::after

Met behulp van ::after bij het element met id="acht", de achtste <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de linkerhelft van de lijn.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier de <hr>. Het pseudo-element wordt dus half zo breed als de <hr>.

De breedte voor de inhoud van div#content is hierdoor 800 – 20 – 20 – 1 -1 = 758 px. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder, dat is hier dus 758 px.

Het pseudo-element is 50% van deze breedte en wordt dus 379 px breed. Als de <hr> smaller wordt dan 758 px, wordt het pseudo-element ook smaller, omdat als eenheid procenten zijn gebruikt.

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

border-bottom: black solid 1px;

Zwarte rand aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoek naar boven gaat, moet een border aan de onderkant worden gebruikt.

Iets hierboven is het pseudo-element met width: 50%; half zo breed gemaakt als de <hr>. Daarmee heeft ook deze border die breedte gekregen.

border-bottom-left-radius: 135px 36px;

Linkerbenedenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

position: absolute;

top: -18px;

18 px omhoog verplaatsen. Het hierboven met behulp van ::before gemaakte pseudo-element wordt 18 px omlaag verplaatst, waardoor de rechter‑ en linkerhelft van de horizontale lijn (in feite twee borders) precies tegen elkaar aan komen te staan.

#negen

Het element met id="negen". De negende <hr>. Links heeft de lijn een ronding naar boven, rechts naar omlaag. In het midden staan twee verticale streepjes.

width: 200px;

Een <hr> wordt automatisch even breed als z'n ouder. Hiermee wordt de breedte beperkt tot 200 px. Omdat een <hr> automatisch horizontaal wordt gecentreerd, komt de lijn in het midden van z'n ouder div#content te staan.

height: 40px;

Voor de lijn zelf is deze hoogte niet nodig, omdat de krommingen door met behulp van ::before en ::after gemaakte pseudo-elementen worden gemaakt.

De hoogte wordt hier alleen gebruikt om wat afstand tussen de lijnen te scheppen. Dat kan op allerlei manieren. Ook bijvoorbeeld een marge aan boven- en/of onderkant had gebruikt kunnen worden.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. Dat zou deze <hr> onzichtbaar maken, maar dat wordt voorkomen door de border van de met behulp van ::before en ::after hieronder gemaakte pseudo-elementen.

position: relative;

#negen::before

Met behulp van ::before bij het element met id="negen", de negende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de rechterhelft van de lijn en de twee staande streepjes in het midden.

content: "||";

Dit lijkt de beste oplossing te zijn. Door alle rondingen in de lijn is het vrijwel niet te zien dat de streepjes iets uit het midden staan.

color: black;

Om een of andere reden geeft Firefox een <hr> niet zwart, maar grijs weer (om precies te zijn: rgb(128, 128, 128)). In alle andere browsers zijn de streepjes al zwart, nu ook in Firefox.

width: 50%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier de <hr>, die hierboven bij #negen een breedte van 200 px heeft gekregen. Dit pseudo-element wordt dus 100 px breed.

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

line-height: 0;

Om de streepjes verticaal in het midden van de lijn te krijgen. Een uitgebreider verhaal met afbeelding staat iets hierboven bij line-height: 0;.

text-align: left;

Dit is de standaardinstelling voor uitlijnen, maar alle versies van Internet Explorer en UC browser op Windows Phone centreren de verticale streepjes. Waardoor ze niet meer in het midden van de <hr>, maar in het midden van dit pseudo-element komen te staan. Dat is in het midden van de rechterhelft, dus op 'n kwart vanaf het linkereinde van de <hr>.

Hiermee wordt de standaardinstelling teruggezet in deze browsers en komen de streepjes gewoon links te staan. In alle andere browsers was dit al zo, dus daar heeft dit geen invloed.

border-top: black solid 1px;

Zwarte rand aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoek naar beneden gaat, moet een border aan de bovenkant worden gebruikt.

Iets hierboven is het pseudo-element met width: 50%; half zo breed gemaakt als de <hr>. Daarmee heeft ook deze border die breedte gekregen.

border-top-right-radius: 100px 30px;

Rechterbovenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 18px;

18 px omlaag verplaatsen. Het hieronder met behulp van ::after gemaakte pseudo-element wordt 18 px omhoog verplaatst, waardoor de rechter‑ en linkerhelft van de lijn (in feite twee borders) precies tegen elkaar aan komen te staan.

left: 50%;

In horizontale richting halverwege de <hr> neerzetten. Dit pseudo-element is voor de rechterhelft van de lijn.

#negen::after

Met behulp van ::after bij het element met id="negen", de negende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de linkerhelft van de lijn.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50%;

height: 36px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

border-bottom: black solid 1px;

Zwarte rand aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoek naar boven gaat, moet een border aan de onderkant worden gebruikt.

Iets hierboven is het pseudo-element met width: 50%; half zo breed gemaakt als de <hr>. Daarmee heeft ook deze border die breedte gekregen.

border-bottom-left-radius: 100px 30px;

Linkerbenedenhoek rond maken. De eerste waarde is voor de ronding in horizontale richting, de tweede voor de ronding in verticale richting.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: -18px;

18 px omhoog verplaatsen. Het hierboven met behulp van ::before gemaakte pseudo-element wordt 18 px omlaag verplaatst, waardoor de rechter‑ en linkerhelft van de lijn (in feite twee borders) precies tegen elkaar aan komen te staan.

#tien

Het element met id="tien". De tiende <hr>. Een rechte lijn met links en rechts schuine streepjes.

width: 80%;

Een <hr> wordt automatisch even breed als z'n ouder. Hiermee wordt de breedte beperkt tot 80%. Omdat een <hr> automatisch horizontaal wordt gecentreerd, komt de lijn in het midden van z'n ouder div#content te staan.

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element, hier div#content. Als deze <div> smaller wordt, bijvoorbeeld op een kleiner scherm, blijft de breedte van de <hr> 80% van die van div#content.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

margin-top: 30px;

Marge aan de bovenkant. Dit is alleen nodig voor wat afstand met de <hr> hierboven.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-top: black solid 1px;

Zwart lijntje. Dit is het horizontale deel van de uiteindelijke lijn.

position: relative;

#tien::before

Met behulp van ::before bij het element met id="tiende", de tiende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de schuine streepjes rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 20px; height: 20px;

Breedte en hoogte. Deze zijn hetzelfde, dus dit levert een vierkant pseudo-element op.

border: black solid;

Zwarte rand. De breedte wordt gelijk hieronder opgegeven.

border-width: 0 0 1px 1px;

Boven en rechts geen border, onder en links 1 px breed. Kleur en stijl van de border zijn al gelijk hierboven opgegeven.

position: absolute;

top: -11px; right: -23px;

Om het pseudo-element op de goede plaats ten opzichte van de horizontale lijn neer te zetten.

-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);

Hier staat in feite drie keer hetzelfde: transform: rotate(45deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Hierboven is van het pseudo-element een vierkant gemaakt met aan de linker- en onderkant een border. Op de afbeelding is dit vierkant te zien. Met een grijze achtergrond, omdat je anders alleen de borders zou zien.

Door het vierkant te 45 graden te draaien, veranderen de twee borders in de schuine streepjes aan het uiteinde van de lijn.

#tien::after

Met behulp van ::after bij het element met id="tien", de tiende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de schuine streepjes links.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 20px; height: 20px;

Breedte en hoogte. Deze zijn hetzelfde, dus dit levert een vierkant pseudo-element op.

border: black solid;

Zwarte rand. De breedte wordt gelijk hieronder opgegeven.

border-width: 1px 1px 0 0;

Boven en rechts 1 px breed, onder en links geen border. Kleur en stijl van de border zijn al gelijk hierboven opgegeven.

position: absolute;

top: -11px; left: -23px;

Om het pseudo-element op de goede plaats ten opzichte van de horizontale lijn neer te zetten.

-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);

Hier staat in feite drie keer hetzelfde: transform: rotate(45deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Hierboven is van het pseudo-element een vierkant gemaakt met aan de linker- en onderkant een border. Iets hierboven, bij het met behulp van ::before gemaakte pseudo-element, staat hier een afbeelding van.

Door het vierkant te 45 graden te draaien, veranderen de twee borders in de schuine streepjes aan het uiteinde van de lijn.

#elf

Het element met id="elf". De elfde <hr>. Een lijn met een verlopende grijze achtergrond en ronde hoeken.

background: #aaa;

Grijze achtergrond.

Hieronder wordt een gradiënt als achtergrond opgegeven. Deze achtergrondkleur is voor browsers die geen gradiënten kennen.

Meer over gradiënten is te vinden bij Gradiënt.

background: -webkit-linear-gradient(top, white 0%, black 50%, white 100%); background: linear-gradient(to bottom, white 0%, black 50%, white 100%);

Hier staat in feite twee keer hetzelfde: linear-gradient(top, white 0%, black 50%, white 100%); Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

In verticale richting lopende gradiënt van wit bovenaan via zwart in het midden naar wit onderaan. Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

height: 20px;

Een <hr> heeft van zichzelf geen hoogte. Hierboven is een achtergrond aan de <hr> gegeven. Dat kan alleen, als de <hr> een hoogte heeft.

margin-top: 25px;

Marge aan de bovenkant voor wat afstand tot z'n bovenbuur<hr>.

border: none;

Standaardborder verwijderen. Dit zou de lijn onzichtbaar maken. Dat gebeurt echter niet, omdat een achtergrond-afbeelding wordt gebruikt. (Een linear-gradient is een heuse afbeelding, door de browser ter plekke gefabriceerd.)

border-radius: 100px / 10px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: 100 px in horizontale richting en 10 px in verticale richting.

Een uitgebreider verhaal over border-radius staat bij border-radius.

#twaalf

Het element met id="twaalf". De twaalfde <hr>. Een naar boven rondende lijn met links en rechts een ronde lus.

width: 140px;

Een <hr> wordt automatisch even breed als z'n ouder. Hiermee wordt de breedte beperkt tot 140 px. Omdat een <hr> automatisch horizontaal wordt gecentreerd, komt de lijn in het midden van z'n ouder div#content te staan.

height: 60px;

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-bottom: black solid 1px;

Zwarte rand aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar boven gaan, moet een border aan de onderkant worden gebruikt.

border-radius: 60px / 28px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: 60 px in horizontale richting en 28 px in verticale richting. Die 28 px is gewoon door uitproberen gevonden. Met deze ronding sluit de lijn aan op de krullen links en rechts van de lijn.

Hoewel deze waarden voor alle vier de hoeken gelden, zijn er maar twee zichtbaar, want alleen aan de onderkant is een border aanwezig. Als je de <hr> een achtergrond zou geven, zoals op de afbeelding hiernaast, kun je zien dat er inderdaad aan de bovenkant ook ronde hoeken zijn.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: relative;

#twaalf::before

Met behulp van ::before bij het element met id="twaalf", de twaalfde <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de ronde lijn rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 26px; height: 30px;

Breedte en hoogte. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

border: black solid 1px;

Zwarte rand.

border-bottom: none;

Rand aan de onderkant weghalen.

border-radius: 15px;

Ronde hoeken. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

Een uitgebreider verhaal over border-radius staat bij border-radius.

border-bottom-left-radius: 0;

Ronding bij linkerbenedenhoek weer weghalen. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 34px; right: -22px;

Het pseudo-element op de juiste plaats zetten. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

-ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg);

Hier staat in feite drie keer hetzelfde: transform: rotate(50deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

50 graden draaien. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

#twaalf::after

Met behulp van ::after bij het element met id="twaalf", de twaalfde <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de ronde lijn links.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 26px; height: 30px;

Breedte en hoogte. De combinatie van width, height, border-radius, border-top-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

border: black solid 1px;

Zwarte rand.

border-top: none;

Rand aan de onderkant weghalen.

border-radius: 15px;

Ronde hoeken. De combinatie van width, height, border-radius, border-top-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

Een uitgebreider verhaal over border-radius staat bij border-radius.

border-top-left-radius: 0;

Ronding bij linkerbovenhoek weer weghalen. De combinatie van width, height, border-radius, border-top-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 34px; left: -22px;

-ms-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(130deg);

Hier staat in feite drie keer hetzelfde: transform: rotate(50deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

130 graden draaien. De combinatie van width, height, border-radius, border-bottom-left-radius, top, right, en transform: rotate() levert een ronde lijn op, die aansluit op de gekromde horizontale lijn. De meeste waarden zijn gevonden door simpel uitproberen.

#dertien

Het element met id="dertien". De dertiende <hr>. Een horizontale lijn met aan beide uiteinden een ronding naar boven en naar beneden.

height: 30px;

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-bottom: black solid 1px;

Zwarte rand aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar boven gaan, moet een border aan de onderkant worden gebruikt.

border-radius: 100px / 30px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: 100 px in horizontale richting en 30 px in verticale richting.

Hoewel deze waarden voor alle vier de hoeken gelden, zijn er maar twee zichtbaar, want alleen aan de onderkant is een border aanwezig. Als je de <hr> een achtergrond zou geven, zoals op de afbeelding, kun je zien dat er inderdaad aan de bovenkant ook ronde hoeken aanwezig zijn.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: relative;

Hieronder wordt het met behulp van ::before aangemaakte pseudo-element absoluut gepositioneerd. Dat positioneren gebeurt ten opzichte van de eerste voorouder die zelf is gepositioneerd. Om te zorgen dat dat deze <hr> is, krijgt die een relatieve positie. Omdat er verder niets bij top en dergelijke wordt ingevuld, heeft dat verder geen enkele invloed op de <hr> zelf.

#dertien::before

Met behulp van ::before bij het element met id="dertiende", de dertiende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de ronde hoeken naar omlaag links en rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 100%;

Het pseudo-element heeft geen inhoud, daarom heeft het ook geen breedte. Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element, hier de <hr>. Hiermee wordt het dus even breed gemaakt als de <hr>. Daardoor wordt ook de border, die wordt gebruikt voor de ronde hoeken naar beneden, even breed als de <hr>, en daar gaat het om.

height: 30px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

border-top: black solid 1px;

Zwarte rand aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar beneden gaan, moet een border aan de bovenkant worden gebruikt.

border-radius: 100px / 30px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: 100 px in horizontale richting en 30 px in verticale richting.

Hoewel deze waarden voor alle vier de hoeken gelden, zijn er maar twee zichtbaar, want alleen aan de bovenkant is een border aanwezig. Als je het pseudo-element een achtergrond zou geven, kun je zien dat er inderdaad aan de onderkant ook ronde hoeken aanwezig zijn. Bij het hierboven met behulp van ::before gemaakte pseudo-element staat een afbeelding, waarin dit zichtbaar is gemaakt. Alleen zijn boven- en onderkant hier omgedraaid.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 29px;

29 px naar boven verplaatsen. Hierdoor komen de border aan de onderkant van de <hr> en de border aan de bovenkant van dit pseudo-element over elkaar heen te staan, waardoor je een lijn van slechts 1px breed ziet. Alleen de ronde hoeken aan de uiteinden zijn zichtbaar, omdat die elkaar niet overlappen.

#veertien

Het element met id="veertien". De veertiende <hr>. Een derde aan het begin en einde van de lijn is zwart, het middelste derde deel is wit. (Vanwege de witte achtergrond is het witte deel van de lijn niet te zien op de afbeelding. Mensen die die witte lijn toch zien, dienen zich onverwijld te vervoegen bij de oogarts, tenzij ze paranormaal begaafd zijn.)

background: black;

Zwarte achtergrond.

Hieronder wordt een gradiënt als achtergrond opgegeven. Deze achtergrondkleur is voor browsers die geen gradiënten kennen. Deze krijgen gewoon een effen zwarte achtergrond.

Meer over gradiënten is te vinden bij Gradiënt.

background: -webkit-repeating-linear-gradient(left, black, black 33.3%, white 33.3%, white 66.6%); background: repeating-linear-gradient(to right, black, black 33.3%, white 33.3%, white 66.6%);

Hier staat in feite twee keer hetzelfde: repeating-linear-gradient(to right, black, black 33.3%, white 33.3%, white 66.6%); Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Van 0% tot 33,3% zwart maken, van 33,3% tot 66,6% wit maken, en daarna opnieuw van voren af aan beginnen. De lijn wordt hiermee in drie stukken verdeeld, die elk een derde lang zijn. Omdat de breedte in procenten is opgegeven, blijft elk deel altijd een derde van de breedte van de <hr>, ongeacht de breedte van de <hr>.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

height: 1px;

Een <hr> heeft van zichzelf geen hoogte. Hierboven is een achtergrond aan de <hr> gegeven. Dat kan alleen, als de <hr> een hoogte heeft.

margin-top: 30px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

Standaardborder verwijderen. Dat zou de lijn onzichtbaar maken. Dat gebeurt echter niet, omdat een achtergrond-afbeelding wordt gebruikt. (Een repeating-linear-gradient is een heuse afbeelding, door de browser ter plekke gefabriceerd.)

#vijftien

Het element met id="vijftien". De vijftiende <hr>. De lijn bestaat uit 25 stukjes, afwisselend zwart en wit. Elk stukje lijn beslaat 4% van de breedte. (Vanwege de witte achtergrond zijn de witte delen van de lijn niet te zien op de afbeelding.)

background: black;

Zwarte achtergrond.

Hieronder wordt een gradiënt als achtergrond opgegeven. Deze achtergrondkleur is voor browsers die geen gradiënten kennen. Deze krijgen gewoon een effen zwarte achtergrond.

Meer over gradiënten is te vinden bij Gradiënt.

background: -webkit-repeating-linear-gradient(left, black, black 4%, white 4%, white 8%); background: repeating-linear-gradient(to right, black, black 4%, white 4%, white 8%);

Hier staat in feite twee keer hetzelfde: repeating-linear-gradient(to right, black, black 4%, white 4%, white 8%);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Van 0% tot 4% zwart maken, van 4% tot 8% wit maken, en daarna opnieuw van voren af aan beginnen. De lijn wordt hiermee in 25 stukken verdeeld, die elk 4% lang zijn. Omdat de breedte in procenten is opgegeven, blijft de lijn altijd uit 25 stukjes bestaan, ongeacht de breedte van de <hr>. Ook begint en eindigt de lijn altijd met een zwart streepje.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

height: 1px;

Een <hr> heeft van zichzelf geen hoogte. Hierboven is een achtergrond aan de <hr> gegeven. Dat kan alleen, als de <hr> een hoogte heeft.

margin-top: 20px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

#zestien

Het element met id="zestien". De zestiende <hr>. De lijn is opgebouwd uit elkaar afwisselende rode en blauwe lijntjes. De blauwe lijntjes hebben 3% van de breedte van de <hr>. Het eerste rode lijntje heeft 10%, de andere rode lijntjes 20% van de breedte van de <hr>.

background: black;

Zwarte achtergrond.

Hieronder wordt een gradiënt als achtergrond opgegeven. Deze achtergrondkleur is voor browsers die geen gradiënten kennen. Deze krijgen gewoon een effen zwarte achtergrond.

Meer over gradiënten is te vinden bij Gradiënt.

background: -webkit-repeating-linear-gradient(left, red, red 10%, blue 10%, blue 13%, red 13%, red 23%); background: repeating-linear-gradient(to right, red, red 10%, blue 10%, blue 13%, red 13%, red 23%);

Hier staat in feite twee keer hetzelfde: repeating-linear-gradient(to right, red, red 10%, blue 10%, blue 13%, red 13%, red 23%);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Van 0% tot 10% rood maken, van 10% tot 13% blauw maken, van 13% tot 23% rood maken, en daarna opnieuw van voren af aan beginnen. Omdat de breedte in procenten is opgegeven, blijven er altijd evenveel stukjes van beide kleuren aanwezig, ongeacht de breedte van de <hr>.

Het eerste rode lijntje is 10% breed, de andere rode 20%. Het eerste rode lijntje loopt van 0% tot 10%. Het tweede rode lijntje loopt van 13% tot 23%. En daar eindigt de gradiënt en wordt dus opnieuw begonnen, tot de achtergrond is gevuld. Aan het begin staat eerst die rode lijn van 0% tot 10%. Daar wordt in de herhaling dus mee begonnen.

De tweede rode lijn loopt van 13% tot 23%. In de herhaling komt daar de eerste rode lijn achter, van 23% tot 33%. Samen is dat 20%. Daarna komt weer de blauwe lijn van 3% breedte, de rode lijn van 10%, en dan weer vanaf het begin weer de eerste rode lijn van 10%, enz.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

height: 2px;

Een <hr> heeft van zichzelf geen hoogte. Hierboven is een achtergrond aan de <hr> gegeven. Dat kan alleen, als de <hr> een hoogte heeft.

margin-top: 20px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

#zeventien

Het element met id="zeventien". De zeventiende <hr>. De lijn bestaat uit gekleurde blokjes van elk 8 px breed.

background: #bbb;

Grijze achtergrond.

Hieronder wordt een gradiënt als achtergrond opgegeven. Deze achtergrondkleur is voor browsers die geen gradiënten kennen. Deze krijgen gewoon een effen grijze achtergrond.

Meer over gradiënten is te vinden bij Gradiënt.

background: -webkit-repeating-linear-gradient(left, blue, blue 8px, yellow 8px, yellow 16px, red 16px, red 24px, green 24px, green 32px, black 32px, black 40px, orange 40px, orange 48px, white 48px, white 56px, lime 56px, lime 64px, gold 64px, gold 72px); background: repeating-linear-gradient(to right, blue, blue 8px, yellow 8px, yellow 16px, red 16px, red 24px, green 24px, green 32px, black 32px, black 40px, orange 40px, orange 48px, white 48px, white 56px, lime 56px, lime 64px, gold 64px, gold 72px);

Hier staat in feite twee keer hetzelfde: repeating-linear-gradient(to right, blue, blue 8px, yellow 8px, yellow 16px, red 16px, red 24px, green 24px, green 32px, black 32px, black 40px, orange 40px, orange 48px, white 48px, white 56px, lime 56px, lime 64px, gold 64px, gold 72px);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Van 0 px tot 8 px blauw,, van 8 px tot 16 px geel, van 16 px tot 24 px rood, van 24 px tot 32 px groen, van 32 px tot 40 px zwart, van 40 px tot 48 px oranje, van 48 px tot 56 px wit, van 56 px tot 64 px limoen ('lime'), van 64 px tot 72 px goud, en daarna opnieuw van voren af aan beginnen.

Omdat de breedte in px is opgegeven, is het aantal blokjes afhankelijk van de breedte van de <hr>. Bij een smallere <hr> zijn er minder blokjes.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

height: 8px;

Een <hr> heeft van zichzelf geen hoogte. Hierboven is een achtergrond aan de <hr> gegeven. Dat kan alleen, als de <hr> een hoogte heeft.

margin-top: 20px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

#achttien

Het element met id="achttien". De achttiende <hr>. De lijn is feitelijk helemaal geen lijn, maar alleen een schaduw.

margin-top: 30px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

Standaardborder verwijderen. Dat zou de lijn onzichtbaar maken. Dat gebeurt echter niet, hieronder een schaduw wordt opgegeven.

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

Een box-shadow wordt standaard even groot als het element, waar de schaduw bij hoort. Een <hr> wordt normaal genomen automatisch even breed als z'n ouder. Dat geldt ook voor deze bij de <hr> horende schaduw.

Niet alle waarden worden hier gebruikt, dit is een vrij simpele schaduw.

De eerste waarde is de verplaatsing in horizontale richting. Omdat de schaduw rondom de <hr> moet komen te staan, is als waarde '0' ingevuld. Zou je 20px invullen, dan schuift de schaduw 20 px naar rechts. Bij -20px schuift de schaduw 20 px naar links.

De tweede waarde is de verplaatsing in verticale richting. Hiervoor geldt hetzelfde als hierboven bij de horizontale verplaatsing staat. Een positieve waarde verplaatst de schaduw naar beneden, een negatieve naar boven.

De derde waarde is de breedte van de vervaging: de schaduw wordt vager over een breedte van 8 px.

De vierde waarde is de breedte van de schaduw. Die is hier 3 px. Omdat de <hr> geen hoogte heeft, moet hier minimaal 1 px worden opgegeven. Zou je dat niet doen, dan heeft de schaduw geen hoogte. En omdat de <hr> ook geen hoogte heeft, zie je dan gewoon helemaal niets.

Ten slotte wordt de kleur opgegeven. Als je geen kleur opgeeft, wordt de waarde van color, de voorgrondkleur, gebruikt. Als je geen kleur opgeeft, is dat meestal zwart, maar in Firefox is dat bij een <hr> grijs.

#negentien

Het element met id="negentien". De negentiende <hr>. Een horizontale lijn met aan beide uiteinden een cirkel.

height: 50px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

De ronde lijn heeft links en rechts precies dezelfde ronde hoeken als de cirkels. Dat is de makkelijkste manier om de lijn goed op de cirkels aan te laten sluiten. Om die ronde hoeken precies hetzelfde te maken als de ronding van de cirkels, heeft de <hr> dezelfde hoogte gekregen als de cirkels.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

margin-top: 60px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-top: black solid 1px;

Zwarte rand aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar beneden gaan, moet een border aan de bovenkant worden gebruikt.

border-radius: 25px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: omdat er maar één waarde is opgegeven 25 px in horizontale richting en 25 px in verticale richting. Dit levert een cirkelvormige hoek op die precies even groot is als die van de cirkels.

Hoewel deze waarden voor alle vier de hoeken gelden, zijn er maar twee zichtbaar, want alleen aan de bovenkant is een border aanwezig. Als je de <hr> een achtergrond zou geven, kun je zien dat er inderdaad aan de onderkant ook ronde hoeken aanwezig zijn.

Door deze border ook ronde hoeken te geven, sluit hij beter op de cirkels aan.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: relative;

#negentien::before

Met behulp van ::before bij het element met id="negentien", de negentiende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel links.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50px; height: 50px;

Breedte en hoogte. Omdat deze gelijk zijn, levert dit een vierkant pseudo-element op. Door de ronding van de hoeken horizontaal en verticaal half zo groot te maken als deze breedte en hoogte, krijg je een cirkel.

border: black solid 1px;

Zwartje randje.

border-radius: 25px;

Hoeken rondmaken. Omdat maar één waarde is opgegeven, wordt de ronding van alle hoeken in horizontale en verticale richting 25 px. Wat precies de helft is van de breedte en hoogte van het pseudo-element. Waarmee de border is veranderd in een cirkel.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

left: 0;

Helemaal links neerzetten. Dit zou eigenlijk niet nodig moeten zijn, maar anders zetten alle versies van Internet Explorer en UC browser op Windows Phone het pseudo-element in het midden van de <hr> neer.

#negentien::after

Met behulp van ::after bij het element met id="negentien", de negentiende <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 50px; height: 50px;

border: black solid 1px;

Zwart randje.

border-radius: 25px;

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

right: 0;

Pseudo-element helemaal rechts neerzetten.

#twintig

Het element met id="twintig". De twintigste <hr>. Een horizontale lijn met aan beide uiteinden een cirkel met daarin een rode stip.

height: 50px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

margin-top: 20px;

Marge aan de bovenkant voor wat afstand tot de <hr> erboven.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-top: black solid 1px;

Zwarte rand aan de bovenkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar beneden gaan, moet een border aan de bovenkant worden gebruikt.

border-radius: 25px;

Ronde hoeken.

Door deze border ook ronde hoeken te geven, sluit hij beter op de cirkels aan.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: relative;

#twintig::before

Met behulp van ::before bij het element met id="twintig", de twintigste <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel met stip links.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

background: -webkit-radial-gradient(red 25%, white 25%); background: radial-gradient(red 25%, white 25%);

Hier staat in feite twee keer hetzelfde: radial-gradient(red 25%, white 25%);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Dit levert een rode stip op. Je zou ook in content: ""; als inhoud een ronde stip kunnen opgeven, met een rode voorgrondkleur, maar zo'n stip blijkt in sommige browsers te hoog of te laag te staan. Een gradiënt staat in alle browsers precies in het midden.

Een radiale gradiënt wordt, als je dat niet wijzigt, vanuit het midden opgebouwd. In het midden een ronde stip met een breedte van 25% van de gradiënt. Vanaf 25% als kleur wit gebruiken.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

width: 50px; height: 50px;

border: black solid 1px;

Zwart randje.

border-radius: 25px;

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

left: 0;

#twintig::after

Met behulp van ::after bij het element met id="twintig", de twintigste <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel met stip rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

background: -webkit-radial-gradient(red 25%, white 25%); background: radial-gradient(red 25%, white 25%);

Hier staat in feite twee keer hetzelfde: radial-gradient(red 25%, white 25%);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Een radiale gradiënt wordt, als je dat niet wijzigt, vanuit het midden opgebouwd. In het midden een ronde stip met een breedte van 25% van de gradiënt. Vanaf 25% als kleur wit gebruiken.

Een uitgebreide beschrijving van gradiënten is te vinden bij Gradiënt.

width: 50px; height: 50px;

border: black solid 1px;

Zwart randje.

border-radius: 25px;

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

right: 0;

Pseudo-element helemaal rechts neerzetten.

#eenentwintig

Het element met id="eenentwintig". De 21e <hr>. Een gebogen lijn met aan beide uiteinden een cirkel.

width: 40px;

Een <hr> wordt automatisch even breed als z'n ouder. Hiermee wordt de breedte beperkt tot 40 px. Omdat een <hr> automatisch horizontaal wordt gecentreerd, komt de lijn in het midden van z'n ouder div#content te staan.

height: 40px;

Hoogte. Hieronder worden ronde hoeken aan de border gegeven. Dat kan alleen maar, als het pseudo-element een hoogte krijgt.

overflow: visible;

Dit is nodig om te voorkomen dat in sommige browsers een deel van de lijn verdwijnt. Meer hierover bij overflow.

border: none;

Standaardborder verwijderen. Dat geeft de mogelijkheid om een eigen, aangepaste border te gebruiken.

border-bottom: black solid 1px;

Zwarte rand aan de onderkant. Omdat ronde hoeken altijd naar binnen buigen en deze hoeken naar boven gaan, moet een border aan de onderkant worden gebruikt.

border-radius: 20px;

Ronde hoeken.

Voor alle vier de hoeken zijn de waarden van de rondingen hetzelfde: omdat er maar één waarde is opgegeven 20 px in horizontale richting en 20 px in verticale richting. Dit levert een cirkelvormige hoek op die precies even groot is als die van de cirkels.

Door deze border ook ronde hoeken te geven, sluit hij beter op de cirkels aan.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: relative;

#eenentwintig::before

Met behulp van ::before bij het element met id="eenentwintig", de 21e <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel rechts.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 30px; height: 30px;

border: black solid 1px;

Zwart randje.

border-radius: 15px;

Hoeken rondmaken. Omdat maar één waarde is opgegeven, wordt de ronding van alle hoeken in horizontale en verticale richting 15 px. Wat precies de helft is van de breedte en hoogte van het pseudo-element. Waarmee de border is veranderd in een cirkel.

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 23px; right: -25px;

Op deze positie sluit de cirkel goed aan op de horizontale lijn.

#eenentwintig::after

Met behulp van ::after bij het element met id="eenentwintig", de 21e <hr>, een pseudo-element aanmaken. Dit pseudo-element zorgt voor de cirkel links.

content: "";

Er komt geen inhoud in het pseudo-element te staan, maar de eigenschap content is altijd verplicht. Als er niets in komt te staan, zoals hier, geef je dat aan met "".

width: 30px; height: 30px;

border: black solid 1px;

Zwart randje.

border-radius: 15px;

Een uitgebreider verhaal over border-radius staat bij border-radius.

position: absolute;

top: 23px; left: -25px;

Op deze positie sluit de cirkel goed aan op de horizontale lijn.

Voorbeelden van <hr>'s die geen aaneen­gesloten, rechte lijn zijn

Korte omschrijving

BELANGRIJK

Opmerkingen

Achterliggend idee

De voorvoegsels -moz-, -ms- en -webkit-

transform:

linear-gradient:

repeating-linear-gradient

radial-gradient

Semantische elementen en WAI-ARIA

Semantische elementen

WAI-ARIA-codes

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Specifiek voor dit voorbeeld

Getest in

Bekende problemen (en oplossingen)

Internet Explorer 9

Verschillen in weergave

Android browser

Zoomen

Wijzigingen

Inhoud van de download en licenties

105-css-dl:

HTML

<!DOCTYPE html>

<html lang="nl">

<meta charset="utf-8">

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

<link rel="stylesheet" href="105-css-dl/tekst-105-dl.css">

CSS

Uitgebreide beschrijvingen van een eigenschap

border-radius

border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius

Waarden

De shorthand border-radius

overflow

Gradiënt

linear-gradient

repeating-linear-gradient

radial-gradient

Volledige css

/* tekst-105-dl.css */

body

#content

#twee

#drie

#vier

#vijf

#zes

#zeven

#zeven::before

#zeven::after

#acht

#acht::before

#acht::after

#negen

#negen::before

#negen::after

#tien

#tien::before

#tien::after

#elf

#twaalf

#twaalf::before

#twaalf::after

#dertien

#dertien::before

#veertien

#vijftien

#zestien

#zeventien

#achttien

#negentien

#negentien::before

#negentien::after

#twintig

#twintig::before

#twintig::after

Voorbeelden van <hr>'s die geen aaneengesloten, rechte lijn zijn