Skip links en inhoudsopgave

Uitleg met clip-path gemaakte pijl met schaduw. De schaduw volgt de omtrek van de pijl

Laatst aangepast: .

Met clip-path gemaakte pijl met schaduw.

Korte omschrijving

De buitenkant van de pijl is gevormd met behulp van clip-path. De tekst in de pijl is gewone tekst. Door gebruik van een filter volgt de schaduw de buitenkant van de pijl.

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.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie 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 min of meer 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.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

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

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

Opmerkingen

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

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

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

Achterliggend idee

Er worden twee <div>'s gebruikt: één voor de pijl, en één voor de schaduw. De <div> met de pijl staat binnen de <div> met de schaduw:

<div id="schaduw"> <div id="pijl">Dit is een pijl</div> </div>

Omdat de pijl met behulp van clip-path is gevormd, kun je daar niet zonder meer een schaduw aan geven. Daarvoor wordt de buitenste div#schaduw gebruikt.

Eerst de binnenste <div>, div#pijl.

Deze <div> is een doodgewone <div>, waarin de opwindende tekst 'Dit is een pijl' staat. Die <div> heeft een regelhoogte in vw gekregen, waardoor de hoogte afhankelijk is van de breedte van het venster van de browser.

Omdat een <div> een blok-element is, wordt het normaal genomen even breed als z'n ouder. De ouder van div#pijl is div#schaduw, die een breedte in vw heeft gekregen. Omdat hoogte en breedte beide afhankelijk zijn van de breedte van het browservenster, blijven de verhoudingen van de pijl in vensters van elke breedte ongeveer hetzelfde.

Ook de lettergrootte is in de eenheid vw, zodat die mee verandert met de breedte en hoogte van de <div>.

Hoewel het er anders uitziet, is div#pijl een gewone rechthoekige <div> met een zwarte achtergrond. Alleen zijn met behulp van clip-path delen van die <div> doorzichtig gemaakt. Dat is gebeurt in de vorm van een pijl, waardoor het lijkt, alsof de <div> is veranderd in een pijl.

De werkelijke omtrek van de pijl zichtbaar gemaakt.

Op de afbeelding hierboven zijn aan alle kanten van de <div> met de pijl vier elementen met een gestippelde border neergezet. De binnenste stippellijn van de vier elementen staat tegen de buitenkant van de <div> met de pijl aan. Als je clip-path weg zou halen bij de <div> met de pijl, zou je een gewone zwarte rechthoek hebben, die grenst aan de stippellijnen.

Het enige wat clip-path feitelijk doet, is het doorzichtig maken van delen van het element. Door die doorzichtige delen zie je, in dit geval, de beige achtergrond van de pagina.

clip-path weergegeven in shape-editor van Firefox.

De pijlvorm wordt verkregen door voor alle hoekpunten de coördinaten op te geven. Op de afbeelding hiernaast zijn die zichtbaar gemaakt, zoals ze eruit zien in de editor in het ontwikkelgereedschap van Firefox. Je geeft voor elk punt de coördinaten op (horizontale en verticale afstand tot linker- en bovenkant van het element). De browser maakt vervolgens de verbinding tussen die punten, en maakt alles buiten die punten doorzichtig.

Omdat alle maten bij clip-path in procenten zijn opgegeven, is het relatief makkelijk een goede verdeling te krijgen. Bovendien blijft die verdeling bestaan bij een andere grootte van de <div>: 25% vanaf de bovenkant is bij élke grootte 25% vanaf de bovenkant. Als je als eenheid een absolute eenheid als px zou gebruiken, zouden de verhoudingen veranderen bij een andere grootte van de <div> met de pijl: 100 px vanaf de bovenkant is altijd 100 px vanaf de bovenkant, ongeacht de grootte van de <div>.

div#pijl is dus een gewone rechthoekige <div>, al zie je dat niet. Normaal genomen zou je aan een <div> een schaduw geven met behulp van box-shadow, zoals op de afbeelding hieronder is gedaan:

De werkelijke omtrek van de pijl zichtbaar gemaakt.

Dat levert echter niet helemaal een schaduw op, die netjes de pijl volgt. De box-shadow volgt gewoon dom de buitenkant van de <div>, want de arme ziel kan nou eenmaal niet anders. box-shadow heeft de flexibiliteit van de Belastingdienst ten opzichte van vermeende fraudeurs.

