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…
👍3
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
👍1
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
🤔5❤2
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…
👍1
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...
👍3❤1
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.
👍1
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.
💯3👍2
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.
👍2🔥2
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...
👍3❤1
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…
👍2
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
👍1
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.
👍1
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.
👍1
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!
👍2❤1
Use "translate" to turn off element translations - https://www.stefanjudis.com/today-i-learned/non-translatable-html-elements/
#css
#css
Stefanjudis
Use "translate" to turn off element translations
Use the `translate` attribute to disable localization for HTML elements.
👍1
A simple masonry-like composable layout
A masonry layout is a grid-like layout that has a set column system with a flexible, content-driven row system. What this setup does is allow content to be displayed in a brick wall-like layout — hence the name, masonry. Content is packed into space, rather than adhering to a strict, set row system.- https://piccalil.li/blog/a-simple-masonry-like-composable-layout/
#css
A masonry layout is a grid-like layout that has a set column system with a flexible, content-driven row system. What this setup does is allow content to be displayed in a brick wall-like layout — hence the name, masonry. Content is packed into space, rather than adhering to a strict, set row system.- https://piccalil.li/blog/a-simple-masonry-like-composable-layout/
#css
Piccalilli
A simple masonry-like composable layout
It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.
❤1👍1
Balancing Text In CSS
How to make text look more balanced
in CSS. - https://ishadeed.com/article/balancing-text-css/
#css
How to make text look more balanced
in CSS. - https://ishadeed.com/article/balancing-text-css/
#css
Ishadeed
Balancing Text In CSS
Make text look more balanced with text-wrap in CSS.
👍3
Using padding to space an input and label
Darin Senneff shares a technique to space an input and label using padding instead of margins, improving form alignment and consistency. - https://www.darins.page/articles/using-padding-to-space-an-input-and-label
#css
Darin Senneff shares a technique to space an input and label using padding instead of margins, improving form alignment and consistency. - https://www.darins.page/articles/using-padding-to-space-an-input-and-label
#css
Darin Senneff
Using padding to space an input and label - Darin Senneff
Something I started doing lately is using the padding of a <label> element to create the space between it and an <input> instead of a margin or…
👍1
Typecasting and Viewport Transitions in CSS with tan(atan2)
Juan Diego Rodríguez explores the mathematical approach behind CSS transitions using tan(atan2) for smooth viewport-based animations. - https://css-tricks.com/typecasting-and-viewport-transitions-in-css-with-tanatan2/
#css
Juan Diego Rodríguez explores the mathematical approach behind CSS transitions using tan(atan2) for smooth viewport-based animations. - https://css-tricks.com/typecasting-and-viewport-transitions-in-css-with-tanatan2/
#css
CSS-Tricks
Typecasting and Viewport Transitions in CSS With tan(atan2()) | CSS-Tricks
We've been able to get the length of the viewport in CSS since... checks notes... 2013! Surprisingly, that was more than a decade ago. Getting the
👍1
CSS attr() gets an upgrade
Bramus Van Damme details the new capabilities of CSS attr(), allowing type casting for improved dynamic styling and flexibility. - https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/
#css
Bramus Van Damme details the new capabilities of CSS attr(), allowing type casting for improved dynamic styling and flexibility. - https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/
#css
Bram.us
CSS attr() gets an upgrade
You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than .