snow globe christmas tree
Amit Sheen live streamed the whole process on YouTube (you can still watch it on his channel) for everyone to see how to create this 3D-looking Christmas tree with HTML and CSS.
Pixelated Background
This is a neat trick by Wakana Y.K.: placing a low resolution version of the image on top, and expanding it to occupy the same size as the original makes the browser pixelate it. Then, a mask on hover (updating the position with JS) does the rest. Ingenious and effective.
Fireworks
We have showcased several of Yuan Chuan’s CSS Doodles in this newsletter. This animated one is one of my favorites. The colors, the shapes, and the movement are perfectly in sync. Making this demo magical.
Happy Holidays! 2023
Another Christmas tree and another demo by Wakana Y.K. This time the 3D is generated using ThreeJS and the tree is interactive in a different way: drag the mouse around the screen to spin the tree.
WCCChallenge : Obscure
What attracts me to this demo by Tom Hinton is how random and weird (in a good way) it looks (something relatively common in Tom’s artistic pieces. A combination of shaders and meshes in ThreeJS.
Dots & Ring Loader — CSS
This is a hypnotic loader created in HTML and CSS by Josetxu. An interesting combination of animations create this effect, with dots moving while changing size (and z-index).
Stacked Avatars with hover effect
This is a really interesting effect with single images. Temani Afif, crops the pictures as you hover over the siblings. Can you figure out how it works based on the interaction? (Hint: it involves masks and CSS variables.)
Wow Winter Blanket
Another demo with ThreeJS and shaders. This time by Anna Zenn Scavenger. It was part of a CodePen weekly challenge about opposites. Move the mouse over the blanket to see it move smoothly.
CSS scroll-driven animation timer
Another cool example of how to use CSS scroll-driven animations to show an animated timer/progress indicator. This demo is by Ryan Mulligan. And even the numbers are animated! No JS whatsoever.
Pure CSS — Courage the Cowardly Dog
Courage the Cowardly Dog was a TV show from Cartoon Network… and believe it or not, it has been over 20 years since the show. Nostalgia + CSS Art? It had to make the list. Plus it is a nice implementation by maxi83c. And it has animations!
Check the previous month demos on: https://dev.to/alvaromontoro/10-cool-codepen-demos-november-2023-jj
Top comments (13)
The stacked profile pictures and dot & ring loading animation are super cool to me.
3D can be a little hit and miss as it massively impacts the performance of the page on a computer without any dedicated graphics.
I really love the pixelated background. It's so simple and effective.
very amazing!
"CSS scroll-driven animation" demo is also Chrome only. It uses "animation-timeline: scroll()" which is Chrome only feature.
You are correct. Firefox has it behind a flag, but it won't be live for a while there (or on Safari)
Stacked Avatars with hover effect does not work in Firefox :(
It uses
@propertythat is not available on Firefox yet... but soon 😉What about "animation-timeline: scroll()" which is also Chrome only?
Awesome 👍
Cool codes
Amazing!!
Wow Winter Blanket interesting to me
Check me