Polishing Your Typography With Line Height Units
Jen Simmons explains how to use line-height units when setting paragraph margins — creating vertical rhythm in your text. - https://webkit.org/blog/16831/line-height-units
#css
Jen Simmons explains how to use line-height units when setting paragraph margins — creating vertical rhythm in your text. - https://webkit.org/blog/16831/line-height-units
#css
WebKit
Polishing your typography with line height units
Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text.
Good vs Great Animations
Emil Kowalski shares a collection of practical tips to help you create better animations. - https://emilkowal.ski/ui/good-vs-great-animations
#css
Emil Kowalski shares a collection of practical tips to help you create better animations. - https://emilkowal.ski/ui/good-vs-great-animations
#css
Emil Kowalski
Good vs Great Animations
Practical tips on how to go from good to great animations.
Out of Order
Donnie D’Amato explains how trying to manipulate the order of things using CSS can often lead to hidden problems you might not notice. - https://blog.damato.design/posts/out-of-order
#css
Donnie D’Amato explains how trying to manipulate the order of things using CSS can often lead to hidden problems you might not notice. - https://blog.damato.design/posts/out-of-order
#css
blog.damato.design
Out of order
CSS does a lot these days, and I argue that it does too much.
The CSS @layer at-rule
Chris Ferdinandi gives a nice introduction to the @layer at-rule. - https://gomakethings.com/the-css-layer-at-rule
#css
Chris Ferdinandi gives a nice introduction to the @layer at-rule. - https://gomakethings.com/the-css-layer-at-rule
#css
Gomakethings
The CSS @layer at-rule
You’ve probably already seen me mention that I’m building a UI library for people who love HTML, powered by modern CSS and Web Components.
I’ve been giving a lot of thought to how to make CSS files modular in the UI library without requiring any sort of build…
I’ve been giving a lot of thought to how to make CSS files modular in the UI library without requiring any sort of build…
Good vs Great Animations
Emil Kowalski shares a collection of practical tips to help you create better animations. - https://emilkowal.ski/ui/good-vs-great-animations
#css
Emil Kowalski shares a collection of practical tips to help you create better animations. - https://emilkowal.ski/ui/good-vs-great-animations
#css
Emil Kowalski
Good vs Great Animations
Practical tips on how to go from good to great animations.
Easier Layout With margin-trim
Jen Simmons introduces margin-trim, a property that lets you tell a container to trim the margins off its children — any margins that push up against the container. - https://webkit.org/blog/16854/margin-trim
#css
Jen Simmons introduces margin-trim, a property that lets you tell a container to trim the margins off its children — any margins that push up against the container. - https://webkit.org/blog/16854/margin-trim
#css
WebKit
Easier layout with margin-trim
If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.
Smashing Animations: How Classic Cartoons Inspire Modern CSS
Andy Clarke shows how retro animation techniques have surprising parallels to modern CSS. - https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css
#css
Andy Clarke shows how retro animation techniques have surprising parallels to modern CSS. - https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css
#css
Smashing Magazine
Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS — Smashing Magazine
Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS. In this article, pioneering…
Using Container Query Units Relative to an Outer Container
Ana Tudor shows a trick of utilizing a custom property to use container query units relative to an outer container. - https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container
#css
Ana Tudor shows a trick of utilizing a custom property to use container query units relative to an outer container. - https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container
#css
Updates to Popover and CSS Anchor Positioning Polyfills
James Stuckey Weber gives an overview of updates to the Popover and CSS Anchor Positioning Polyfills. - https://www.oddbird.net/2025/05/06/polyfill-updates
#css
James Stuckey Weber gives an overview of updates to the Popover and CSS Anchor Positioning Polyfills. - https://www.oddbird.net/2025/05/06/polyfill-updates
#css
OddBird
Updates to Popover and CSS Anchor Positioning Polyfills
hint popovers, position-area and more
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
Gabriel Shoyombo gives an overview of different proposals for adding support for masonry-style layouts in CSS. - https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module
#css
Gabriel Shoyombo gives an overview of different proposals for adding support for masonry-style layouts in CSS. - https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module
#css
Smashing Magazine
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? — Smashing Magazine
There were duelling proposals floating around for adding support for masonry-style layouts in CSS. In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone…
Guitar Chords in CSS
Mads Stoumann looks into the attr() method, demonstrating how it can help you make easily readable components. - https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
#css
Mads Stoumann looks into the attr() method, demonstrating how it can help you make easily readable components. - https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
#css
DEV Community
Guitar Chords in CSS
In my previous article, I looked into the new, improved attr() method in CSS. I was over the moon...
Use CSS reading-flow for logical sequential focus navigation
Di Zhang and Rachel Andrew explain the reasons behind the design of reading-flow and reading-order properties and some brief details to get you started with them. - https://developer.chrome.com/blog/reading-flow
#css
Di Zhang and Rachel Andrew explain the reasons behind the design of reading-flow and reading-order properties and some brief details to get you started with them. - https://developer.chrome.com/blog/reading-flow
#css
Chrome for Developers
Use CSS reading-flow for logical sequential focus navigation | Blog | Chrome for Developers
Learn how to use the new reading-flow and reading-order properties in Chrome 137.
Creating Blob Shapes using clip-path: shape()
Temani Afif shows how to create blob shapes using the new shape() function. - https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape
#css
Temani Afif shows how to create blob shapes using the new shape() function. - https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape
#css
Frontend Masters
Creating Blob Shapes using clip-path: shape()
After the flower shapes, let’s move to one of the coolest shapes: the Blob! Those distorted wiggly circles that were almost impossible to achieve using CSS. But now, they are possible using the new shape() function.
Styling the icon for HTML date and time types
Cassidy Williams shows how to style the icon for the clock or calendar of input types using ::-webkit-calendar-picker-indicator pseudo-class. - https://cassidoo.co/post/input-type-date
#css
Cassidy Williams shows how to style the icon for the clock or calendar of input types using ::-webkit-calendar-picker-indicator pseudo-class. - https://cassidoo.co/post/input-type-date
#css
cassidoo.co
Styling the icon for HTML date and time types
If you want a custom-styled icon for HTML date/time types, there's some options for you.
First adventures in View Transitions
Ben Frain gives a nice introduction to View Transitions. - https://benfrain.com/first-adventures-in-view-transitions
#css
Ben Frain gives a nice introduction to View Transitions. - https://benfrain.com/first-adventures-in-view-transitions
#css
Ben Frain
First adventures in View Transitions
Until recently I had taken only the most cursory look at View Transitions. Now they are in Safari too, and therefore viable across multiple platforms, I wanted to understand them a little more and...
CSS Logical Properties
Chris Ferdinandi gives a short introduction to Logical CSS Properties. - https://gomakethings.com/css-logical-properties
#css
Chris Ferdinandi gives a short introduction to Logical CSS Properties. - https://gomakethings.com/css-logical-properties
#css
Gomakethings
CSS logical properties
Today, I wanted to talk about CSS logical properties, a newer (and arguably better) way to define properties that are directional in nature.
Let’s dig in!
The *-top, *-bottom, *-left, and *-right properties A lot of CSS properties—things like margin, padding…
Let’s dig in!
The *-top, *-bottom, *-left, and *-right properties A lot of CSS properties—things like margin, padding…
CSS Boilerplate
A default CSS structure for projects of any size by Manuel Matuzović. - https://fokus.dev/tools/css-boilerplate
#css
A default CSS structure for projects of any size by Manuel Matuzović. - https://fokus.dev/tools/css-boilerplate
#css
fokus.dev
CSS boilerplate | fokus
UA+ (User agent plus), a different type of reset style sheet
Refactoring a scroll-driven animation from JavaScript to CSS
Ever feel like your JS scroll animations are a bit heavy? This article is perfect for you; it guides you through converting those animations to CSS, making them much smoother and more efficient. The author explains how to pinpoint JS inefficiencies, then shows how to use CSS properties like scroll-behavior and scroll-snap for better performance. - https://component-odyssey.com/articles/08-refactoring-a-js-driven-scroll-animation-to-css
#css
Ever feel like your JS scroll animations are a bit heavy? This article is perfect for you; it guides you through converting those animations to CSS, making them much smoother and more efficient. The author explains how to pinpoint JS inefficiencies, then shows how to use CSS properties like scroll-behavior and scroll-snap for better performance. - https://component-odyssey.com/articles/08-refactoring-a-js-driven-scroll-animation-to-css
#css
Component-Odyssey
Refactoring a scroll-driven animation from JavaScript to CSS
Cut down on the amount of JavaScript you ship by refactoring a scroll-linked animation from JavaScript to CSS.
How to Use Rem Units in CSS for Accessible Design
Ever wonder how rem units work in CSS? This guide explains it clearly. It covers how rem (root em) units are based on the root element's font size, making scalable and accessible design easier. The author also compares rem with px and em, and provides practical examples for using rem in font sizing, media queries, and more. - https://www.a11y-collective.com/blog/what-is-rem-in-css
#css
Ever wonder how rem units work in CSS? This guide explains it clearly. It covers how rem (root em) units are based on the root element's font size, making scalable and accessible design easier. The author also compares rem with px and em, and provides practical examples for using rem in font sizing, media queries, and more. - https://www.a11y-collective.com/blog/what-is-rem-in-css
#css
The A11Y Collective
How to Use Rem Units in CSS for Accessible Design
Learn what rem units are, how they differ from other units, and how to apply them for optimal, scalable, and responsive designs.
CSS Wishlist 2025
CSS Wishlist time! Sarah Gebauer shared recently and inspired me. - https://nerdy.dev/css-wishlist-2025
#css
CSS Wishlist time! Sarah Gebauer shared recently and inspired me. - https://nerdy.dev/css-wishlist-2025
#css
nerdy.dev
CSS Wishlist 2025
Holy crap I guess I want 15 more things!