Is this supposed to be serious use of CSS or rather, as suggested by "Committing CSS Crimes", a critique of the absurdity of CSS?
An interactive mechanical contraption in pure CSS
21–30 of 58 posts
Re: An interactive mechanical contraption in pure CSS
#22Is this supposed to be serious use of CSS or rather, as suggested by "Committing CSS Crimes", a critique of the absurdity of CSS?
author here. the website that hosts this is a new social media website that allows a limited amount of html (only inline css, no js or elements), and a small subculture/arms race has developed to see who can make the wildest thing under those restrictions.
Re: An interactive mechanical contraption in pure CSS
#23This is so creative! I'm trying to figure out how it works! It relies on the resize property and css grid. I don't quite understand why the gears spin in the grid when the rope resizes it though. This is wildly impressive! Edit: The gear is a sprite sheet! Brilliant!
So in summary, if I'm understanding properly, this uses a few tricks. First resizing the rope (by dragging it) changes the size of a css grid holding all the other elements. Since percentages refer to this parent grid this can be used to resize the other ropes and chains and with the right background + clipping this causes it to "move". For the spinning a sprite sheet is used with the background position depend on th…
That's how I see it too. Very creative!
Re: An interactive mechanical contraption in pure CSS
#24Someone please build a version of Charles Babbage's Analytical Engine using this.
Re: An interactive mechanical contraption in pure CSS
#25Is this supposed to be serious use of CSS or rather, as suggested by "Committing CSS Crimes", a critique of the absurdity of CSS?
author here. the website that hosts this is a new social media website that allows a limited amount of html (only inline css, no js or elements), and a small subculture/arms race has developed to see who can make the wildest thing under those restrictions.
I didn't know about about cohost. How does one go about getting an invite code?
Re: An interactive mechanical contraption in pure CSS
#26Yeah, can we get a mobile responsive version? Also, I need offline and realtime support
Dear downvoters, it’s a joke.
Re: An interactive mechanical contraption in pure CSS
#27doesn't work in firefox.
In 102 it works on macOS. FF's CSS implementation hasn't seen big changes recently, AFAIK, so I'd bet it runs on somewhat older versions too. Mouse over the black piece at the end of the rope on the top left and 'pull' it down.
Re: An interactive mechanical contraption in pure CSS
#28Does this work with a touchscreen? I’m on mobile and don’t see anything happening. (I pulled the rope.)
Occasionally work but the handle on the rope is very small. Pinch to zoom in, the you can move it.
Re: An interactive mechanical contraption in pure CSS
#29Very cool indeed. What things CSS can do in the hands of an expert these days is seriously impressive.
EDIT: Cohost seems interesting... if anyone has an invite that would be lovely. Email is in my profile here.
Re: An interactive mechanical contraption in pure CSS
#30That's another level. CSS for me just means traversing through deeply nested divs looking for the culprit that has an unwanted padding or margin or, more likely, something completely different that makes little sense to me, causing the icon to misalign by 2px. :)