September 23rd: Patterns, Pizza, and Pirouette
This grid of "A"s by Ricardo Oliva Alonso is attractive on its own, but the hover effect with the staggered delay for each letter is a very satisfying watch.Sponsored:
Feature Flag Management Made Simple
Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.
Inspired by a section of the book "Refactoring UI" recommending HSL as a color format, Jhey makes use of some React and CSS variables to make this cute color picker. Slide it left-to-right for hue, and use the dials above and below to adjust the saturation and lightness.
You can always count on the @keyframers (David Khourshid and Stephen Shaw) to build out super fancy animations and teach us as they are doing it. This past week was this 3D isometric flying paper animation they did with CSS alone.Sponsored:
Build Sites on WordPress.com
Join the 34% of the internet already using WordPress and build your site there, where you won't have to worry about security, spam, upgrading software, and all that technical debt. You can start your blog, build a portfolio, or even open a store!
Toggles that have a bit of anxiety from Daryn St. Pierre. The blobs are built from a couple of pseudo-elements with animated scaling transforms.
The Earth is most definitely not flat! This is Natalie's shout-out to the climate strikers.
Inspired by a Dribbble shot by Jemka Gasanov, this is Conner's nod to all the Area 51ers this week. We still don't know what's out there, and maybe that's good for all our imaginations and creative sparks. This was drawn with just HTML elements and CSS shaping them.
Variable Google Fonts
Nathan Williams shows us that Google Fonts is going to start offering variable fonts, and in fact already is using a special URL format. Best for experimental work while this is all still in beta.
Noisy SVG Lines
Johan Karlsson with some generative art. Click to generate a new pattern, and you can download them if you'd like.
Irresistible little chicks from Adir. The eggs shape come from a very fancy border-radius value, and look solid especially with that inner shadow, but they break apart thanks to a clip-path: polygon() and animation. Even the blinking chicks are created with CSS.
Navigation bar with circle
A Dribbble shot by Ketan turned into an interactive UI by Zed Dash. It's certainly unexpected to see that knocked out circle area move along the bar. Looks like the trick is that it is the whole area (circle and knockout area) is one SVG shape that moves together. A CSS drop-shadow filter makes it look extra convincing.