Get Ready For the Powerful CSS border-shape Property! đź”—
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the [...]
CSS-Tricks
Posts
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More 🔗
The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the infinity keyword, container "stuck" quer [...]
writing-mode đź”—
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress [...]
pointer-events đź”—
The pointer-events property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based eve [...]
What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More 🔗
Read all about boundary-aware CSS, accessible grid lanes, time-based web designs, full-bleed, the customizable select, and new web platform features. [...]
What’s !important #14: Gap Decorations, random(), <select> field-sizing, and More 🔗
I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CS [...]
The Shifting Line Between CSS States and JavaScript Events đź”—
CSS has always had pseudo-classes that style things based on user interactions. Recent features, however, are blurring the line between what CSS "list [...]
translateZ() đź”—
The translateZ() function moves an element closer to or farther from the user. translateZ() originally handwritten and published with love on CSS-Tri [...]
translateY() đź”—
The translateY()Â function shifts an element vertically by the specified amount. translateY() originally handwritten and published with love on CSS-Tr [...]
translateX() đź”—
The translateX()Â function shifts an element horizontally by the specified amount. translateX() originally handwritten and published with love on CSS- [...]
translate() đź”—
The CSSÂ translate()Â function shifts an element from its default position on a 2-dimensional plane translate() originally handwritten and published wit [...]
Using Scroll-Driven Animations for Opposing Scroll Directions đź”—
Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving i [...]
A First Look at Scroll-Triggered Animations đź”—
Let's poke at the differences between scroll-driven and scroll-triggered animations. A First Look at Scroll-Triggered Animations originally handwritte [...]
The Siren Song of ariaNotify() đź”—
There's a brand new ariaNotify() method — defined by the WAI-ARIA 1.3 Specification — that provides a means of programmatically triggering narration i [...]
Prop For That đź”—
Props for That creates live props based things CSS can't normally see in the browser. Things like cursor position, progress values, certain form state [...]