Public CSS Custom Properties in the Shadow DOM
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
michaelwarren.dev
Public CSS Custom Properties in the Shadow DOM
The definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.
👍1
CSS Hyphens, Words, Syllables, and Languages
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor
CSS Hyphens, Words, Syllables, and Languages
There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we…
👍1
A Handy Use of Subgrid To Enhance a Simple Layout
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Piccalilli
A handy use of subgrid to enhance a simple layout
subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.
👍1
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
WebKit
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Background If you’re new to scroll-driven animations, welcome!
👍1
Impact of AI on Tech Content Creators
Chris Coyier shares some thoughts on how AI might impact content creators. - https://chriscoyier.net/2025/07/23/impact-of-ai-on-tech-content-creators
#css
Chris Coyier shares some thoughts on how AI might impact content creators. - https://chriscoyier.net/2025/07/23/impact-of-ai-on-tech-content-creators
#css
Chris Coyier
Impact of AI on Tech Content Creators
Wes on Syntax: I write content. That content is consumed by people. But a lot of it has been used to train AIs for people to get a very quick answer. You can see the amount of bots visiting website…
👍1
Creating a Scroll-Spy With 2 Lines of CSS
Una Kravets explains how scroll-target-group lets you create a scroll-spy table of contents with basically two lines of CSS. - https://una.im/scroll-target-group
#css
Una Kravets explains how scroll-target-group lets you create a scroll-spy table of contents with basically two lines of CSS. - https://una.im/scroll-target-group
#css
Una.im
Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
👍3
Quick & Easy Theme Transitions
Kevin Powell shows how to spice up your site with quick & easy theme transitions. - https://www.youtube.com/watch?v=f_aqzyIDudI
#css
Kevin Powell shows how to spice up your site with quick & easy theme transitions. - https://www.youtube.com/watch?v=f_aqzyIDudI
#css
YouTube
Quick & Easy Theme Transitions
🔗 Links
✅ https://kevinpowell.co/courses
✅ More in-depth video on single page view transitions: https://youtu.be/jZiZs8cZAKU
✅ Learn about cross-document view transitions: https://youtu.be/quvE1uu1f_I
✅ The final code from this video: https://codepen.io/…
✅ https://kevinpowell.co/courses
✅ More in-depth video on single page view transitions: https://youtu.be/jZiZs8cZAKU
✅ Learn about cross-document view transitions: https://youtu.be/quvE1uu1f_I
✅ The final code from this video: https://codepen.io/…
❤2👍1
Designing for User Font-size and Zoom
Miriam Suzanne explores different ways to interact with a user’s preferred font size using modern CSS units and math functions. - https://www.oddbird.net/2025/07/22/size-preferences
#css
Miriam Suzanne explores different ways to interact with a user’s preferred font size using modern CSS units and math functions. - https://www.oddbird.net/2025/07/22/size-preferences
#css
OddBird
Designing for User Font-size and Zoom
Using modern CSS units and math functions
👍1
The CSS if() function: Conditional styling will never be the same
Ikeh Akinyemi investigates how the if() function works, shares some practical examples, and compares it to existing CSS conditional techniques. - https://blog.logrocket.com/css-if-function-conditional-styling
#css
Ikeh Akinyemi investigates how the if() function works, shares some practical examples, and compares it to existing CSS conditional techniques. - https://blog.logrocket.com/css-if-function-conditional-styling
#css
LogRocket Blog
Should you use if() functions in CSS? - LogRocket Blog
It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.
❤1👍1
Building Extensible Frontend Systems
Chris Ferdinandi shares some tips on building frontend systems—design systems, UI libraries, and so on—that can be easily extended for use cases and situations you didn’t plan for. - https://gomakethings.com/building-extensible-frontend-systems/
#css
Chris Ferdinandi shares some tips on building frontend systems—design systems, UI libraries, and so on—that can be easily extended for use cases and situations you didn’t plan for. - https://gomakethings.com/building-extensible-frontend-systems/
#css
gomakethings.com
Building extensible frontend systems
Today, I want to talk about how to build frontend systems—design systems, UI libraries, and so on—that can be easily extended for use cases and situations you didn’t plan for. Let’s dig in! tl;dr: Lots of “hooks” in the form of CSS variables, cascade layers…
👍2❤1⚡1
A Gentle Introduction to Anchor Positioning
Saron Yitbarek gives a fantastic introduction to anchor positioning. - https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning
#css
Saron Yitbarek gives a fantastic introduction to anchor positioning. - https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning
#css
WebKit
A gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is.
👍1
Better CSS layouts: Time.com Hero Section
Ahmad Shadeed explores how to rebuild and improve a popular layout sharing a number of handy tips along the way. - https://ishadeed.com/article/time-layout
#css
Ahmad Shadeed explores how to rebuild and improve a popular layout sharing a number of handy tips along the way. - https://ishadeed.com/article/time-layout
#css
Ishadeed
Better CSS layouts: Time.com Hero Section
Taking another look at Time.com hero section. Can we do better?
👍2
Style Your Underlines
Jeremy Keith demonstrates different options you have to style link underlines. - https://adactio.com/journal/22084
#css
Jeremy Keith demonstrates different options you have to style link underlines. - https://adactio.com/journal/22084
#css
Adactio
Style your underlines
Make your links beautiful and accessible.
👍1
Get the Number of auto-fit/auto-fill Columns in CSS
Ana Tudor shows how to get the number of auto-fit/auto-fill columns in CSS using container query units, CSS variables, and CSS mathematical functions. - https://frontendmasters.com/blog/count-auto-fill-columns
#css
Ana Tudor shows how to get the number of auto-fit/auto-fill columns in CSS using container query units, CSS variables, and CSS mathematical functions. - https://frontendmasters.com/blog/count-auto-fill-columns
#css
Frontend Masters
Get the number of auto-fit/auto-fill columns in CSS
Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…
❤🔥1👍1
What We Learned From Creating PostCSS
Andrey Sitnik shares lessons learned from creating and maintaining the PostCSS open source project over the past 12 years. - https://evilmartians.com/chronicles/what-we-learned-from-creating-postcss
#css
Andrey Sitnik shares lessons learned from creating and maintaining the PostCSS open source project over the past 12 years. - https://evilmartians.com/chronicles/what-we-learned-from-creating-postcss
#css
evilmartians.com
What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog
We share what have we learned creating PostCSS and the huge ecosystem around it. Get 8 key lessons from Andrey Sitnik, creator of PostCSS.
👍1
CSS-Only Scrollspy Effect Using scroll-marker-group and :target-current
Sara Soueidan shows how to create a Scrollspy effect using a couple of lines of CSS. - https://www.sarasoueidan.com/blog/css-scrollspy
#css
Sara Soueidan shows how to create a Scrollspy effect using a couple of lines of CSS. - https://www.sarasoueidan.com/blog/css-scrollspy
#css
Sarasoueidan
CSS-only scrollspy effect using scroll-marker-group and :target-current
– The personal website of Sara Soueidan, inclusive design engineer
❤2
Rolling the Dice with CSS random()
Jon Davis, Jen Simmons, and Tim Nguyen give an introduction to the random() function that’s coming to CSS, which will let you create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript. - https://webkit.org/blog/17285/rolling-the-dice-with-css-random
#css
Jon Davis, Jen Simmons, and Tim Nguyen give an introduction to the random() function that’s coming to CSS, which will let you create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript. - https://webkit.org/blog/17285/rolling-the-dice-with-css-random
#css
WebKit
Rolling the Dice with CSS random()
Random functions in programming languages are amazing.
❤2👍1
The `-path` of Least Resistance (Part 1)
Amit Sheen explores the clip-path property, starting with basics and moving through the functions and syntax to powerful shape logic that goes way beyond the basic polygons you might be used to. - https://frontendmasters.com/blog/the-path-of-least-resistance-part-1
#css
Amit Sheen explores the clip-path property, starting with basics and moving through the functions and syntax to powerful shape logic that goes way beyond the basic polygons you might be used to. - https://frontendmasters.com/blog/the-path-of-least-resistance-part-1
#css
Frontendmasters
The `-path` of Least Resistance (Part 1)
A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.
👍1
Obsessing Over Smooth radial-gradient() Disc Edges
Ana Tudor demonstrates how to use an underdog media query, resolution queries, to define radial gradients that don’t blur or become jagged. - https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
#css
Ana Tudor demonstrates how to use an underdog media query, resolution queries, to define radial gradients that don’t blur or become jagged. - https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
#css
Frontend Masters
Obsessing Over Smooth radial-gradient() Disc Edges
(… and how that lead me to a very underused CSS feature, resolution media queries.)
❤3👍1
3D Layered Text: The Basics
Amit Sheen explains how to build the layered 3D text effect from scratch using HTML and CSS, covering structure, stacking, indexing, perspective, and how to make it all come together visually. - https://css-tricks.com/3d-layered-text-the-basics
#css
Amit Sheen explains how to build the layered 3D text effect from scratch using HTML and CSS, covering structure, stacking, indexing, perspective, and how to make it all come together visually. - https://css-tricks.com/3d-layered-text-the-basics
#css
CSS-Tricks
3D Layered Text: The Basics | CSS-Tricks
A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.
👍1