Links
What is CSS Motion Path?
Quite simply, CSS Motion Path is a CSS property used to animate an element along a path. This path can be anything - one you've created yourself or taken from an existing design. The element you want to animate can also be anything - HTML or even another SVG. In the past, you needed complicated math or a even Javascript library to handle animating elements in this way. Now it can be done with a few lines of CSS. Let’s find out how!
CSS Scroll-triggered Animations with Style Queries
Combine scroll-driven animations and style queries to trigger an animation sequence powered only by CSS.
Better form UX with the CSS property `field-sizing`
One of the more painful experiences I've encountered on the web is filling out a form input that is fixed width. Whatever I've typed becomes cutoff and I can't actually see what I've typed or am typing. Some engineers on the Chrome team have proposed and are working on a CSS solution to this problem with the
field-sizingproperty.
A highly configurable switch component using modern CSS techniques
Learn how build a highly configurable switch component using modern CSS, such as
:has(), container queries, Logical Properties and Custom Properties.
How to Favicon in 2024: Six files that fit most needs
Updated for 2024!
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
Videos
Container Queries: The next step towards a truly modular CSS
Modular, componentized frameworks and libraries are more popular than ever, but currently screen size is the only dimensional constraint to which a web design can adapt to. Luckily for us, great things are a foot. Container Queries, which allow you to style elements based on their ancestors dimensions, a feature requested by many since the advent of component-based front-end architectures met the principles of responsive web design, is finally in active development. In this talk, Maarten will explain what Container Queries are and show you how each component can adapt its design to the dimensions of its container. Join us on our journey towards a more modular CSS!
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.