De clip-path CSS property is een property waar vaak geen aandacht aan geschonken wordt, terwijl het juist de oplossing biedt om het web eens op een andere manier te bekijken dan de veel gebruikte grids and boxed layouts! De mogelijkheden zijn eindeloos; vormen als hexagons, octagons en sterren nemen responsive vorm op je site. Aan de slag!
We gaan hoofdzakelijk CSS gebruiken in deze tutorial, maar we laten wel zien hoe de inline SVG geschreven moet worden voor een verbeterde support op Firefox. De SVG genereren is namelijk vrij weinig werk nadat je de shape hebt gemaakt met de CSS clip-path property.
Clip-path in het kort
Bij clipping gaat het om een gesloten vector pad, wat een standaard vorm zou kunnen zijn die gedefinieerd is in CSS of via een inline SVG. De ruimte binnen de vorm wordt getoond, en alles daarbuiten wordt verborgen, precies zoals je zou verwachten.
CSS of SVG
Er zijn 2 manieren om met clip-path te werken. 1 is om de waardes direct in CSS in te vullen, er zijn dan een aantal standaard vormen waar je uit kunt kiezen, namelijk: polygon, circle, ellipse en inset; inset is bedoelt voor rechthoekige vormen. Een andere manier is om te verwijzen naar een inline SVG element via de clipPath tag.
Voordelen van CSS
- De syntax is makkelijk onder de knie te krijgen
- De vormen zijn met gemak responsive te krijgen, door bijv. met percentages te werken. Ooit durven dromen dat een responsive hexagon zo makkelijk zou kunnen zijn?
Voordelen van SVG
- Betere browser support (Firefox)
- Je kan complexe vormen creëren om een clip-path van de maken
De voor- en nadelen van clip-path
Deze property is niet zonder nadelen, maar er zijn veel voordelen:
Voordelen
- Browsers die clip-path niet ondersteunen zullen de property gewoon negeren, dus als je het op een goede manier gebruikt zullen je gebruikers dat ook niet doorhebben
- Zodra een clip-path is gegenereerd is dan zijn pointer-events alleen nog maar van toepassingen binnen de kaders van het vector pad (precies wat je wilt)
- Je kan percentages gebruiken om de clip-path te genereren, dus alles is responsive
Nadelen
- Borders en shadows worden genegeerd door clip-path
- clip-path werkt nog niet goed met CSS 3D transformaties en opacity.
Een clip-path voorbeeld
De basis vormen zijn vrij simpel te maken, en de echte kracht van de clip-path zit ‘m in de polygons.
De basis syntax van een clip-path polygon is het volgende:
.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, ...); }
Elke paar argumenten staan voor de x-as en y-as van die bepaalde vertex van de polygon.
Zo zou een polygon er uit zien:
.element { clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%); }
Vervolgens kunnen we op deze manier Firefox supporten:
.element { clip-path: url("#clip-shape"); }
De totale selector zal er dan als volgt uit zien:
.element {
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
-webkit-clip-path: url("#clip-shape"); /* required for Webkit/Blink browsers if you're using only inline SVG clipping paths, but not CSS clip-path */
clip-path: url("#clip-shape");
}
En dan hebben we natuurlijk de SVG die in de HTML markup staan, deze mag overal in het document geplaatst worden:
<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0 1, 0 0, 1 0, 0.8 1" />
</clipPath>
</defs>
</svg>
Op deze manier kunnen de flexibel en globaal clip-path inzetten, gebruik het tot je voordeel!
