January 2023
-
Genuary 2023 Day 7: Color Palette
A piece of generative art by Ben Matthews. The colors are based on the Finding Nemo poster (I knew they looked familiar), and although the strokes may look "circular," they are rectangles wandering around. A remarkable effect, and the results are beautiful.
-
Pure CSS Logic Gates
Max Swann uses the
:has()pseudo-class along with the checkboxes to implement some logic gates. The result is beautiful and functional. In this case, I wouldn't consider the checkboxes a hack, as they are the natural element for these binary inputs.
-
Undo/Redo With :active Clock Animation
Inspired by Oleg Frolov, Jon Kantner brings a beautiful component for undo/redo or back/forward buttons. As with all of Jon's demos, what really makes this demo are the micro-interactions and micro-animations. And check another January '23 demo from the same author.
-
CSS Carp
This CSS Art by Fitz is interesting for many reasons: it uses filters, transforms, masks, gradients... and even trigonometric functions to make the carp's body! Unfortunately, those functions are not widely supported, so you will need to use Firefox or Safari to see this demo in all its beauty.
-
3D Walkman - Pure CSS
Ricardo Oliva Alonso is a pro at creating 3D CSS demos, and this is no exception. Spice it up with a little JavaScript (to allow rotation and music to play), and this is an even more incredible demo.
-
House Resizing with CSS Container Query
In this demo, Gayane Gasparyan showcases what can be achieved with container queries and a little CSS. Resize the house to add more rooms (which reminds me a little of another demo by Ben Evans?) The house design is by Guido Rosso on Dribbble.
-
Pure CSS hover effect on surrounding siblings with :has()
Ana Tudor brings another demo using
:has(). This time, it is used for coloring the elements surrounding the hovered element. I don't know why this demo reminds me of the game Dance Dance Revolution and the disco stages with light.
-
Cube with glassmorphism effect
Also from Ana Tudor, this demo explores three-dimensional CSS and how the filters (and
backdrop-filter). Unfortunately, this particular effect doesn't work in most browsers... yet. Chrome only for now.
-
Nightlight
This is a Three.js demo by Paul. I like how clean it looks. And it has a hypnotic effect from certain angles (rotate and zoom the demo using the mouse.)
-
3D carousel with trig-functions
Another trigonometric functions demo (so it won't work on Chrome, just on Safari and Firefox for now). This one is by Mark Boots. There could be a demo that works in all browsers without the trigonometric functions, but it would have magic numbers and weird transforms. This method is simpler.
...And check the following list!
