March 2023
-
3D Camera Icons
Jon Kantner is usual at these CodePen lists, but the work is fantastic! So it makes sense. This month I had several of Jon's demos shortlisted (like this realistic glass or rotating pill), but the CSS shadows and lightning from this 3D Camera Icons are really out of this world.
-
Pure CSS landscape #4
This CSS art by Arman Borkhani was inspired and extended from an illustration by Kristofer Haugvik on Behance (which is already impressive.) The simplicity of the drawing and the code makes the work even more beautiful.
-
Radial Menu with CSS trig functions
Trigonometric functions are getting supported by browsers, and this month there have been some exciting demos. I liked the idea of this menu by Una Kravets and how smoothly the icons open and close. The movement is so soft moving along the curve.
-
VR Gravity Manipulation
I'll admit that I haven't tried Caleb Miller's demo because I don't have a VR set, so I can't vouch for how it works. But building the idea with JavaScript and Three.js is worth adding to the list.
-
Text effects
Kassandra Sanchez (Kass) shared some text effects that remind us of the classic WordArt. They are simple to create and eye-catchy, the text is still selectable, and they are fun! (plus, some are animated too!)
-
That 3D Text Library - requestAnimationFrame()
Continuing with more fancy animated text codepens (following up with some demos he shared earlier this year), Steve Gardner shared a wavey demo (Motion warning before running the demo!)
-
Spiral circles
I like Yuan Chuan's CSS doodles. They are original and fresh and usually have something... hypnotic to them. This demo is no exception. The color selection is perfect, and the lines remind me of bamboo bending. I can't take my eyes off them.
-
Random Planetary System
This demo by Josetxu was part of a CodePen challenge (random buttons). The planets are drawn with HTML and CSS, changing randomly when clicking the button. (Warning before running: it may consume many system resources)
-
Cool hover effect using one element
Temani Afif's demo uses the
@propertyso it won't work in all browsers, so if you can't see it... go to a browser that supports it and be amazed by the effect and its simplicity: 1 HTML element (<img>) and a few dozen CSS lines are needed to achieve it.
-
Neumorphic Liquid Slider (CSS, Animation)
I'm not fond of neumorphism, but this demo is cool. Using Houdini to animate a slider and the elements around it (a liquid that goes up and down depending on the value), Kostantin Denerz completes an interactive and colorful demo.
Check the previous list!
...And check the following list!
