DEV Community

Abdelrahman Ismail
Abdelrahman Ismail

Posted on • Updated on

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.

cube pack

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.

Francine

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!

Francine IE7

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.

single div

Great, but can she animate a single div?

animated 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.

Tower of Hanoi

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.

Mario Kart

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.

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.

lynn fisher

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)

Collapse
 
renanlecaro profile image
Renan LE CARO • Edited

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

Collapse
 
acard1990 profile image
Scott Cardinali

Wow, these are awesome. Glad to see I'm not the only one who loves CSS.

Collapse
 
myterminal profile image
Mohammed Ismail Ansari • Edited

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.

Collapse
 
johnkreitlow profile image
John Kreitlow

I made an illustration of Homer Simpson in CSS a few years ago: radium-v.com/stuff/homer/

Collapse
 
yorodm profile image
Yoandy Rodriguez Martinez

Impresive!!!!

Collapse
 
chiangs profile image
Stephen Chiang

Absolutely insane and impressive.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan • Edited

Does a single div Mona Lisa count?

ashleysheridan.co.uk/blog/Single+D...

I've made a generator in PHP for these images too.

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Yes for sure 😄

Collapse
 
cess11 profile image
PNS11

Quite interesting, thanks.

Collapse
 
kushagra21 profile image
Kushagra Sinha

Nice Work !!

Collapse
 
chemaclass profile image
Jose Maria Valera Reales

This is as crazy as amazing. Incredible 👏