July 2023
-
A Pure CSS 3D Maze!
Ben Evans is a fantastic CSS Artist and also creates games in CSS. This time, it is a 3D Maze built with HTML and CSS. No JavaScript or other languages. Enjoy it! Note: This demo works on Chrome (and Firefox?)
-
Sunday CSS #7: 3D Pencil
This 3D rotating pencil was created by Julia Miocene in HTML and CSS. She used the latest CSS trigonometric functions to calculate the angles and positions and the shape points for the different layers-a simple and cool demo.
-
Animated Hirayama Fireworks
This animated vintage poster is excellent in itself. Still, Mads Stoumann went beyond that and shared a blog post about the whole process with detailed explanations of the techniques used. The demo may be resource-consuming on some computers.
-
Online Guitar Tuner v3
This month, different demos by Josetxu made the shortlist of this article (his CSS homage to the late cartoonist Ibañez is great, too). But this one, in particular, had to be on the list. It is practical, clean, and beautiful.
-
Ancient Grass
Sophia (fractal kitty)'s generative art has been featured in previous articles, and this one (created for a CodePen challenge) deserves to be here, too. The sun over the horsetails feels peaceful and warm as it slowly appears and moves.
-
? Falling autumn leaves shader ?
It is not autumn yet, but this interactive ThreeJS demo by CeramicSoda brings the season early this year. Move the mouse over the tree to see the branches moving and the leaves falling.
-
3D Nintendo Switch
Ricardo Oliva Alonso creates great demos with 3D CSS (and lately with Blender, too). This rendition of the Nintendo console is an excellent example of that: some HTML, some CSS, and a little JS to allow the camera to move, and he got a cute and sweet-looking demo.
-
Eyes SVG animation
CeramicSoda repeats in the list with an SVG animation of eyes looking around. The turbulence filter makes this drawing amazing and creates a cute but creepy feeling. Note: the image doesn't load on Safari.
-
Rhombus rotation on hover
Temani Afif creating impressive animations using just the image tag (without any other tag or container) is not new. He shared demos weekly about it. But this one was my favorite,e with the hover animation and the outline surrounding the canvas.
-
Emoji Hop
One fun animated demo to finish this month's list. With the help of That 3D Text Library and GSAP, Steve Gardner creates some bouncing emojis that change the background while hopping.
Check the previous list!
...And check the following list!
