The time for CSS-Tricks is over. Now is the time for CSS Crimes!
Social media service Cohost allows users to have greater freedom with markup and inline styles than we may be typically used to. Some users have taken advantage of this freedom to commit CSS Crimes! It has resulted in creative recreations of familiar interfaces and interactive games by using properties in unconventional ways.
Blackle Mori created a contraption where pulling a handle slowly turns a series of gears, pulleys, and chains. Eventually an aperture opens to reveal the site’s mascot (“eggbug”) and the proclamation “Good Job!”. I have stared at this in Developer Tools and it is an amazing combination of
calc(). I ended up adding a
border to all
<div>s to try and get a better understanding of how each individual element moved.
- Several other CSS Crimes use
resizeto allow viewers rudimentary click and drag functionality.
- Other CSS Crimes create limited interaction through
- Some members of the community have taken Andrew Siller’s technique from “Night of the Living GIF: Making Interactive Multiplayer Experiences” to create a multiplayer Pokemon experience!
:hover as a workaround for
mouseleave. I have used
input:checked as a sibling selector for toggling.
While CSS Crimes are probably not something you would want to employ on a regular basis, we should embrace experiments within constraints that can foster creative solutions.