Bovendien is op de afbeelding ook nog 'ns fors valsgespeeld, want in werkelijkheid zou je helemaal geen schaduw zien.

De pijl is met behulp van clip-path gemaakt. Alles buiten de omtrek van de met clip-path gemaakte figuur wordt verborgen. En de schaduw ligt buiten die omtrek. Dus die zie je ook niet. box-shadow is dus, in combinatie met clip-path, volslagen onbruikbaar. (Hetzelfde geldt trouwens, om dezelfde reden, ook voor border, outline, en dergelijke.)

Daarom staat div#pijl binnen een andere <div>: div#schaduw. De schaduw wordt aan die buitenste <div> gegeven. Maar dan geen 'gewone' box-shadow, want die zou gewoon de rechthoekige div#schaduw volgen. (Dat is ook de manier, waarop de valse afbeelding hierboven is gemaakt.)

Bij div#schaduw wordt de eigenschap filter: drop-shadow() gebruikt. Een filter voert een of andere grafische bewerking uit, zoals het verkleuren van een foto, of het veranderen van kleur in grijstinten. Het filter drop-shadow() maakt een soort vage spiegel-afbeelding van de inhoud van div#schaduw de schaduw. Daarbij wordt de omtrek van de inhoud van div#schaduw gevolgd: in dit geval de pijl.

Je kunt de plaats en de breedte van de schaduw aangeven. Dat is hier ook weer grotendeels gedaan met de eenheid vw, net zoals de grootte van de pijl en de daarin zittende tekst. Hierdoor krijg je op 'n mobieltje geen schaduw die eigenlijk op een breedbeeldscherm hoort, en omgekeerd.

Omdat bij div#schaduw geen clip-path is gebruikt, wordt deze schaduw gewoon weergegeven, ook het deel dat buiten div#pijl ligt.

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 Edge, Google Chrome, Opera, Safari en Android browser: -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 en Edge gebruiken Blink.)

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

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 Safari herkent -webkit-appearance. Zodra Safari appearance gaat herkennen, zal dit -webkit-appearance overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

In dit voorbeeld wordt clip-path gebruikt.

appearance

Op dit moment moet je nog het volgende schrijven:

{-webkit-clip-path: ...; clip-path: ...;}

In de toekomst kun je volstaan met:

{clip-path: ...;}

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.

Vanwege alle problemen met 'vendor prefixes' worden deze niet meer gebruikt. Nieuwe, experimentele css-eigenschappen zitten inmiddels achter een zogenaamde vlag: de gebruiker moet iets veranderen in de instellingen, waarna de eigenschap gebruikt (en getest) kan worden. Als alles werkt, zoals het hoort te werken, schakelt de browsermaker de vlag standaard in.

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.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 25 september 2021.

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

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 ppi):
Firefox, Google Chrome en Edge, in grotere en kleinere browservensters.

OS X 10.14.6 ('Mojave') (1680 x 1050 px, resolution: 96 ppi, device-pixel-ratio: 1):
Firefox, Safari, Google Chrome en Microsoft Edge, in grotere en kleinere browservensters.

Linux (Kubuntu 20.04 LTS, 'Focal Fossa') (2560 x 1080 px, resolution: 96 ppi):
Firefox en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 135 ppi):
Bureaublad-versie: Firefox, Google Chrome en Edge, in grotere en kleinere browservensters.

