Articles Tagged checkbox hack

There are many different approaches to menus on websites. Some menus are persistent, always in view and display all the options. Other menus are hidden by design and need to be opened to view the options. And there are even additional approaches on how hidden menus reveal their menu items. Some fly out and overlap the content, some push the content away, and others will do some sort of full-screen deal.

Whatever the approach, they all have their pros and … Read article “Menu Reveal By Page Rotate Animation”

Here’s a fun one. How might we create a set of those cool Matryoshka dolls where they nest inside one another… but in CSS?

I toyed with this idea in my head for a little while. Then, I saw a tweet from CSS-Tricks and the article image had the dolls. I took that as a sign! It was time to put fingers to the keyboard.

Our goal here is to make these fun and interactive, where we can click on … Read article “Animated Matryoshka Dolls in CSS”

This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players.

Wanna see the complete game?

View Repo View Demo

Oh, you wanna learn how it works? Let’s dig in.… Read article “Building Battleship in CSS”

If you’re as old as me, you might remember watching Let’s Make a Deal on the old television airwaves. The show is apparently still on these days in a new format, but the original always stuck out to me because of one simple thing: the reveal.… Read article “Creating a CSS Curtain Opening Effect”

Using a hidden checkbox, you can re-create a lot of functionality on website that rely on clicks and toggled states. Fair warning, it's not always super semantic or a good idea, but it's awful fun to play with.

Functional tabbed area with just CSS. The backstory, where we are now, and the awesome theoretical future.