MCR FRED Logo and Background in HTML and CSS

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 McrFRED header that I planned to create in just HTML and CSS.
The McrFRED header that I planned to create in just HTML and CSS.

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:

See the Pen MCR FRED in CSS by Brian Barnett (@brian3kb) on CodePen.


Leave a Reply

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

You are commenting using your 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