10 Cool CodePen Demos (August 2023)

#webdev #html #css #javascript

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).

CSS-only Flower mask with rotation and hover effect

Temani Afif makes this list often. He creates impressive animations and effects with single elements and takes HTML and CSS to limits that people didn’t even know existed. This week’s dem is an example: the animated canvas and effects are all part of the <img> element. No additional elements or containers are needed.

Inner Radius Design Tip with CSS Custom Properties

This is an educational demo. Jhey shows how an inner border-radius doesn’t match the parent’s border-radius and what simple calculation needs to be applied to get a great match. Then, CSS variables are added to the mix so the browser does all the work.

Scroll-triggered animation

Ana Tudor brings an exciting experiment: using custom properties and animation-play-state, she can control when an animation runs based on how much of the parent is scrolled into view. Scroll down the page, and the square starts spinning; scroll up, and it will stop.

Pieces of string

This generative art project by Dillon reminds me of that old Windows screensaver with pipes popping all over the screen, mixed with Keith Haring’s dancing men pop art. Maybe it’s the nostalgia and how it can be easily customized with the mouse, but I really enjoyed this demo.

Sunday CSS #8: Mosquito

Julia Miocene has been sharing CSS Arts and animations weekly, and this one got my attention. It is a mosquito flying back and forth around the screen, but it has so many details and moving parts that make it impressive… and all in HTML and CSS, no JS. Simply amazing.

Fade out cards — Transition

Try deleting a card from the demo; depending on your browser, you’ll see a smooth transition. How? With the View Transitions API, an experimental technology only available on Chromium. Una Kravets shares a way to use it, with a fallback for the browsers that don’t support it yet.