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 grid, resize, transform, and 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 resize to allow viewers rudimentary click and drag functionality.Blackle Mori explains this technique here!Other CSS Crimes create limited interaction through <details> and <summary>.Blackle Mori explains this technique here!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!
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.
To Shared Link — Permalink on CSS-Tricks
Committing CSS Crimes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.