In this article, we’ll show you the collection of 10 stunning web design ideas and inspirations I found on Codepen in 2019. Also, I’ll try to provide a brief detail of the technique and library they used for creation. Ready? Let’s check it out! (Click at image for link to each pen)
Thank You 500
The Mine – Pure CSS Game
Writing a game may sound complicated. But actually, this one is only just a sophisticated checkboxes put together with conditions. SCSS and Haml were used to help creating the logics.
Interactive SVG Mask
This cool effect is achieved by carefully placed divs and a simple transform animation. Box-shadow was used to create 3D light effect. And SCSS was used to calculate the transform amount and apply to each div.
Droppy Woppy Input
Saturn Hula Hooping
This is pure CSS animation. It looks like we have the sphere shape but actually, it’s just a circle div with box-shadow and moving face to create an illusion of spinning.
3D Cube Pack
Again, this one is pure CSS. At first I was certain that this was made with Three.js. But actually it was made with lots of simple square divs, box-shadow, CSS animation and 3D transform.
Isometric eCommerce CSS Grid
And that’all for this collection and I hope you like it! If you want to see more development tips and tutorials, don’t forget to subscribe to our channel for weekly update.