Windows 10 (1600 x 900 px, resolution: 106 ppi):
Firefox, Google Chrome en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 12.5.4 (2048 x 1536 px, device-pixel-ratio: 2:
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

iPad met iOS 13.3 (gesimuleerd in Xcode):
Safari (portret en landschap).

iPad met iPadOS 14.8 (2160 x 1620 px, 264 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 224 ppi):
Samsung Internet, Firefox en Chrome (alle portret en landschap).

Android 8.1 ('Oreo') (1920 x 1200 px, resolution: 218 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 11 (2000 x 1200 px, resolution: 225 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Smartphones

iPhone 7 met iOS 12.4 (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone 8 met iOS 13.3 (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone met iOS 14.8 (1334 x 750 px, 326 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 7.0 ('Nougat') (1280 x 720 px, resolution: 294 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 9.0 ('Pie') (1920 x 1080 px, resolution: 424 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook 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 iOS, iPadOs en Android, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. Op iOS, iPadOS en Android 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. Ook in Edge is niet getest zonder JavaScript, omdat Microsoft het onmogelijk heeft gemaakt dit uit te zetten. Ten slotte is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke

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

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

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

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 6.0, 7.0, 8.1, 9 en 11

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS 12.5.4 en 14.8, iPadOS 14.8 en OS X 10.14.6.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma's zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke.)

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 problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (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 Samsung Internet op Android 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 geen beginnen aan.

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

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er 'n redelijke kans dat je tegen 'n bug zit te vechten, 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 kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

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.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak 'n probleem, en omgekeerd. Daarom staan wat betreft toegankelijkheid aanpassingen en problemen hier bij elkaar in dit hoofdstukje.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen de overige problemen in één of meer specifieke browsers.

Als in een onderdeel geen problemen aanwezig zijn, staat in een smal groen kadertje 'Geen problemen'. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. Ook in dat geval staat bovenaan in een smal groen kadertje 'Geen problemen'. Daaronder staan dan de aanpassingen.

Als in een onderdeel één of meer problemen worden besproken, staat van elk probleem in een breed rood kadertje een korte samenvatting daarvan.

Als bij het probleem een oplossing wordt gegeven, staat de samenvatting in een rode stippellijn. Bij een onderwerp over toegankelijkheid zijn er soms, naast de opgeloste problemen, ook aanpassingen. In dat geval staan staan die aanpassingen boven de kadertjes met opgeloste problemen.

Als bij het probleem geen oplossing is gevonden, staat de samenvatting in een rode ononderbroken lijn. Bij een onderwerp over toegankelijkheid zijn er soms, naast de problemen, ook aanpassingen. In dat geval staan staan die aanpassingen boven de kadertjes met problemen.

Zonder css

Geen problemen.

Zonder css wordt de tekst gewoon in de volgorde van de html op het scherm gezet. Uiteraard is de pijl verdwenen.

Tekstbrowsers

Geen problemen.

WebbIE en Lynx zetten de tekst gewoon in de volgorde van de html op het scherm.

Schermlezers

Geen problemen.

Schermlezers lezen de tekst in de volgorde van de html voor.

Zoomen en andere lettergrootte

Geen problemen.

Overige problemen

Edge op Android toont geen schaduw.

Edge op Android gebruikt een tamelijk oude versie van weergave-machine Blink, die min() en max() nog niet ondersteunt. En dat wordt gebruikt bij de schaduw. Daardoor zie je in Edge op Android helemaal geen schaduw.

Je zou voor deze browser extra code kunnen aanbrengen, maar echt mooi wordt dat niet, want dan zou de schaduw altijd 'n bepaalde maat hebben, ongeacht de grootte van de pijl. Of zich daar in ieder geval niet naadloos aan aanpassen.

Omdat het alleen om een extra decoratie gaat, is dit gewoon zo gelaten. Er zullen geen gewapende hordes naar het Binnenhof optrekken vanwege het ontbreken van deze schaduw. Bovendien lost het probleem zichzelf op, want binnen niet al te lange tijd zal ook Edge op Android een versie van Blink gebruiken, die min() en max() wel ondersteunt.

Wijzigingen

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

:

Nieuw opgenomen.

(Oorspronkelijk stond hier een heel ander voorbeeld: het maken van een schaduw met behulp van een extra afbeelding. Dat doe je tegenwoordig 309 keer zo goed en 6209 zo makkelijk met box-shadow, dus dat was echt volledig verouderd. Vandaar dat het is vervangen.)

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 min of meer regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

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

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

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

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

050-css-dl:

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

HTML

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

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

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

<!doctype html>

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

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

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

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

<html lang="nl">

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

<meta charset="utf-8">

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

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

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

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

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

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, 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, enzovoort, 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. In dit voorbeeld bijvoorbeeld wordt de grootte van de pijl aan de breedte van het venster aangepast.

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 wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

CSS

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

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, enzovoort, 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. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

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

/* figuren-050-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.

color: black;

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

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

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

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

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

font-size: 110%;

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

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

margin: 0;

Slim om te doen vanwege verschillen tussen browsers.

#schaduw

Het element met id="schaduw". De buitenste <div>, de <div> die voor de schaduw zorgt.

De schaduw hoort bij de pijl, die niet binnen div#schaduw, maar binnen div#pijl zit. Een schaduw aan div#pijl geven heeft echter geen zin, omdat de pijl is gevormd met behulp van clip-path. Daardoor wordt een schaduw, die binnen div#pijl aan de pijl wordt gegeven, onzichtbaar. Een uitgebreider verhaal waarom een schaduw aan de pijl geven bij div#pijl niet en bij div#schaduw wel werkt, staat bij Achterliggend idee.

filter: drop-shadow(max(4px, 0.7vw) min(-5px, -0.7vw) max(2px, 0.2vw) rgba(0, 0, 0, 0.5));

Met behulp van de eigenschap filter kun je allerlei grafische bewerkingen uitvoeren. Zoals het lichter of donkerder maken van een foto, kleuren omkeren, en nog veel meer. Welke bewerking wordt uitgevoerd, wordt bepaald door de bij filter gebruikte functie. Hier is dat drop-shadow(). Dit filter maakt een soort vage schaduw-afbeelding van wat er binnen div#schaduw zit. Tussen de haakjes staan waarden die bepalen hoe die schaduw eruit ziet.

De afmetingen van de pijl en de tekst daarin worden traploos aangepast aan de breedte van het venster van de browser. Daarom moeten ook de maten van de schaduw worden aangepast, want anders zou je in een smal venster een (veel) te grote schaduw krijgen, en in een breed venster juist een (veel) te kleine.

Voor dat aanpassen wordt gebruik gemaakt van max() en min(), vandaar dat deze regel er wat ingewikkeld uitziet. Maar eigenlijk staan er maar vier waarden, gescheiden door een spatie.

Op de afbeelding hieronder zijn die vier waarden vervangen door vier minder ingewikkelde:

filter: drop-shadow(30px -30px 10px #555);

De waarden zijn ook wat groter dan die in het voorbeeld, zodat de schaduw duidelijker is te zien.

De schaduw bij de pijl met grotere waarden: .

filter: drop-shadow() zorgt ervoor dat de omtrek van de pijl wordt gevolgd. Hóé die omtrek wordt gevolgd, wordt bepaald door de waarden tussen de haakjes.

De eerste waarde 30px is de horizontale verplaatsing van de schaduw ten opzichte van de pijl: 30 px naar rechts.

De tweede waarde -30px is de verticale verplaatsing van de schaduw ten opzichte van de pijl: 30 px naar boven. Omdat het een negatieve waarde is, wordt naar boven verplaatst. Bij een positieve waarde van 30px zou naar beneden worden verplaatst.

Standaard zijn deze twee waarden 0. Maar als je ze allebei op 0 zou laten staan, zou de schaduw precies ónder de pijl komen te staan: onzichtbaar.

Althans: dat zou zo zijn, als er niet nog een derde waarde zou zijn: 10px. Deze bepaalt, over welke afstand de schaduw vervaagt: 10 . Je ziet dus altijd een heel vage schaduw van 10 px, ook als de horizontale en verticale verplaatsing 0 px is.

Zonder vervaging heeft de schaduw een scherpe rand.

Op de afbeelding hiernaast is de derde waarde veranderd in 0: filter: drop-shadow(30px -30px 0 #555);. Omdat er nu niet wordt vervaagd, heeft de schaduw een scherpe rand. Nogal een verschil met de eerdere afbeelding, waar de schaduw wel langzaam vervaagde over een afstand van 10 px.

De vierde en laatste waarde #555 is de kleur: grijs. Die waarde is niet verplicht, als je hem weglaat, wordt de voorgrondkleur (color) gebruikt. Je zou hem hier dus weg kunnen laten, maar het is veiliger (en duidelijker) om ook die vierde waarde gewoon te gebruiken. Als anders ooit color bij een van de voorouders verandert, verandert de kleur van de schaduw ook plotsklaps, want color wordt geërfd van de voorouders van het element.

Eigenlijk gaat het dus maar om vier waarden bij drop-shadow(), gescheiden door een spatie. Dat geldt ook voor de meer ingewikkelde regel uit het voorbeeld.

In de regel hieronder staat dropshadow(), zoals dat in het voorbeeld wordt gebruikt. De vier waarden worden door een spatie van elkaar gescheiden. Om dat duidelijker te maken, is die spatie vervangen door een stip ●:

filter: drop-shadow(max(4px, 0.7vw)(-5px, -0.7vw)max(2px, 0.2vw)rgba(0, 0, 0, 0.5));

Dat die vier waarden er wat ingewikkelder uitzien, maakt niets uit voor het principe: het zijn nog steeds vier waarden. Als zou je nog zeven geneste calc()'s toevoegen, het blijven vier waarden.

De eerste waarde max(4px, 0.7vw) zorgt weer voor de horizontale verplaatsing naar rechts.

De tweede waarde min(-5px, -0.7vw) zorgt weer voor de verticale verplaatsing. Naar boven, want de waarden zijn negatief.

De derde waarde max(2px, 0.2vw) bepaalt weer de afstand, waarover de rand van de schaduw vervaagt.

En de vierde waarde rgba(0, 0, 0, 0.5) ten slotte bepaalt de kleur: doorzichtig zwart.

Bij de eerste waarde max(4px, 0.7vw) wordt de eenheid vw gebruikt. 1 vw is 1% van de breedte van het venster van de browser. 0,7 vw is dus 0,7 % van die breedte.

De functie max() gebruikt de grootste van twee waarden, die worden gescheiden door een komma. 4px is altijd 4 px, maar 0.7vw is afhankelijk van de breedte van het browservenster.

Bij een browservenster met een breedte van 1000 px is 0,7% 7 px. Je kunt max(4px, 0.7vw) in zo'n venster dus vervangen door max(4px, 7px). Omdat max() de grootste waarde van de twee gebruikt, is de horizontale verplaatsing in zo'n venster dus 7 px naar rechts. En hoe breder het venster is, hoe groter de verplaatsing wordt. Wat goed uitkomt, want in een breed venster wordt ook de pijl breder.

In een browservenster met een breedte van 320 px is 0,7% 2,24 px. Je komt daarin dus uit op max(4px, 2.24px). Omdat max() de grootste waarde gebruikt, is dat hier 4 px. De horizontale verplaatsing is dus nooit minder dan 4 px naar rechts. Zou het kleiner worden, dan is de schaduw vrijwel niet meer te zien.

De derde waarde max(2px, 0.2vw) werkt precies hetzelfde als de gelijk hierboven beschreven eerste waarde, maar deze waarde bepaalt de breedte van de vervaging. Die is dus nooit minder dan 2 px.

De tweede waarde min(-5px, -0.7vw) werkt ook ongeveer hetzelfde als de iets hierboven beschreven eerste waarde, maar min() gebruikt juist de kleinste van twee waarden. Deze waarde bepaalt de verticale richting. Naar boven, want het zijn negatieve waarden.

Er is even wat hersengymnastiek nodig – en schrijver dezes ging hier ook eerst de mist in –, maar in dit geval heb je niet de grootste, maar juist de kleinste waarde nodig, om in een smal browservenster een voldoende grote verplaatsing naar boven te krijgen. Omdat voor een verplaatsing naar boven een negatieve waarde nodig is, levert een grotere absolute waarde (het getal zonder het minteken) een grotere verplaatsing op.

Stel dat min(-5px, -0.7vw) zou uitkomen op min(-5px, -2px), dan moet 5 px naar boven worden verplaatst, de minimale verplaatsing. Omdat -5px kleiner is dan -2px, moet je hier geen max(), maar juist min() gebruiken.

De minimale verplaatsing naar boven is dus altijd 5 px, ongeacht de breedte van het browservenster. En in bredere vensters is de verplaatsing naar boven weer groter.

De vierde waarde rgba(0, 0, 0, 0.5) bepaalt de kleur van de schaduw: doorzichtig zwart. Doorzichtig, omdat dat een betere schaduw oplevert.

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

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

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

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

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

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

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

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

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

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

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

In dit voorbeeld is de schaduw half doorzichtig: 0.5. Dit levert een wat zachtere, meer realistische schaduw op.

Samengevat betekent de regel filter: drop-shadow(max(4px, 0.7vw) min(-5px, -0.7vw) max(2px, 0.2vw) rgba(0, 0, 0, 0.5)); dus: geef aan de inhoud van div#schaduw (de pijl) een schaduw met:

* een verplaatsing naar rechts van 0,7 % van de breedte van het browservenster, maar minimaal 4 px;

* een verplaatsing naar boven van 0,7% van de breedte van het browservenster, maar minimaal 5px;

* een vervaging over een breedte van 0,2% van de breedte van het browservenster, maar minimaal 2px;

* met een half doorzichtige zwarte kleur.

Voor het vinden van deze waarden is geen opleiding hogere geometrische functionele algebra of zo nodig: ze zijn gevonden door gewoon uitproberen.

width: 70vw;

Breedte.

De eenheid vw is gebaseerd op de breedte van het venster van de browser. 1 vw is 1% van de breedte van het venster, en 70 vw is 70% van de breedte. De <div> met de schaduw wordt hierdoor nooit breder dan 70% van de breedte van het venster, ongeacht de breedte van het venster.

De in div#schaduw zittende div#pijl is een blok-element, waardoor div#pijl – en dus de daarin zittende pijl – automatisch even breed wordt als div#schaduw. Deze breedte bepaalt dus ook de breedte van de pijl.

margin: 20px auto;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 20px auto 20px auto in de volgorde boven – rechts – onder – links.

Aan de bovenkant een kleine afstand tot de bovenkant van het venster van de browser. De marge aan de onderkant is hier onbelangrijk.

Links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staat div#schaduw, en daarmee alles daarbinnen, altijd horizontaal gecentreerd binnen z'n ouder. Die ouder is hier <main>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. Die ouder is <body>, ook weer een blok-element, dat dus weer even breed wordt als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen automatisch even breed als het venster van de browser.

Uiteindelijk staat div#schaduw hierdoor altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster.

#pijl

Het element met id="pijl". De binnenste <div>, de <div> met de pijl.

Bij dit element zijn de belangrijkste maten opgegeven in vw, in procenten van de breedte van het browservenster. Dit element, en daarmee de erin zittende pijl en tekst, past zich daardoor sterk aan de breedte van het venster aan.

background: black;

Zwarte achtergrond.

color: white;

Witte voorgrondkleur. Dit is onder andere de kleur van de tekst.

webkit-clip-path: polygon(100% 25%, 90% 50%, 100% 75%, 25% 75%, 25% 100%, 0 50%, 25% 0, 25% 25%); clip-path: polygon(100% 25%, 90% 50%, 100% 75%, 25% 75%, 25% 100%, 0 50%, 25% 0, 25% 25%);

Hier staat eigenlijk twee keer hetzelfde: clip-path: polygon(100% 25%, 90% 50%, 100% 75%, 25% 75%, 25% 100%, 0 50%, 25% 0, 25% 25%);. Waarom dat zo is, is te vinden bij De voorvoegsels -moz,- -ms- en -webkit-.

Bij een eerste blik lijkt dit misschien op een koers voor een ruimteschip of zo. Maar als je het in stukjes hakt, valt dit enigszins mee. Bovendien heb je allerlei handige gereedschappen om te helpen met het vinden van de juiste getallen.

Om te beginnen valt het hele deel voor de eerste ; weg, want het deel achter clip-path is een herhaling van het deel achter ‑webkit-clip-path. Sommige browsers hebben het voorvoegsel -webkit- nog nodig, vandaar.

Dat halveert de ellende al, dat schiet lekker op.

Met het sleutelwoord polygon wordt aangegeven dat hier een polygoon, een 'veelhoek' wordt gemaakt. Dat is een figuur met een (groot) aantal hoeken. Het kan een onregelmatige figuur zijn, zoals een ster, maar ook een gewoon vierkant of rechthoek. Of, zoals hier, een pijl.

Je geeft aan waar de hoekpunten van de figuur komen, en de browser trekt daar dan rechte lijnen tussen. Van het laatste hoekpunt trekt de browser een rechte lijn naar het eerste hoekpunt, zodat je een gesloten figuur krijgt. Alles buiten die figuur wordt dan verborgen.

(Je kunt met andere sleutelwoorden ook bijvoorbeeld ronde lijnen maken, of een afbeelding gedeeltelijk verbergen, maar dat gebeurt hier allemaal niet.)

Omdat de browser een gesloten veelhoek maakt, maakt de volgorde van de hoekpunten niet uit. Bij een gesloten figuur is er niet echt een eerste of een laatste punt. In het voorbeeld is het eerst opgegeven punt de rechterbovenkant van de bovenste staartpunt. Waarom? Omdat dat toevallig zo ontstond.

De <div> waar de pijl in zit, is een doodgewone rechthoek. Omdat een <div> een blok-element is, krijgt dit normaal genomen automatisch dezelfde breedte als z'n ouder. Die ouder is hier div#pijl, die bij #pijl een breedte van 70 vw heeft gekregen: 70% van de breedte van het browservenster.

De regelhoogte is 14 vw, 14% van de breedte van het browservenster. Omdat geen gewone hoogte is opgegeven, is dit ook de hoogte van de <div>. De <div>, en daarmee de erin zittende pijl, verandert dus mee met de breedte van het venster.

Daarom worden hier de maten van de hoekpunten in procenten opgegeven. Als de <div> van grootte verandert, verandert de positie van de hoekpunten in dezelfde verhouding mee. De procenten gelden ten opzichte van de <div>, bijvoorbeeld 25% vanaf de bovenkant van de <div>.

Anders dan bij absolute maten zoals px verandert die 25% mee met de grootte van de <div>: 25% vanaf de bovenkant is áltijd 25%, ongeacht de hoogte van de <div>. Maar als dat beter uitkomt, kun je ook andere eenheden dan procenten gebruiken.

De hoekpunten worden opgegeven met behulp van twee coördinaten, twee getallen. Achter het sleutelwoord polygon worden die tussen haakjes in paren van twee opgegeven, gescheiden door een komma. Het eerste getal van elk tweetal is de horizontale afstand tot de linkerkant van het element (hier de <div>), het tweede getal is de afstand tot de bovenkant van het element.

Het eerste tweetal is hier 100% 25%. 100% vanaf de linkerkant van de <div>, dat is hetzelfde als helemaal rechts. En 25% vanaf de bovenkant. Dit hoekpunt bepaalt het uiteinde rechts van de bovenste staartpunt.

Op de afbeelding hieronder staat div#pijl, de <div> met de pijl. Omdat de schaduw bij div#schaduw wordt afgehandeld, ontbreekt die schaduw hier. Daaronder staat diezelfde div#pijl nogmaals, maar dan zonder de achtergrond, en met hoekpunten en dergelijke. De buitenste zwarte rand op die onderste afbeelding is de <div> met de pijl. De bij de hoekpunten gebruikte percentages worden met stippellijnen weergegeven, en de hoekpunten zelf zijn weergegeven met getallen in cirkeltjes, in de volgorde waarin ze bij clip-path staan.

Als kind had je van die afbeeldingen met getallen, waartussen je lijntjes moest trekken. Dat leverde dan uiteindelijk een herkenbare tekening op. De afbeelding werkt hetzelfde: als je denkbeeldige rechte lijnen tussen de hoekpunten trekt, zie je de pijl. Alles binnen die rechte lijnen is zwart, alles buiten die lijnen is doorzichtig, waardoor je daar de achtergrondkleur van de pagina ziet.

Pijl zonder schaduw.

Pijl met maatlijnen en hoekpunten.

De coördinaten van het eerste hoekpunt zijn 100% 25%: de 1 staat helemaal rechts in de <div>, en 25% vanaf de bovenkant.

De coördinaten van het tweede hoekpunt zijn 90% 50%: 90% vanaf links, verticaal halverwege de <div>. Dit levert een schuine lijn tussen punt 1 en punt 2 op.

De coördinaten van het derde hoekpunt zijn 100% 75% : helemaal rechts en op driekwart vanaf de bovenkant van de <div>. Dit levert een schuine lijn tussen punt 2 en punt 3 op.

De coördinaten van het vierde hoekpunt zijn 25% 75%: 25% vanaf links en op driekwart van de bovenkant van de <div>. Dit levert een horizontale lijn tussen punt 3 en punt 4 op.

De coördinaten van het vijfde hoekpunt zijn 25% 100%: 25% vanaf links en helemaal aan de onderkant van de <div>. Dit levert een verticale lijn tussen punt 4 en punt 5 op.

De coördinaten van het zesde hoekpunt zijn 0 50%: helemaal links en verticaal halverwege de <div>. Dit levert een schuine lijn tussen punt 5 en punt 6 op.

De coördinaten van het zevende hoekpunt zijn 25% 0: op 'n kwart vanaf links en helemaal bovenaan de <div>. Dit levert een schuine lijn tussen punt 6 en punt 7 op.

De coördinaten van het achtste en laatste hoekpunt zijn 25% 25%: op 'n kwart vanaf links en 'n kwart vanaf de bovenkant van de <div>. Dit levert een verticale lijn tussen punt 7 en punt 8 op.

En omdat punt 8 het laatste opgegeven hoekpunt is, trekt de browser nog een lijn tussen punt 8 en punt 1: een horizontale lijn. Waarmee de polygoon gesloten is.

Pijl met scherpe punt.

Eén van de grote voordelen van clip-path (en soortgelijke eigenschappen als shape-outside): je kunt uiterst simpel wijzigingen aanbrengen.

Om de hierboven staande pijl te krijgen is alleen bij het vijfde en zevende punt 25% veranderd in 35%, waardoor die punten verder naar rechts komen te liggen. In eerdere versies van dit voorbeeld, waarbij afbeeldingen werden gebruikt, is zo'n verandering onmogelijk. Althans: je zou dan de afbeeldingen moeten gaan aanpassen, en de positie, en...

Dit is natuurlijk allemaal fantastisch en geweldig en zo en wat kun je er 'n mooie dingen mee doen, maar hóé doe je dat? Je kunt gewoon in het wilde weg met 'n serie getallen beginnen. Maar als je nog nooit met clip-path hebt gewerkt, moet je dat alleen doen, als je verzekerd ben voor opname in een rusthuis.

Gelukkig zijn er hulpmiddelen. Op de pagina met links zijn onder CSS → Online uitproberen, code genereren, en dergelijke link naar online-editors voor clip-path te vinden.

In Firefox is in de ontwikkelgereedschappen een uitermate handige editor voor clip-path (en shape-outside) ingebouwd. Als je een element met clip-path of shape-outside selecteert en op de veelhoek rechts klikt, worden bij dat element de hoekpunten zichtbaar. Die punten kun je vervolgens verslepen, waarbij het uiterlijk van het element en de bijbehorende css mee veranderen. Als je dubbelklikt op een lijn van de editor, verschijnt een nieuw hoekpunt. En als je op 'n bestaand punt dubbelklikt, verdwijnt dit. Echt ongelooflijk handig.

De pijl is als volgt ontstaan. Gewoon lukraak beginnen had weinig zin. Ook niet met de editor in Firefox, want je moet íéts van 'n begin hebben. Als je zomaar begint met het maken van 'n pijl, heb je grote kans dat er 'n tulpenbol of 'n trompet blijkt te verschijnen. Of zoiets.

Om te beginnen is 'n online-editor 'n basisvorm uitgezocht, die enigszins op een pijl leek. Die was vervolgens redelijk overzichtelijk goed te krijgen met de editor in Firefox. Het handige van die ingebouwde is is dat je gelijk op de pagina zelf de veranderingen ziet, met de bijbehorende waarden van de coördinaten.

Die editor in Firefox levert echter geen mooie 25% op, maar 24,8796%. Of zoiets. Dus daarna zijn de percentages nog handmatig op elkaar afgestemd, wat relatief eenvoudig is.

font-size: 5vw;

Lettergrootte. Omdat de lettergrootte is opgeven in vw, verandert deze – net als de hele pijl waarin de tekst staat – mee met de breedte van het browservenster. Meer daarover staat gelijk hierboven bij width: 70vw;.

line-height: 14vw;

Regelhoogte. Omdat de regelhoogte is opgeven in vw, verandert deze – net als de hele pijl waarin de tekst staat – mee met de breedte van het browservenster. Meer daarover staat iets hierboven bij width: 70vw;.

Omdat voor de <div> geen gewone hoogte is opgeven, is de regelhoogte gelijk de hoogte van de <div>, en daarmee van de pijl.

Tekst wordt automatisch halverwege de regelhoogte neergezet. Hierdoor staat de tekst altijd horizontaal gecentreerd binnen de <div>, en daarmee binnen de pijl.

text-align: center; Tekst staat gedeeltelijk buiten de pijl.

Tekst horizontaal centreren. Als dat niet gebeurt, wordt de tekst gewoon links in de <div> gezet. Het deel dat buiten de met clip-path opgegeven polygoon valt, zou dan ook gewoon worden verborgen, zoals op de afbeelding is te zien.