Vandaag heb ik een artikel gelezen van Preethi Sam over curved box cutouts in CSS. Ik had deze techniek nog nooit eerder gezien, dus ik was erg benieuwd hoe dit precies werkte, en of ik het misschien kan implementeren in mijn huidige we love web blog. Het resultaat ziet er super speels en uniek uit, en voelt voor mij als een echte eye-catcher.
With a little CSS and a few creative shapes, you can make eye-catching layouts!
In het artikel legt Preethi stap voor stap uit hoe je met border-radius, clip-path en conic-gradient hele interessante vormen kunt maken die uit je standaard layouts ‘snijden’. Wat ik vooral leuk vond om te zien is hoe relatief simpele CSS-regels, als je ze op de juiste manier combineert, kunnen zorgen voor iets dat er echt vet complex uitziet, haha.
De voorbeelden uit het artikel gebruiken vooral CSS `clip-path` en soms ook `mask-image` om gedeeltes van een element visueel uit te knippen, zoals een gebogen hoek of een wavy rand. Dit is echt een totaal andere benadering dan de standaard vierkante box die we gewend zijn!! Het remindde me een beetje aan het soort layout dat je normaal gesproken in Figma zou maken met blobs of curves, maar dan puur met CSS. Heel vet!
This technique works great when you want to add a playful or organic touch to your UI.
Ik denk dat ik deze techniek zeker een keer wil uitproberen in een eigen project, bijvoorbeeld op deze blog?! Het is misschien niet iets wat je overal toepast, maar voor de juiste sfeer of stijl kan het echt iets toevoegen. Zeker een aanrader als je je CSS skills wil uitbreiden en visueel wat meer lef wil tonen! :D