It's just amazing what one can build by combining web technology with creativity.
Everything you are going to see in this article has been created with just JavaScript, HTML, and CSS. No Photoshop or similar tools have been used and everything runs perfectly fine in the browser.
While it is fun to explore these little showcases and play with them, it's even better that you can have a look at the source code of every project. This offers great opportunities to learn new things and get a lot of inspiration from awesome creators.
I have chosen 10 great examples that have been published on CodePen.io and are publicly accessible. CodePen is an outstanding platform that has been co-created by Chris Coyier (founder of css-tricks.com).
They call themselves a social development environment where developers and engineers can collaborate on projects, showcase their work, share things with the community, and prototype new ideas.
I encourage you to explore all of the examples below, play with them, and try to understand how they work. Not only will you have a lot of fun but learn a lot about creativity on the web. And not to forget that we honor the outstanding work of the creators!
1. Click the button!
The first showcase I have chosen is called "Click the button!" by Bård N Hovde, a very talented creative from Norway.
It's my favorite Pen on CodePen because it is simple yet impressive, comes with a twist, and brightens my mood every time I play with it. I guarantee you won't regret trying this one out!
2. Credit Card Form
A lot of websites want us to enter our credit card details in some sort of form these days. And for me, that's not always a fun thing because of the way those forms are built.
When I discovered "Credit Card Form" by Muhammed Erdem (who was recently announced number 1 most popular creator on CodePen), I was positively surprised and immediately wondered why website creators haven't been using such a beautiful form yet.
It's actually fun to give my card details to the form, something every website owner should have the highest interest in!
3. Pure CSS Still Life
This pick from Ben Evans is the perfect example of what CSS is capable of. I still cannot believe sometimes that there were no images used to create this beautiful scenery.
And it is a good reminder of what we can achieve with CSS! Ben has some more examples of his CSS magic so you should check out his profile on CodePen as well.
4. Color This Sofa!
Kyle Wetton has created an interactive and impressive Pen that lets you colorize a sofa and the background. It's lightweight and could be used in e-commerce sites selling furniture.
Furthermore, it's a good example of what you can do with SVGs and Blend Mode.
5. The Cube
This is more than just a simple demonstration of web technology, it's an actual game that most of you probably know. I admire the creativity and the execution Boris Šehovac demonstrated with this Pen.
This is also one of the most-loved projects on CodePen in 2019 and I can only second this!
6. Face Button
It doesn't always have to be the most complex projects in order to be impressive as Katherine Kato demonstrates with this little Pen.
Take a look at what a small amount of code is needed to generate this interactive and fun demonstration. It reminds me of the fact that often times, less is more. Well done, Katherine!
7. Mini Music Player
Another Pen from Muhammed Erdem and another great example of what this guy is capable of. If I were a company in need of an outstanding engineer, I would hire him right away before others do.
While we can argue about the music playing in this demonstration, we definitely cannot about the look and feel of the player. Good job, Muhammed.
And to all streaming providers out there: Check this out, maybe you can learn something!
8. Simple CSS Waves
Daniel "Goodkatz" Östermann from Finland brings us yet another great example of what you can do with just CSS.
Imagine this on your personal website or landing page - low effort but great visualization. Lightweight yet powerful - I like this combination!
9. CSS Card Hover Effects
Another good example that oftentimes we don't need JavaScript for interactivity on our websites by Jhonier Riascos Zapata. I can hover those cards all day because I really like this Pen. Kudos to Jhonier!
10. Clip Clop Clippity Clop
The last pen from Steve Gardner might not be something you will use in your projects but it is really, really impressive that this has been created with CSS only.
Yes, that's right, just CSS. Isn't that awesome?
This always reminds me that I have to take CSS more seriously and should invest more time exploring the countless possibilities it offers us. And now enjoy the ride, my fellow readers!
Alright, this is the end of this epic demonstration of the immense creativity engineers have. I got a tremendous amount of inspiration by exploring these pens and I hope that you will too!
I recently started a new site -- The Smart Coder, where I create free content for the community. Check out my other post about javascript beginner projects!
If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰
Top comments (97)
Some of these are really epic
Indeed!
Great
Epic is the right word :)
For sure!
agree, and run the pen is a nice option to include.
Nice list. Very different from the other top 10 projects list on this website.
Glad you like it, Shubham!
And I still struggle to center divs sometimes...
We all do, my friend :)
It sounds so simple, yet that's what makes our day bad. The other day I was going through a blog and I found a nice joke.... "NASA has sent robots to Mars, and we still can't center the divs"
I have a feeling someday tech will shift to left-aligned content because we all got sick of centering divs - or NASA will put out a webinar on centering XD
I started solving that Rubik's cube 😁
Yeah 😄
The first one is brilliant :D
I really like 9. this looks beautiful!
Thanks, my friend :)
These are other people's ideas. "Your" next project will be a lot more meaningful - if it's a unique idea. That's where the value is.
Maybe
PS "100%/fully CSS _________" just makes us here... "oh, they like to take 50x longer instead of just drawing the SVG / totally NOT going to hire that person..."
really these are awesome
thanks!
Cool examples <3
Thanks, my friend!
Awesome
Thanks!
This is a great list. Just needed to get that out.
Thanks, that means a lot to me!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.