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 icon or rotating pill), but the CSS shadows and lightning from this 3D Camera Icons are really out of this world.
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.
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.
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!)
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!)
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.
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)
Link to demo: https://codepen.io/josetxu/pen/QWVajaN
Temani Afif’s demo uses the
@property so 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.
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.