Committing CSS Crimes
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.
: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.