📝 CSS-Tricks 267: Everything is a Rectangle

View this newsletter on the web.

[Robin]: Everything on the web is a rectangle. No matter what element you choose or what CSS you write, under the hood you’re always filling up the page with squares and rectangles of various shapes and sizes. You can make different shapes in CSS, yes, but for the most part that’s an edge case. And even then you’re not really changing the shape of the box the shape sits in. It’s really just a hack.

In the past, that technical limitation in CSS has bled into the visual design of websites. I think that’s why lately we’ve seen the Great Blobification of the web over the last year or so—super rounded corners and abstract shapes, pastel colors that swirl around on the page.

Perhaps this is a sign that folks are bored of everything being a rectangle?

Things are slowly changing though (technically, if not stylistically across the web). We’ve had clipping and masking in CSS for years now (although I don’t see these things used often enough) and we’ve had SVGs that we can do dazzling things that break the confines of those rectangle-based designs. The biggest change that I haven’t seen enough experiments with, and a tool that can help us break off from the shackles of rectangle-based design, is this: the CSS Paint API.

That’s why I was so excited to read about how Temani Afif made these funky little blob animations:

Temani wrote a while back about using this API to create this nifty fragmentation effect and all this reminds me to look into this API more. It feels like it unlocks a ton of exciting new possibilities in the land of CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s