I love pure CSS solutions to complex design problems.
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.
Seems I forgot to add this one. My own employer, Impact Networking, recently redesigned its site, giving me the opportunity to finally drag its code into the modern age.
Only suitable for modern browsers, naturally.
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 couple of pure (mostly) CSS widgets/toys I came up with as part of an actual project today.
Continue reading Fun with CSS
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.