The time for CSS-Methods is over. Now could be the time for CSS Crimes!
On this present panorama of content material service suppliers, customers are sometimes restricted to expressing themselves in textual content, hyperlinks, and pictures. Sanitization guidelines are likely to strip out HTML, JavaScript, and numerous attributes.
Social media service Cohost permits customers to have better freedom with markup and inline kinds than we could also be usually used to. Some customers have taken benefit of this freedom to commit CSS Crimes! It has resulted in artistic recreations of acquainted interfaces and interactive video games by utilizing properties in unconventional methods.
Blackle Mori created a contraption the place pulling a deal with slowly turns a collection of gears, pulleys, and chains. Ultimately an aperture opens to disclose the positioning’s mascot (“eggbug”) and the proclamation “Good Job!”. I’ve stared at this in Developer Instruments and it’s an incredible mixture of grid
, resize
, remodel
, and calc()
. I ended up including a border
to all <div>
s to attempt to get a greater understanding of how every particular person aspect moved.
There have been conditions prior to now the place I’ve been restricted from utilizing the total toolkit of HTML, JavaScript, and CSS. There have been many situations of utilizing ornamental CSS shapes to get round pictures. I’ve used :hover
as a workaround for mouseenter
and mouseleave
. I’ve used enter:checked
as a sibling selector for toggling.
Whereas CSS Crimes are most likely not one thing you’ll wish to make use of regularly, we must always embrace experiments inside constraints that may foster artistic options.