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/…
❤1👍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
The CSS if() function: Conditional styling will never be the same - LogRocket Blog
Explore how the if() function works, see practical examples, and compare it to existing CSS conditional techniques.
❤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.)
❤2👍1