An Interest In:
Web News this Week
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
10 Cool CodePen Demos (March 23)
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 Jons 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.
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
Ill admit that I havent tried Caleb Millers demo because I dont have a VR set, so I cant 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!)
Link: https://codepen.io/ste-vg/pen/eYLXMwB
Spiral circles
I like Yuan Chuans 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 cant 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)
Link to demo: https://codepen.io/josetxu/pen/QWVajaN
Cool hover effect using one element
Temani Afifs demo uses the @property
so it wont work in all browsers, so if you cant 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)
Im 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.
Original Link: https://dev.to/alvaromontoro/10-cool-codepen-demos-march-23-484p
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To