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.
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!
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?
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.
We have traveled a great distance to come back now, so why not create a CSS search engine.
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.
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.