Retro Futuristic Radio Buttons
I really enjoyed this demo by Josh Dillon. The transition to selected and unselected states is so smooth and natural, and the style is exactly what I would expect from the title. He achieved the effect using SVG, and the result is stunning. A really cool demo.
Make a landscape using only primitive shapes
A generative art piece by Sophia (Fractal Kitty). It uses p5.js for drawing triangles and circles to create unique landscapes. It takes into account the moon’s position to place shadows accordingly. Reload the page and enjoy the different landscapes.
:hover > :not(:hover) — fanning list of fruit
Adam Argyle experimenting with CSS effects and the relative position of elements with respect to their siblings. It uses custom properties, but it looks like it’s a demo getting ready for the recently added sibling fuctions in CSS. Warning: motion, the demo can get really animated.
CSS Loader: Stirring Cauldron
This loader was created with HTML+CSS by Juliane Hüttl. I like the design, its colors, and the small details it has; from the bubbles popping to the movement of the ladle that takes into account position and angle.
building text with SVG
Blink and you may miss the animation by Jhey Tompkins. Animated robotic arts complete the text in SVG to create a “magical” interaction on the web. It may look simple, but it has that little touch that moves a demo from good to great, and it is the little things that take the experience to the next level.
Pure CSS 3D Cat
Julia Miocene always creates amazing CSS illustrations. This one is a little bit different to the ones she normally does (although she has been playing with 3D CSS lately) and it is breathtaking. Beautiful work.
Single Div Illustration: Gentleman
If you want a master class on conic gradients on CSS, look no further than this CSS illustration by Arman Borkhani. Great way of using colors and blank space (kudos to Lucian Radu, the original illustrator), and fantastically translated into CSS code.
CSS Image Stack Cycle
In the past couple of months, I have seen many “image stack” components and animations, but this one by Ana Tudor has the smoothest animation of all. It is really clean without glitches or sudden jumps. Plus, she used big cats as the images, which is a big plus too :)
Check Spinner with Pop Effect
Jon Kantner creates whimsical components that favor visuals and micro-interactions. This one is no exception. A beautiful loader that ends in checkmark for success, I could see something like this implemented on almost any e-commerce website to improve the user experience.
attr() color demo
The attr() function is getting a make-over and improving considerably. Una Kravets created a demo to showcase the new changes… Unfortunately, it won't work in most browsers at the moment, but it will be available soon on Chromium (and it can be tested in the nightly version).
Top comments (0)