- read

10 Cool CodePen Demos (August 2023)

Alvaro Montoro 97

Photo by Kari Shea on Unsplash

CSS Experiment: No Div Forest

Khanh Tran has been experimenting with textures in CSS and drawings with a single element or no element at all (using the <body>). This is one of them. The forest is a collection of conic gradients, so be ready to open the CSS file if you want to check the code, as it’s so large that the dev tools crash if you try to inspect the body.

Image hover effect with shaders

Move the mouse over the palm tree picture to get a glitch animation where the red, green, and blue channels separate. Juxtopposed brings this catchy effect, created with threeJS, and shares a video on how to code the demo.

(Svelte) Range Slider Pips fancy example

These slider labels float and bounce with the input, providing a beautiful experience (micro-interactions for the win!) Simon Goellner’s demo is clean and an excellent implementation of the Svelte Range Slider (with pips) library.

Marble

If we are talking about CSS Art, Kass is an expert. This three-dimensional-looking sphere explores how to apply realistic shadows and lights (which are also shadows in CSS) to a single element. And extra points for making it responsive (not too common in CSS Art).