Natural Shadows in CSS with inlined SVG filters

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 …

JavaScript: Hostnames as self-executing fetches

In a conversation between Mathias Bynens and Ingvar Stepanyan, an idea popped up: what if a hostname — such as www.bram.us — would be valid JavaScript? Using a JavaScript Proxy, that’s perfect possible. My favourite is hostnames being valid (and working!) JavaScript. — Ingvar Stepanyan (@RReverser) June 12, 2019 Building further upon that is proxy-www, …

Using the Specificity of :where() as a CSS Reset

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 …

Practical Use Cases for Scroll-Linked Animations with CSS Scroll-Timeline

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 →

petite-vue — A 5.5kb subset of Vue optimized for Progressive Enhancement

Inspired by Alpine.js, Evan You — author of Vue — created petite-vue petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a …

Custom Scrollbars In CSS

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. …

A Look at Building with Astro

Chris did the experimenting I’ve been meaning to do and wrote the blogpost I wanted to write, covering Astro: Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you’re using a JavaScript framework (and you are), but the output is …

Detecting Hover-Capable Devices

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 …