It’s all about CSS. All authors here either forgot to use JavaScript or they had disabled it in their browser and can not enable it back again; so they had to finish the job using only pure CSS.
Cube Pack
I thought those cubes are a 3D work, but as the author said “he forgot to use THREE.js” and it’s all pure CSS.
What I really like here is how cubes cast shadows and reflect light, made it feels like they are really floating and rotate.
Pure-CSS Francine
Yes, it’s not an oil painting. it’s a completely pure CSS art.
Like the Mona Lisa, this painting has its secrets too. To activate it, you have to use an ancient device form Windows 98 era, which running IE7 it will enable you to see her ghost!
Single Div
Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single div.
Great, but can she animate a single div?
Tower of Hanoi
The famous puzzle Tower of Hanoi. It consists of three rods and a number of disks of different sizes, which can slide onto any rod. The puzzle starts with the disks in a neat stack in ascending order of size on one rod, the smallest at the top, thus making a conical shape.
The objective of the puzzle is to move the entire stack to another rod, obeying the following simple rules:
- Only one disk can be moved at a time.
- Each move consists of taking the upper disk from one of the stacks and placing
- it on top of another stack or on an empty rod. No disk may be placed on top of a smaller disk.
When you click on a disks stack you pick the topmost disk, then you can move it to another rod, how hard you try you can’t put a large disk on top of a small one (as game rules), and all of this is a pure CSS magic.
I think the author of this game should add two new skills to his C.V an arithmetic genius and a long-minded person.
Mario Kart Game
With zero images, zero lines of JavaScript and hundreds lines of CSS, He managed to put Mario on the road.
As you noticed, it’s not best Mario Kart game ever, since you can only switch between characters and move the selected character right or left, but achieving this without even using a single line of JavaScript is kind of CSS abuse which I really like it 😈.
A Search Engine in CSS
We have traveled a great distance to come back now, so why not create a CSS search engine.
Final thoughts
If you wondering, why would they do that in pure CSS? I guess the answer here, because they can.
The challenge here is not creating an awesome painting or creating Mario Kart game the web version, but the challenge here is to create this using a tool that we all familiar to and can use it well (CSS), although this tool is not designed to do so.
Of course, if they used JavaScript or SVG they can achieve the same results or even better results in a less painful way, but in a less exciting way too.
This way they show-off what they can do, and show that no matter what tool you use, there is no limit to your creativity. The tool will always be a tool but in the right hands can create this magic.
If you have any other examples of “how to abuse CSS”, please put it in the comments.
Thank you for reading.
Top comments (11)
The menu trick is nice, I use something similar on a production website ciboulette.net/
The menu button (on mobile only) is a label for a checkbox, and the menu is shown via input:checked ~ menu.
I'm often browsing without js on mobile, because it's so much faster, but most website hamburger menus are broken without js. So I thought I'd make it work here, even though it doesn't matter to most people
Wow, these are awesome. Glad to see I'm not the only one who loves CSS.
This post started something that is impossibly hard to recover from. For a few days, I'll stare at random objects for long duration & lose a lot of sleep just thinking about those examples...
After all these years being fascinated with CSS and now having seen all this, I feel amazed, intimidated and ashamed, all at the same time.
I made an illustration of Homer Simpson in CSS a few years ago: radium-v.com/stuff/homer/
Impresive!!!!
Absolutely insane and impressive.
Does a single div Mona Lisa count?
ashleysheridan.co.uk/blog/Single+D...
I've made a generator in PHP for these images too.
Yes for sure 😄
Quite interesting, thanks.
Nice Work !!
This is as crazy as amazing. Incredible 👏