Luke Morrigan
Press Start

Blog

Pixelated rounded corners with CSS clip-path

I remember the day in 2011 when the design agency that I worked for decided that we were dropping IE6 support and raising our minimum to IE 9. Among other things, we didn't have to use images for rounded corners any more, we could use border-radius!

Adding rounded corners to items such as images and buttons makes them feel a bit softer and more aesthetically pleasing, but I didn't feel that regular rounded corners would suit the style of my website. That's when I had the idea to use CSS clip-pathAvatar for https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path.

Per aspera ad astra

When I was younger, I wanted to be a "robot scientist". I found them fascinating and wanted to learn about how they work and how to build them, but I lived in the middle of nowhere, in a time when the web was still finding it's feet, which meant that the resources weren't really there for me and eventually I realised that it wasn't really a viable option.

In my early teens, I found web development and I've been hooked ever since. Open source was, and still is, massively helpful for me to learn from. Whether that's taking apart open source projects to learn how they work, or contributing to them.

Recently, I found out that these two worlds collided.

Now with added Eleventy!

Ever since I gave EleventyAvatar for https://11ty.dev/ a go when I was building the LeedsJSAvatar for https://leedsjs.com website, I've been a huge fan and advocate, even convincing some people to give it a try out of my sheer enthusiasm for it. I absolutely love the simplicity and flexibility of it, as well as things like data files. I have a whole post talking about this stuff from when I was building the new LeedsJS website.

I've been meaning to convert my own site over for a while, and recently took the plunge and decided to do it. As well as giving me the opportunity to dig into Eleventy without a deadline pressing me, it also gave me the chance to make some stylistic changes.

The Viewbuilder Pattern

Many companies have internal APIs that provide their data, but scaling these can be tricky and expensive. There are also cases where you're using a rate-limited 3rd party API that you need to use to provide data to the frontend of your website.

While I was working at Sky Betting and Gaming, I was introduced to a pattern that they use called a viewbuilder. I find it to be a really interesting and useful idea, and we used it heavily in my time there.