Using @scroll-timeline from the Scroll-Linked Animations Specification, Fabrizio Calderan has created a very nice demo which shows the remaining reading time. As you scroll down, the time counts down to 0. 📽 Using a browser with no support for Scroll-Linked Animations? Here’s a recording you can watch: There’s a few tricks Fabrizio uses there to …
Continue reading “A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline“
Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a …
Continue reading “Natural Shadows in CSS with inlined SVG filters”
As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0: :where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example. Over at …
Continue reading “Using the Specificity of :where() as a CSS Reset”
As a follow-up to my two posts on Scroll-Linked Animations with CSS Scroll-Timeline (part 1 and part 2), I wrote an article for CSS-Tricks covering some practical use-cases (with code). Today the article got published 🙂 Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines →
Ahmad Shadeed shows us how to stylize scrollbars in CSS. See the Pen Custom Scrollbar – 2 by Ahmad Shadeed (@shadeed) on CodePen. While I’m no big fan of doing so in general, I can see some specific situations where it might come in handy, such as styling the scrollbars of overflowing tab button bars. …
Continue reading “Custom Scrollbars In CSS”
There are some changes being proposed regarding viewport units, finally solving that “100vh in Safari on iOS” issue …
Using Level 5 Media Queries, Michelle writes how to distinguish hover from touch devices. @media (hover: hover) { .some-component { /* Styles for hover-able devices */ } } Detecting Hover-Capable Devices → Related: This tweet by Adam Argyle summarizes it nicely: ✅ style if mobile✅ style if desktop✅ style if stylus✅ style if controller✅ combine …
Continue reading “Detecting Hover-Capable Devices”
Enter your Style Object on the left, hit the button, and see the Custom Properties on the right.
Max Böck: With container queries now on the horizon – will we need media queries at all? Is there a future where we build responsive interfaces completely without them? As Max details we will still need both, but will see a shift from some Media Queries to Container Queries. Good read; I found myself nodding …
Continue reading “Media Queries in Times of Container Queries”
Over at Codrops, Georgi Nikolov digs into Houdini’s Paint API and the Properties and Values API along with that. Recommended, as it’s all well explained and easy to follow along. Drawing Graphics with the CSS Paint API → Related: css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles →