I received and email from McrFRED about a little competition they are running, to enter, I just needed to tweet something McrFRED related.
“It could be a McrFRED sticker, T-shirt, or you could make your own! LEGO? Desktop wallpaper? CodePen?”
CodePen eh? I’ve heard of the site and checked out a few demos but never personally uploaded anything.
So, what to make in as my first pen then? The header image on the email looked like something I could maybe re-create in just HTML and CSS with no images, as is all the rage these days – so that’s what I headed out to do.
The hard part here looked to be that repeating background, but I thought I’d seen something similar done before – which I found on Lea Verou’s CSS Patterns Gallery – but unfortunately, this was a) upside down, b) filled gradients rather than the outlines of the cubes I needed.
So I started to experiment, which is where Codepen really shines with the instant feedback as you change the code; pretty soon I had something resembling the cubes, but I had lines going through the centers of the cubes. More playing with the gradients I got what I was after. I found a guest post by Ana Tudor invaluable for understanding the maths to get the angles correct on the linear-gradients, the 25 minute spent absorbing that tutorial was extremely useful!
The base for the hexagon as grabbed from a jsfiddle by CreativePunch and tweaked to render in the correct orientation, I used a second hexagon slightly larger and below the main one for the border, as borders on the :before and :after elements didn’t render consistently across Firefox, Edge and Chrome.
The closest font I found for the text was Alegreya Sans SC from Google Fonts library. Finally, I added a few CSS animations then fired off the tweet.
All in all, a good bit of fun and a nice change from the current contract work I’m doing through the day.
And the end result: