In-N-Out Animations: View Transitions (Part 3/3)
View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.
View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.
If you’re on Bluesky (like this site is!), you’re using atproto. Standard.site is, as best I understand it, a userland agreed-upon schema for what certain stuff looks like on the protocol, like a “publication” and a “document”. Mat is cautiously optimistic in trying to understand it: The most obvious use case is allowing users on […]
Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.
Aaron T. Grogg has a nice page chock full of examples of UI, which used to be the sort of thing that we’d use JavaScript for, but can now be done in HTML & CSS. No hate: I have nothing against JS, but it has better things to do The examples are very modern, like […]
If you’ve ever built your own client-side navigation that properly respects updating URLs, you’ve probably used history.pushState() a bunch, and it’s a bunch of work getting it robust and right. I think Jay Rungta does a good job of showcasing the newly-baseline Navigation API and why it’s better. Sorry for the huge blockquote, but it’s […]
Personally, I wouldn’t blame you if you were asked what CSS needs these days and you were like uhm, I think it’s good, actually. These days CSS probably has more in it than you even know about or have tried, making it feel not particularly lacking. But if you really dig into the specifics, you’ll […]
You can style the “on the way in” and “on the way out” styles for elements, even when they are moving to/from display: none;. Yay.
A short, clear, engaging website that explains how diamonds are made by Jaydip Sanghani. Several facts in there I just didn’t know at all until now, like how many diamonds have a tiny serial number carved onto them. I think it’s nice to showcase websites that do things that websites really do best. I’d maybe […]
The new No-Vary-Search header can be used to tell browsers that a query string like ?product_id=7 means the content on that URL is unique based on the query parameter, so cache pages like that individually. But also that a query string like ?utm_source=frontendmasters does not have unique content, so don’t cache it individually. (As explained […]
Una Kravets: Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. […] This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border. Welp, clip-path() had a good run. I’ll always be fond […]
Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.