CSS Abuse

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:

1. Only one disk can be moved at a time.
2. Each move consists of taking the upper disk from one of the stacks and placing
3. 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.