CSS-Tricks*
@css-tricks.bsky.social
* A website about making websites.
https://css-tricks.com
https://css-tricks.com
Pinned
CSS-Tricks*
@css-tricks.bsky.social
· Nov 4
I love it when several articles in my RSS feed seem to converge around a theme or topic.
This time, it's three excellent articles on headings from @donnie.damato.design, @tempertemper.bsky.social, and @alvaromontoro.com.
css-tricks.com/headings-sem...
This time, it's three excellent articles on headings from @donnie.damato.design, @tempertemper.bsky.social, and @alvaromontoro.com.
css-tricks.com/headings-sem...
Headings: Semantics, Fluidity, and Styling — Oh My! | CSS-Tricks
A few links about headings that I've had stored under my top hat.
css-tricks.com
November 10, 2025 at 2:47 PM
I love it when several articles in my RSS feed seem to converge around a theme or topic.
This time, it's three excellent articles on headings from @donnie.damato.design, @tempertemper.bsky.social, and @alvaromontoro.com.
css-tricks.com/headings-sem...
This time, it's three excellent articles on headings from @donnie.damato.design, @tempertemper.bsky.social, and @alvaromontoro.com.
css-tricks.com/headings-sem...
Thanks to @sarasoueidan.com's Practical Accessibility course, I'm much more confident explaining the accessibility benefits of using semantic elements where possible... instead of merely saying that's the best practice.
css-tricks.com/explaining-t...
css-tricks.com/explaining-t...
Explaining the Accessible Benefits of Using Semantic HTML Elements | CSS-Tricks
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
css-tricks.com
November 6, 2025 at 3:59 PM
Thanks to @sarasoueidan.com's Practical Accessibility course, I'm much more confident explaining the accessibility benefits of using semantic elements where possible... instead of merely saying that's the best practice.
css-tricks.com/explaining-t...
css-tricks.com/explaining-t...
Trigonometry functions may be the "most hated" CSS feature according to recent polling, but @monknow.bsky.social shows off why there's so much to love about them, looking specifically at tan().
css-tricks.com/the-most-hat...
css-tricks.com/the-most-hat...
The "Most Hated" CSS Feature: tan() | CSS-Tricks
Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the "Most Hated" CSS feature.
css-tricks.com
November 3, 2025 at 4:06 PM
Trigonometry functions may be the "most hated" CSS feature according to recent polling, but @monknow.bsky.social shows off why there's so much to love about them, looking specifically at tan().
css-tricks.com/the-most-hat...
css-tricks.com/the-most-hat...
CSS trig functions make wayyy more sense the way @monknow.bsky.social explains then, even to non-math-y folks like me.
He's put together explainers on sin(), cos(), and tan().
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
He's put together explainers on sin(), cos(), and tan().
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
October 30, 2025 at 2:14 PM
CSS trig functions make wayyy more sense the way @monknow.bsky.social explains then, even to non-math-y folks like me.
He's put together explainers on sin(), cos(), and tan().
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
He's put together explainers on sin(), cos(), and tan().
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
⭐️ css-tricks.com/almanac/func...
It's easy to fall into the trap of thinking that creative layouts are reserved for larger screens. But check out how @allthatmalarkey.bsky.social keeps it real on small screens.
css-tricks.com/getting-crea...
css-tricks.com/getting-crea...
Getting Creative With Small Screens | CSS-Tricks
On mobile, people can lose their sense of context and can’t easily tell where a section begins or ends. Good small-screen design can help orient them using a variety of techniques.
css-tricks.com
October 29, 2025 at 5:15 PM
It's easy to fall into the trap of thinking that creative layouts are reserved for larger screens. But check out how @allthatmalarkey.bsky.social keeps it real on small screens.
css-tricks.com/getting-crea...
css-tricks.com/getting-crea...
An interesting idea from @silvestar.codes to use the
Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks
Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!
css-tricks.com
October 27, 2025 at 2:38 PM
An interesting idea from @silvestar.codes to use the
We’ve always been able to affect an element’s structure, like resizing and rotating it. And when we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage when crafting animations.
css-tricks.com/css-animatio...
css-tricks.com/css-animatio...
CSS Animations That Leverage the Parent-Child Relationship | CSS-Tricks
When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage.
css-tricks.com
October 24, 2025 at 2:18 PM
We’ve always been able to affect an element’s structure, like resizing and rotating it. And when we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage when crafting animations.
css-tricks.com/css-animatio...
css-tricks.com/css-animatio...
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
An Introduction to JavaScript Expressions | CSS-Tricks
A thorough but approachable lesson on JavaScript expressions excerpted JavaScript For Everyone, a complete online course offered by our friends at Piccalilli.
css-tricks.com
October 22, 2025 at 7:11 PM
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Andy's original site design was a classic. This update surpasses it. Look for all the Easter eggs! 🐣
👉 More Magnificent 7 Malarkey
I had some spare time earlier this week to add a little more finesse to my Magnificent 7 animated graphics, so I added a new background to my blog pages’ illustrations, which has some hidden features.
stuffandnonsense.co.uk/blog/more-ma...
I had some spare time earlier this week to add a little more finesse to my Magnificent 7 animated graphics, so I added a new background to my blog pages’ illustrations, which has some hidden features.
stuffandnonsense.co.uk/blog/more-ma...
More Magnificent 7 Malarkey
stuffandnonsense.co.uk
October 22, 2025 at 2:43 PM
Andy's original site design was a classic. This update surpasses it. Look for all the Easter eggs! 🐣
Really interested to see the replies here... 👀
Frontend Devs of bsky, looking for community input:
Are you using AI/LLMs in your day-to-day work?
Are you all-in or only dabbling?
What has been working well?
What has been frustrating?
How has your workflow changed?
Do you feel more or less productive?
Do you feel like a better dev?
Are you using AI/LLMs in your day-to-day work?
Are you all-in or only dabbling?
What has been working well?
What has been frustrating?
How has your workflow changed?
Do you feel more or less productive?
Do you feel like a better dev?
October 20, 2025 at 2:53 PM
Really interested to see the replies here... 👀
This'll be a banger of a talk. 💥
No more JavaScript scroll hijacking! Pure CSS now handles parallax, scroll-triggered animations & narrative experiences. Lee Meyer demos the magic #DevSummit25
Lee Meyer at Dev Summit 25 bit.ly/3KbjJfT
Lee Meyer at Dev Summit 25 bit.ly/3KbjJfT
October 16, 2025 at 10:25 PM
This'll be a banger of a talk. 💥
Let’s suppose you have some number of elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
Sequential linear() Animation With N Elements | CSS-Tricks
Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
css-tricks.com
October 15, 2025 at 1:45 PM
Let’s suppose you have some number of elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
@css-only.dev explains and demonstrates it so well.
css-tricks.com/sequential-l...
The CSS Masonry discussions are a wonderful case study on how CSS features evolve, what "consensus" means, and how that relates to things like Baseline availability.
css-tricks.com/masonry-watc...
Big high-fives to @tabatkins.com and @miriam.codes for helping add clarity on the whole process! ✋
css-tricks.com/masonry-watc...
Big high-fives to @tabatkins.com and @miriam.codes for helping add clarity on the whole process! ✋
Masonry: Watching a CSS Feature Evolve | CSS-Tricks
Looking at the CSS Masonry discussions and what they can teach us about the development of new CSS features. What is the CSSWG’s role? What influence do browsers have? What can learn from the way past...
css-tricks.com
October 13, 2025 at 2:36 PM
The CSS Masonry discussions are a wonderful case study on how CSS features evolve, what "consensus" means, and how that relates to things like Baseline availability.
css-tricks.com/masonry-watc...
Big high-fives to @tabatkins.com and @miriam.codes for helping add clarity on the whole process! ✋
css-tricks.com/masonry-watc...
Big high-fives to @tabatkins.com and @miriam.codes for helping add clarity on the whole process! ✋
Such a grossly under-covered topic — and one I need to get better at as well. Well done! 👏👏👏
If you really, really need to create a PDF and not a website, then Steve has firmly got your back to make sure it works for everyone.
piccalil.li/blog/a-guide...
piccalil.li/blog/a-guide...
A guide to creating accessible PDFs using free tools
If you really do (seriously, really do) need to create a PDF, Steve has your back to help you make sure you make that PDF accessible without having to fork out for Adobe Acrobat Pro.
piccalil.li
October 10, 2025 at 3:14 PM
Such a grossly under-covered topic — and one I need to get better at as well. Well done! 👏👏👏
Reposted by CSS-Tricks*
Little seasonal thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo
codepen.io/thebabydino/...
Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...
Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...
#CSS
codepen.io/thebabydino/...
Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...
Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...
#CSS
October 9, 2025 at 1:21 PM
Little seasonal thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo
codepen.io/thebabydino/...
Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...
Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...
#CSS
codepen.io/thebabydino/...
Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...
Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...
#CSS
White and black are two very safe colors to create contrast with another color value.
But when those are the only two values supported by color-contrast(), the contrast between a solid white/black and any other color may not be the best contrast ratio overall.
css-tricks.com/the-thing-ab...
But when those are the only two values supported by color-contrast(), the contrast between a solid white/black and any other color may not be the best contrast ratio overall.
css-tricks.com/the-thing-ab...
css-tricks.com
October 8, 2025 at 3:22 PM
White and black are two very safe colors to create contrast with another color value.
But when those are the only two values supported by color-contrast(), the contrast between a solid white/black and any other color may not be the best contrast ratio overall.
css-tricks.com/the-thing-ab...
But when those are the only two values supported by color-contrast(), the contrast between a solid white/black and any other color may not be the best contrast ratio overall.
css-tricks.com/the-thing-ab...
So. Danged. Good.
Pairs well with this ginormous guide on color functions by @sunkanmifafowora.bsky.social.
css-tricks.com/css-color-fu...
Pairs well with this ginormous guide on color functions by @sunkanmifafowora.bsky.social.
css-tricks.com/css-color-fu...
October 7, 2025 at 6:50 PM
So. Danged. Good.
Pairs well with this ginormous guide on color functions by @sunkanmifafowora.bsky.social.
css-tricks.com/css-color-fu...
Pairs well with this ginormous guide on color functions by @sunkanmifafowora.bsky.social.
css-tricks.com/css-color-fu...
All thanks to none other than @miriam.codes!
If you want to fully dive down the rabbit-hole with CSS Layers, @css-tricks.bsky.social has (as ever) the go-to explainer css-tricks.com/css-cascade-...
October 7, 2025 at 5:27 PM
All thanks to none other than @miriam.codes!
Interesting to think about what other types of ::picker we'll be able to style beyond
October 7, 2025 at 2:59 PM
Interesting to think about what other types of ::picker we'll be able to style beyond
Reposted by CSS-Tricks*
I gave a lightning talk at yesterday’s @smashingconf.com Jam session on CSS masonry. Here are my slides.
In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!
In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!
Patrick - Talks
Talks
patrickbrosset.com
October 7, 2025 at 9:37 AM
I gave a lightning talk at yesterday’s @smashingconf.com Jam session on CSS masonry. Here are my slides.
In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!
In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!
"Solid blocks of text around straight-edged images can feel static. But text that bends around a guitar or curves around a portrait creates movement, which can make a story more compelling and engaging."
"Getting Creative With shape-outside" by @allthatmalarkey.bsky.social
"Getting Creative With shape-outside" by @allthatmalarkey.bsky.social
October 6, 2025 at 3:47 PM
"Solid blocks of text around straight-edged images can feel static. But text that bends around a guitar or curves around a portrait creates movement, which can make a story more compelling and engaging."
"Getting Creative With shape-outside" by @allthatmalarkey.bsky.social
"Getting Creative With shape-outside" by @allthatmalarkey.bsky.social
Love seeing updated work on the CSS `cross-fade()` and how it's evolving out of the legacy syntax from WebKit's implementation.
In short: Generate a single image outta two (or more!)
css-tricks.com/almanac/func...
In short: Generate a single image outta two (or more!)
css-tricks.com/almanac/func...
cross-fade() | CSS-Tricks
The cross-fade() function lets you blend more than one image at a specified transparency value.
css-tricks.com
October 2, 2025 at 2:56 PM
Love seeing updated work on the CSS `cross-fade()` and how it's evolving out of the legacy syntax from WebKit's implementation.
In short: Generate a single image outta two (or more!)
css-tricks.com/almanac/func...
In short: Generate a single image outta two (or more!)
css-tricks.com/almanac/func...
“Code is my horseradish and I've been marinating in this horseradish ocean for quite a while.”
css-tricks.com/same-idea-di...
css-tricks.com/same-idea-di...
Same Idea, Different Paint Brush | CSS-Tricks
Naturally, everything looks like code when I'm staring at a blank canvas. That's whether the canvas is paper, a screen, some Figma artboard, or what have you.
css-tricks.com
October 1, 2025 at 1:06 PM
“Code is my horseradish and I've been marinating in this horseradish ocean for quite a while.”
css-tricks.com/same-idea-di...
css-tricks.com/same-idea-di...
Reposted by CSS-Tricks*
A new one for CSS-TRICKS!!!
Safari 26 introduces a lot of new stuff. To be precise, it adds: 75 new features, 3 deprecations, and 171 other improvements.
Here's all the CSS goodness you'll want to know about, courtesy of @monknow.bsky.social.
css-tricks.com/touring-new-...
Here's all the CSS goodness you'll want to know about, courtesy of @monknow.bsky.social.
css-tricks.com/touring-new-...
Touring New CSS Features in Safari 26 | CSS-Tricks
Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.
css-tricks.com
September 30, 2025 at 4:01 PM
A new one for CSS-TRICKS!!!