Clip-path generator

Zo gebruik je de clip-path generator

1. Kies een Vorm: Polygoon, Cirkel, Ellips of Inset. De vervaagde laag toont het hele element, de heldere laag wat zichtbaar blijft na het uitsnijden.
2. Sleep de stippen in de editor. Bij een polygoon is elke stip een hoekpunt; klik ergens in het vlak om een punt toe te voegen op de dichtstbijzijnde zijde. Bij een cirkel of ellips sleep je het middelpunt en de stippen van de straal. Bij een inset sleep je de vier stippen op de randen.
3. Verfijn in de velden eronder: de lijst Punten (X en Y in procent, met Verwijderen en Punt toevoegen) voor polygonen, of de velden Straal, Middelpunt X, Middelpunt Y, Boven, Rechts, Onder, Links en Afgeronde hoeken (px) voor de andere vormen.
4. Begin sneller met de Voorinstellingen: driehoek, trapezium, parallellogram, ruit, vijfhoek, zeshoek, achthoek, afgeschuind, ster, kruis, pijlen, chevron, tekstballon, cirkel, ellips en inset.
5. Vink Uitlijnen op 5% aan voor nette waarden, en -webkit-clip-path toevoegen (oude Safari) als je nog Safari 13.0 of ouder ondersteunt.
6. Sleep eventueel een foto naar Achtergrondafbeelding (optioneel) om de vorm op je eigen afbeelding te zien. Het bestand wordt nooit geüpload.
7. Kopieer de CSS-code met Kopiëren.

Toetsenbord: geef een stip de focus, verplaats haar met de pijltjestoetsen (1%, of 10% met Shift) en druk op Delete om een punt van een polygoon te verwijderen. Een polygoon houdt altijd minstens drie punten.

De vormfuncties van clip-path

clip-path verbergt alles buiten een vorm. Het element behoudt zijn afmetingen in de lay-out; alleen wat getekend wordt en het klikbare gebied worden uitgesneden.

• polygon(x1 y1, x2 y2, …) verbindt de punten op volgorde en sluit de vorm. polygon(50% 0%, 100% 100%, 0% 100%) is een driehoek met de punt naar boven. De coördinaten beginnen in de linkerbovenhoek van het element.
• circle(r at cx cy): circle(50% at 50% 50%) is de grootste cirkel in het midden van het element. Een straal in procenten is relatief ten opzichte van de diagonaal van het element gedeeld door √2, dus alleen bij vierkante elementen is het een deel van de breedte.
• ellipse(rx ry at cx cy): de horizontale straal is een deel van de breedte, de verticale een deel van de hoogte.
• inset(top right bottom left round radius) snijdt een rechthoek binnen de randen uit, met dezelfde verkorte notatie van één tot vier waarden als bij marges en optioneel afgeronde hoeken.

Deze tool schrijft procenten, zodat de vorm meeschaalt met het element, hoe groot het ook is.

Tips voor goede vormen

• De volgorde van de punten van een polygoon telt: loop je met de klok mee (of ertegenin) langs de rand, dan voorkom je gekruiste vormen in de vorm van een strikje.
• Twee vormen met hetzelfde aantal punten kun je animeren: transition: clip-path 0.4s laat een zeshoek vloeiend overgaan in een andere zeshoek. Tussen polygonen met een verschillend aantal punten kan de browser niet interpoleren.
• clip-path snijdt ook box-shadow en randen af. Wil je een uitgesneden vorm een schaduw geven, zet dan filter: drop-shadow() op een bovenliggend element.
• Uitgesneden gebieden reageren niet op klikken of hoveren, wat handig is voor onregelmatige knoppen.