Foto uitsnijden met Clip-Path

Foto uitsnijden met Clip-Path

De afgelopen paar jaar hebben een duidelijke toon neergezet in de wereld van het Web, van skeuomorphism naar flat design, en van flat design naar een combinatie van beide. Mede dankzij deze shift in stijl en de velen CSS frameworks zoals Foundation en Bootstrap zijn heel veel sites op elkaar gaan lijken. Dezelfde kolom breedte, dezelfde kleur combinaties, maar vooral dezelfde layouts. Maak kennis met een nog vrijwel onbekende property die ons hier van gaat verlossen: clip-path.

Wat is clip-path?

Clip-path is een CSS3 property waarmee je bepaalde delen van je content of afbeeldingen kan verbergen.
De clip-path property is de oudere broer van de inmiddels verouderde clip property. De oude syntax werkte alleen strict op elementen die absoluut gepositioneerd waren. Bovendien konden dat ook alleen maar rechthoeken zijn, behoorlijk wat nadelen dus. De nieuwe property biedt de mogelijkheid tot ovalen, rechthoeken, driehoeken en zelfs vrije vormen door het gebruik van polygons! De mogelijkheden zijn dus vrijwel eindeloos. Clip-path is een property die is overgenomen van SVG, en kan dan ook behaald worden door een SVG te gebruiken. Echter is bij SVG de browser support wat minder, en kan je beter de syntax zelf schrijven in CSS.

De mogelijke vormen door het gebruik van clip-path

Dit is de standaard syntax van clip-path:

rectangle(top, left, width, height, rx, ry)

Hiermee maak je een standaard rechthoek, met de laatste 2 waarden zou je zelfs nog een border-radius kunnen toepassen op je vorm.

circle(cx, cy, r)

Een normale cirkel met een middelpunt en een radius.

ellipse(cx, cy, rx, ry)

Een ellips met een middelpunt en een x & y radius.

polygon(x1, y1, x2, y2)

De echte kracht van clip-path, door de polygon waarde te gebruiken kan je complexe vormen waar maken.

Browser support

Browser support van clip-path is verbazingwekkend goed als je IE niet mee zou tellen. Alle browsers ondersteunen clip-path (Firefox alleen via SVG) behalve IE. Gelukkig maakt dat vrij weinig uit, want clip-path heeft een hele goede fallback! Mocht clip-path niet ondersteund worden dan wordt de afbeelding alsnog als normaal weergeven, dus een gebruiker zal het niet eens doorhebben dat er iets mist.

Voor- en nadelen van clip-path

Voordelen:
– Je kan procentuele waardes gebruiken, dat betekent dat de vorm van je clip-path in zijn geheel responsive is. Verder zou je de clip-path op bepaalde schermformaten ook uit kunnen laten, als je echt in het kader van progressive enhancement wilt denken.
– Omdat je CSS gebruikt om de clip-path te maken kan je deze vorm ook animeren. De mogelijkheden zijn hierdoor eindeloos. Denk maar eens die kleine effect die je steeds vaker ziet, waar een hamburger menu in een kruisje verandert en vice versa.

Nadelen:
– IE ondersteund de property niet. Ook al is de fallback uitstekend, het blijft zonde dat deze browser clip-path niet ondersteund, zelfs de nieuwste browser van Microsoft, Edge, ondersteund de property nog steeds niet.
– Er wordt gezegd dat clip-path zorgt dat pointer events ook niet meer werken op de verborgen delen, maar op het moment is dat nog wel het geval. De property is nog een work in progress, dus er wordt verwacht dat als deze klaar is dat pointer events dan ook uitgeschakeld zullen zijn op de verborgen delen.

Een simpel voorbeeld

We nemen deze afbeelding als voorbeeld:
cats

Met het volgende voorbeeld krijgen we een mooie simpele ruit. De simpelste syntax is:

img {
/*De syntax voor Chrome en Safari*/
-webkit-clip-path: polygon(200px 200px,300px 350px,400px 200px,300px 50px);
/*De link naar de SVG voor Firefox*/
clip-path: url("#clipPolygon");
}

De SVG in de HTML ziet er dan als volgt uit:

<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="200 200,300 350,400 200,300 50">
</polygon>
</clipPath>
</svg>

Het resultaat zal zijn:
cats_uitsnede

Zelf proberen?

Zin om zelf aan de slag te gaan? Open de pen op Codepen.io om zelf te spelen met deze clip-path.

Handige tools

Er zijn ook handige tools waarmee je eenvoudig een clip-path kunt maken, zoals:

clippy
Clippy

clip path generator
Clip Path Generator

Conclusie

Clip-path is een bijzonder krachtige property die een groot verschil kan maken voor je website, mits deze op een correcte manier wordt gebruikt waardoor de fallback er goed uit ziet.

Leave a reply

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *