So, corner-shape can be animated. Notice the added sprinkle of color-contrast().
https://css-tricks.com/experimenting-with-scroll-driven-corner-shape-animations/
Remote
CSS-Tricks
@csstricks@mastodon.social
mastodon 4.8.0-nightly.2026-10-06The official account for CSS-Tricks.com, a web design community powered by
DigitalOcean.
1785 Followers
64 Following
32 Posts
Joined December 14, 2022
Everything:
* { box-sizing: border-box; }
Website:
Twitter:
Some choice excerpts from
@Wilto@front-end.social's "Google Prompt API" response
https://css-tricks.com/googles-prompt-api/
> You now have an LLM running on your machine, and any website you visit can make use of it [...] Google has said not to worry about it.
😳
If you've been on the fence about
@piccalilli@front-end.social's JavaScript for Everyone course, first off: be like Nike and just do it.
We've published an excerpt from it about destructuring by none other than
@wil.to to give you just a taste.
https://css-tricks.com/javascript-for-everyone-destructuring/
Here's a math-y way to approximate the contrast-color() function from @khamer@me.dm while we're waiting on full support.
https://css-tricks.com/approximating-contrast-color-with-other-css-features/
A crap-ton of shape() inspiration from none other than @css@front-end.social to help burn your Thursday.
https://css-tricks.com/complex-css-shapes-with-shape-function/
A really good look at the Popover and Dialog APIs... and what makes them different.
https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/
Select multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting. Perfect example of CSS and JS working together in harmony.
The progress() function is sorta like clamp() but returns 1 or 0. Combine it with calc() and you can get weird with it.
TIL: We can center an absolutely positioned element with justify-self:
.element {
position: absolute;
place-self: center;
inset: 0;
}
Juan Diego explains it nicely here:
https://css-tricks.com/yet-another-way-to-center-an-absolute-element/
Interop 2026 is officially a thing and there's plenty of new (and even old) CSS features that we can look forward to being cross-browser compatible and consistent!
Is it impossible for @css@font-end.social to NOT take something to the next level, even his own work.
https://css-tricks.com/making-a-responsive-pyramidal-grid-with-modern-css/
Introducing the CSS Olfactive API
Something's s little... smelly about it. 👃
SVG or raster? The short answer to that question is: there’s almost no difference at all if you are working on something very small and specific.
But it's more nuanced than that, and Mariana Beldi has all the nerdy details.
https://css-tricks.com/loading-smarter-svg-vs-raster-loaders-in-modern-web-design/
Managing two states in #CSS (a la the Checkbox Hack) is great and all, but using radio buttons for multiple states opens up a bunch more options.
Oodles of examples from @amit_sheen@mastodon.cloud
Poking at a new proposal that would allow an element to match an element when the pointer gets :near() it by a certain amount.
https://css-tricks.com/potentially-coming-to-a-browser-near-you/
Aren't z-index values one of those things we all sorta struggle with? How we choose them, how we manage them, how we balance the stacking contexts, etc.
@amit_sheen@mastodon.cloud
has a great way to approach it... all around tokens for intentional intentional layers.
Split the text, rotate and scale it, and translate the individual characters on scroll.
Phew, definitely not for the faint of heart but it's a super cool effect!
https://css-tricks.com/spiral-scrollytelling-in-css-with-sibling-index/
Front-End Fools: Top 10 April Fools’ UI Pranks of All Time
A little trip down memory lane. :)
Short n’ sweet but ever so neat, this issue of What’s !important covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.
Contact forms and CRM integration is fairly easy, right? Capture data and send. It's not always as simple as that, though, especially when there are business requirements that rely on that data.
https://css-tricks.com/form-automation-tips-for-happier-user-and-clients/
No spicy takes here, just genuine interest and notes on whatever the heck "Generative UI" is supposed to be.
A few wild examples of the customizable select have been floating around. Here are a few more from @patrickbrosset@mas.to that push the envelope.
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
This issue of What’s !important is dedicated to our friends in the UK, who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read about CSS from the last couple of weeks. Plus, the latest features from Chrome 145, and anything else you might’ve missed.
TL;DR: lots of content, but also lots of rain:
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, the customizable select element, :open, scroll-triggered animations, the toolbar element, and somehow, more.
Lee Meyer's sane, thoroughly reported, and well-grokked explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."
Distinguishing “Components” and “Utilities” in Tailwind by Zell Liew
https://css-tricks.com/distinguishing-components-and-utilities-in-tailwind/
Pretty sure most of us avoid !important anyway, but it's always a good reminder to revisit the alternatives... and when it might actually be good to reach for it.
https://css-tricks.com/alternatives-to-the-important-keyword/
A couple new column-wrapping features shipped in Chrome 145, like `column-wrap` and `column-height`.
Truly big upgrades for multi-column layouts — here's how you *might* use them... as well as when you might *not* use them.
https://css-tricks.com/css-multi-column-layout-wrapping-features/
Replying to
@db I love that you're writing about this stuff. Seems like WordPress chatter has gone quiet in recent years and that's pretty sad, even the reasons are understandable.
Replying to
@thany@mastodon.social @Wilto@front-end.social Right?! This one really feels like it's pole vaulting over the spirit of open web standards for corporate gains.