Search
Time Travelling CSS With :target
9.9.2024
Checkbox and radio button hacks are the (in)famous trick for creating games using just CSS. But it turns out that other elements based on user input can be hacked and gamified. There are very cool examples of developers getting creative with CSS...
How I Made a Pure CSS Puzzle Game
9.9.2022
I recently discovered the joy of creating CSS-only games. It’s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol’ …
How I Made a Pure CSS Puzzle Game originally published on CSS-Tricks, which...
Two Issues Styling the Details Element and How to Solve Them
13.1.2021
In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS… trickery. And, depending on the solution used, editing the underlying HTML could get complicated.
Now, the <details> and <summary> elements (which combine to form...
Whack-a-Mole: The CSS Edition
6.1.2021
We’ve seen the checkbox hack and how it can be used to build a complete state machine in CSS. Today, we’ll take that line of thought a step further and build a simple game of Whack-A-Mole, where the player needs …
The post Whack-a-Mole: The CSS Edition appeared first on CSS-Tricks.
You...
Menu Reveal By Page Rotate Animation
8.9.2020
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...
Animated Matryoshka Dolls in CSS
27.2.2020
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...
Show Search Button when Search Field is Non-Empty
5.11.2019
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="...">) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on...
Multiline truncated text with “show more” button
4.9.2019
Now that we've got cross-browser support for the line-clamp property, I expect we'll see a lot more of that around the web. And as we start to see it more in use, it’s worth the reminder that: Truncation is not a content strategy.
We should at least offer a way to read that that truncated content...