3D animated teardrop image gallery
What Ana Tudor can create with CSS using math functions is astonishing. This gallery is just one example of it... using parametric equations and with so little code! Mind-blowing.
Connected Circles with Anchor Positioning
Temani Afif is another developer who takes CSS to the limit (and beyond). Combining anchor positioning, attr(), container queries, shape(), trigonometric functions, and other modern features, Temani creates something that is almost unthinkable with plain CSS. Note: this demo will only work on Chrome for now.
RGB Dancer
Three videos, some CSS filters, and a few lines of JavaScript to follow the mouse (move the mouse around the dancer) is all that Alexandre Vacassin needed to create a hypnotic demo. Cool use of blend modes.
Progressively enhanced details element animation
In this demo, Cyd Stumpel uses a progressive enhancement approach to animate disclosures/accordions. From static elements (HTML), to animated (CSS), to a second layer of animations (JS) if the first one wasn't supported. Web development done the best way.
CSS Animated Light & Shadow
Amazing use of box-shadow, animations, and background gradients by Vicio Bonura. The effect is so realistic and smooth as the source of light moves around, that it's unbelievable that this demo is just HTML and CSS.
50 Year Calendar
Brett Schwickerath crafted a new version of one of those "eternal calendars" (good for 50 years). It may be a work in progress and not interactive yet, but the demo is coming along nicely: nice design, nice colors, responsive... Can't wait to see the final result.
Abstract Olives
Maybe it's nostalgia (I was born in the region that produces the most olive oil in the world), maybe it's that Genuary is around the corner, but this generative piece by Holland Blumer speaks to me. It's simply beautiful. Feel like printing it and hanging it in the office.
Christmas Switcher Tree
Superb use of colors, shapes, and animations. This demo by Lia Tsernant inspired me to create one using actual toggle switches. Needles to say, my demo doesn't come even close to Lia's... but that's normal considering how good this one is, and really good timing.
shader-art: lava #anydayshaders 40
Lea Rosema created another hypnotic shader. This one looks like the motion of a lava lamp in beige, black, and blue tones. It feels relaxing and peaceful. I like it.
CSS text-grow
Adam Argyle was at it again, sharing more demos of new and upcoming CSS features. This time it is text-grow, that he used to adjust the size of the text in the row to fit the justification. Creating a really cool effect. Note: this demo will only work in Chrome Canary after activating the experimental-web flag.
Top comments (0)