No spicy takes here, just genuine interest and notes on whatever the heck "Generative UI" is supposed to be.
DigitalOcean.
| Website | https://css-tricks.com |
| https://twitter.com/css | |
| Everything | * { box-sizing: border-box; } |
CSS-Tricks
@csstricks
- 1.7K Followers
- 60 Following
- 409 Posts
The official account for CSS-Tricks.com, a web design community powered by
DigitalOcean.
DigitalOcean.
So, corner-shape can be animated. Notice the added sprinkle of color-contrast().
https://css-tricks.com/experimenting-with-scroll-driven-corner-shape-animations/
If you've been on the fence about
@piccalilli'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/
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.
What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More | CSS-Tricks
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, customizable , :open, scroll-triggered animations, , and somehow, more.
Patrick BrossetCurious about custom <select>?
I wrote about some of my recent demos over at @csstricks!
Take a look ✨ https://css-tricks.com/abusing-customizable-selects/
A few wild examples of the customizable select have been floating around. Here are a few more from @patrickbrosset that push the envelope.
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
has a great way to approach it... all around tokens for intentional intentional layers.
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/
Popover API or Dialog API: Which to Choose? | CSS-Tricks
Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t! After a bit lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility and we'll go over that in this article.
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!
What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More | CSS-Tricks
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!
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/
