10 Cool CodePen Demos (May 23)
A collection of 10 cool and exciting front-end demos shared on CodePen during May 2023
Flying through hexagons
Amit Sheen is an expert on 3D in CSS. This demo would be a beautiful show of CSS in three dimensions, but the “Fly through” mode takes it to be one of the best demos you’ll see using translated3D.
100% 3D CSS + HTML Render
Behind this long (and descriptive) title, there’s another amazing 3D CSS demo (and one of the best you’ll see in a long time, too!). Jane Ori brings to life a whole city district in CSS and HTML (and a bit of JavaScript to control the camera). Beautiful art and implementation. Note: it works best on Firefox.
Filler
Some generative art to continue. In Filler, Dillon creates colorful patterns that randomly multiply and cover the whole screen. I like how easy and pretty they look. And how they fit just perfectly.
gradient-art
Using gradients and mix-blend-mode, we can get unbelievable effects, add an animated background-position, and things get even more impressive. For example, Oscar Saharoy achieves a fantastic effect with just two gradients. Mind-blowing results.
🌙 CSS Color Mix( ) demo
Sasha shares a demo to showcase one of the latest CSS color functions: color-mix(). Notice that although the title mentions it only works on the latest Chrome, the demo will work on other browsers too.
Polaroid memories
This demo is clean and nice. Håvard Brynjulfsen created it as part of a CodePen challenge, and it is a nice demo of an excellent scrolling effect that can be achieved using position:sticky.
CSS Rollin’ Road 🌞 (See ya Miami!)
Jhey Tompkins brings one of his whimsical 3D demos with CSS and GSAP. This time it is a car riding along an “infinite” road. Move the mouse around to view the car from different angles, and click to change between day and night. It is fun.
Ocean Sunrise 🌅 (548 bytes)
This SVG drawing is impressive, especially considering it was coded in less than 1KB. Bence Szabo is the author. Check other of his work with CSS and SVG. It’s great.
3D parallax effect on hover
Temani Afif builds many creative things with CSS (his collection of background patterns is great). In this demo, he shared a set of cards that provide a 3D effect using clip-path and transform.
columns and clamp css
This demo by Itay Haephrati shows how to create a responsive multi-column display with a handful of lines of code –and without using Flexbox or Grid, with the columns property alongside the clamp() function.