We’ve scoured through hundreds of CSS only pens over on Codepen.io, to come up with a list of the best CSS only pens without Javascript.
All of these are made using beautiful, old-school CSS and HTML only. No JS here. Without further ado, here they are in all their glory:
#13: CSS Only 3D Rotating Macbook Air
The body of this Macbook has been made in CSS – No jpgs here (other than a screenshot for the screen and an SVG for the Apple logo). You try drawing that with letters and numbers!
#12: CSS Only Nintendo Gameboy
A wonderful blast from the past. Don’t forget the body isn’t made from an image; just good old CSS. Amazing work here from Tatsuya Azegami. Would love to know how many hours this one took.
#11: Animated Construction/Roller Machine
If you have a construction website, we beg you, please use this as your loader. We may start a construction business just to be able to use it!
#10: “Psychosphere” CSS rotating sphere
We had to Google what a psychosphere was, but you can’t deny it’s pretty to look at!
#9: CSS Only Interactive Mannequin
From the same genius that brought us number 13. (the 3D rotating Macbook) comes an interactive Mannequin. You can choose a few different positions for the mannequin at the click of a button. No JS!
#8: CSS Fractal/Mandala
As pretty as the psychosphere, but a bit more complexity. Mesmerising!
#7: Starry Night
A full screen night’s sky, filled with CSS twinkling stars. Great work from Sean Dempsey, who seems to have a passion for this style, judging by his other pens.
#6: CSS Only Uptimer Counter
If this was responsive it would probably hit the top spot, but still, this is cool – Reminded us of the TV series 24.
#5: CSS Only Infinite Gradient Background Colour Change
So simple, yet so pretty. The colour change is surprisingly subtle too. We just love this one.
#4: CSS Only 3D Hover-Aware Rotating Rubix Cube
The hover is a teeny bit buggy, but this still kept us entertained for quite a while.
#3: CSS Only Minesweeper Challenge
The game may be years old, but being able to achieve this using only CSS is an incredible feat. Have a play yourself
#2: Tic Tac Toe
A cute take on the traditional game. Even though there’s a warning saying you can’t beat the panda, we still gave it a good try…and failed. Have a go yourself.
And the winner is…
#1: CSS Beating Heart
No description required. This is magic. Be sure to reload your page when you’re looking at this one, to show the drawing element. Wow.
Found any others you think we should have included? Leave your comments below!
Awesome ❤️❤️❤️ I will aplicate it thanks