Fun With CSS Functions

I rarely play with platform features that have minimal support. I read articles so that I know what’s coming, but then I typically wait until they land and I have a need to use them. However, this weekend I was intrigued by Una’s article 5 Useful CSS functions using the new @function rule. It reminded me of my SASS era (I still remember to use all caps), which was a fun time of CSS and front-end in general.

Then, I was reading Reddit and I saw this post where someone was asking about great game sites that they could practice on for building websites. I like to link things, but I can’t find it anymore so either I was experiencing a Delerium Tremen or the post got deleted. There was one site that had this awesome style and I wanted to know how they did it. This ended up being a fiasco because I opened it by clicking in the Reddit app so there was no browser history. I found it with Perplexity searching the top 100 games that start with ‘C’ in the last five years, but I digress. The Calisto site has these cool accents on the corners of items and I was curious how they implemented it. I have built something in the past and I wanted to compare notes.

Playing in a Pen

After I reviewed their implementation, I thought I wanted to play with it a bit to consider what the most efficient way of building something like this. In my previous scenario, I did something very similar to theirs, but this time I figured we could get it down to two elements with pseudo elements, instead of four elements and a container. The container is a personal preference, but it can either be three or five elements.

A little aha! moment hit and I realized that this would be the kind of thing that would be great for a function. We want a couple of scenarios and repeated behaviors, which can all be done programmatically. I’m not sure that this is a great function, but it works. It’ll be interesting to start building these in the future.