CSS 3D playground

Of course, you have to start with the traditional spinning cube. It’s practically the “Hello World!” of 3D animation:

That’s the easy part. The hard part is using equilateral CSS triangles to build a spinning octahedron:

And then pulling together even more trigonometry to build an icosahedron:

Which was, while confusing at times, a surprisingly fun puzzle to solve.

A complete guide to flexbox

I was overjoyed when I saw that the latest versions of Safari for both OS X and iOS did away with the need to use -webkit- prefixes in CSS animations and flexbox. I’m still including them for the time being, and probably will for at least a year, to ensure compatability. But it’s as good a reason to point out that if you’re not on the flexbox train, you’re missing out on some powerful stuff.

CSS tricks has a great page called “A Complete Guide to Flexbox“, and I’ve been referring back to it constantly as I use it more and more in my current project. If you haven’t memorized all the nuances of flexbox yet, keep this one handy.

force browsers to print background colors of elements

Most browsers won’t print background colors, and print-only CSS can (or should) be set to force all text to be black so it looks good on a white background. But what about images? What if you have a logo with white text and a transparent background that’s normally displayed over a dark background? Webkit browsers support the -webkit-print-color-adjust: exact style, but that still leaves out Firefox. Continue reading force browsers to print background colors of elements

Using CSS to “count” elements in a group

A List Apart has an article today about how you can use CSS selectors creatively to “count” the number of elements inside another element. This would be useful if, for instance, you wanted to style elements of a list differently when there’s more than six of them in the list.

Here’s the CodePen if you just want to see it in action.