Creating Blob Shapes using clip-path: shape()

Link: https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

Waar gaat de blogpost over?

In dit artikel laat Temani Afif zien hoe je met de nieuwe CSS-functie shape() en het clip-path-attribuut vloeiende, organische blob-vormen kunt creëren. Door gebruik te maken van Bézier-curves (curve-commando's) en wiskundige berekeningen, kunnen ontwikkelaars responsieve en geanimeerde vormen maken zonder afhankelijk te zijn van SVG of JavaScript.

Wat heb ik geleerd?

• Gebruik van het curve-commando: Met curve kunnen Bézier-curves worden getekend tussen punten, wat essentieel is voor het creëren van vloeiende blob-vormen.
• Geometrie van blobs: Door punten rondom een cirkel te plaatsen en deze willekeurig naar binnen te verplaatsen, ontstaan unieke blob-vormen. Extra punten tussen deze hoofdpunten zorgen voor gladde overgangen.
• Responsieve en geanimeerde vormen: De gegenereerde blob-vormen zijn responsief en kunnen eenvoudig worden geanimeerd door de clip-path-waarde te veranderen, zolang de structuur van de shape() consistent blijft.
• Beperkte browserondersteuning: Op het moment van schrijven wordt shape() alleen ondersteund in moderne versies van Chrome, Edge en Safari. Het is belangrijk om de compatibiliteit te controleren voordat je deze functie in productie gebruikt.
• CSS Tools: Temani verwijst naar twee handige tools:
  • CSS Shapes
  • CSS Generators Deze websites maken het makkelijk om kant-en-klare clip-path blobs te genereren en de CSS-code direct te kopiëren.

Voorbeeldcode

.blob {
  clip-path: shape(
    from 50% 0%,
    curve to 100% 50% with 75% 25%,
    curve to 50% 100% with 75% 75%,
    curve to 0% 50% with 25% 75%,
    curve to 50% 0% with 25% 25%
  );
}

In dit voorbeeld worden vier Bézier-curves gedefinieerd die samen een blob-vorm creëren.

Wat vind ik interessant?

Het gebruik van shape() in combinatie met clip-path opent nieuwe mogelijkheden voor het creëren van complexe en vloeiende vormen met pure CSS. Het feit dat deze vormen responsief zijn en eenvoudig kunnen worden geanimeerd zonder externe hulpmiddelen, maakt dit een krachtige toevoeging aan de CSS-toolkit.

Bovendien zijn de websites van Temani (CSS Shapes en CSS Generators) erg handig om snel mooie blob-vormen te genereren zonder ze zelf handmatig te schrijven.

Wat betekent dit voor mijn ontwikkeling?

Deze techniek moedigt me aan om creatiever te zijn met CSS en te experimenteren met nieuwe functies zoals shape(). Hoewel de browserondersteuning momenteel beperkt is, biedt het veel potentieel voor toekomstig gebruik in interactieve en visueel aantrekkelijke webontwerpen. Ook zal ik vaker gebruik maken van tools als CSS Shapes en CSS Generators om sneller te prototypen met mooie vormen.