pure HTML/CSS star rating widget

I love creating animated components without using JavaScript. This is an example of a form-based five-star rating widget, which fills in a hidden form element (specifically, a set of radio buttons) that can be submitted as part of a form. If the CSS isn’t loaded for any reason, the radio buttons and text labels are displayed as expected, preserving functionality.

See the Pen pure HTML/CSS star rating widget by Martin Blase (@mblase75) on CodePen.

CSS: text over an angled gray background

This was an interesting little problem to solve: How do we make a column of text display on top of an angled background color? Better yet, how do we cut a corner out of the text to make it fit better?

The answer to the first problem was comparatively straightfoward: two nested blocks, one rotated 45 degrees down and the other rotated 45 degrees right back. The second problem was trickier, but can be solved if you’re using a browser that supports CSS Shapes.

3D CSS crop rows

In the spirit of New Earth USA, here’s some minimalist crop rows in 3D CSS.

Let’s look at how this is built. Continue reading 3D CSS crop rows

Achievement Unlocked: Google Tag Manager

I’d never bothered to figure out how Google Tag Manager actually works, because… well, nobody ever asked me to. But today I found myself trying to figure out how to do basic link tracking, and sure enough, the GTM site/webapp was still utterly incomprehensible to me. It was definitely easier to use than before, but it still doesn’t make any sense if you’re a raw beginner. Which I was.

Normally, I hate trying to learn developer skills from videos, but the GTM documentation wasn’t helping me, either. So I finally caved and found Measureschool’s YouTube video, which was both short and subtitled, so I could actually enjoy it at work.

And now I’m not a raw beginner anymore, and can actually use GTM to do stuff besides basic session tracking. And hopefully, Google’s documentation won’t be completely opaque to me anymore.

(Another achievement unlocked this week: genuine object-oriented programming in PHP. Again, nobody actually needed it from me before. This one I could actually figure out from the documentation, though.)