I can't stop seeing #CSS View Transitions!

here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲

try it codepen.io/argyleink/pen/…

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already.

Pure CSS halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

🚀 LAUNCH DAY 🚀

Introducing “Unleash the Power of Scroll-Driven Animations” – a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript.

developer.chrome.com/blog/scroll-dr…

📝 Misconceptions about CSS Specificity

To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …

bram.us/2024/05/05/mis…

#CSS #Specificity

For May the Fourth, here there are two versions of the same cartoon #MayTheFourthBeWithYou
comicss.art

I was wondering how Vercel animated tab transitions worked in their dashboard, so I tried to create one with an extra bounce. 🫨

Does anyone want to see the code?

I used Next.js Tailwind CSS and Open Props for the animation.

neat #CSS trick‽
transition `border-image-outset`

I'd normally reach for `box-shadow` for expandos like this, but then you can't use gradients or control direction much

with this, I can expand to any size or side and use gradients, yeeee 🤓

src
⤷ codepen.io/argyleink/pen/…

make keyboard interaction a little more engaging

``` #css
@media (prefers-reduced-motion: no-preference) {
:focus {
transition: outline-offset .25s ease;
}
:focus:not(:active) {
outline-offset: 5px;
}
}
```

try it codepen.io/argyleink/pen/…

Ooh, Airbnb Engineering released a very nice page that’s using Scroll-Driven Animations.

Here’s me doing an impromptu check of it using a Chrome DevTools extension I built to help you debug these.

youtube.com/watch?v=7DtzR-…

Kevin and I rapid fire demo some really rad and stable CSS features we don't see used enough 🔥

how many did you know‽

I've just put out a new video! Under-used CSS features 2: :focus-visible youtube.com/watch?v=o0F0Xf…

I think some folks are confusing or conflating masonry with both bento AND packery, which I believe are 3 separate layout strategies

Dave DeSandro demonstrates packery awesome here with their great layoutMode in the classicly rad IsotopeJS lib

codepen.io/desandro/pen/z…

maybe what…

sRGB vs P3 - VisBug logo

codepen.io/argyleink/pen/…

for me, it's:

1. a masonry layout isn't a grid. there's no shared row lines, only columns. so it has to ignore all sorts of syntax to accommodate this, syntax we'll have to memorize isnt applicable

2. if masonry is it's own thing, it can pace and grow at it's own rate. subgrid…

There's been a lot of discussion about masonry in CSS recently and whether it lives in the grid spec. This post explains a different approach, that still enables the track sizing and other features from grid. developer.chrome.com/blog/masonry

View Transition on rotate 🤓

how?
a throttled resize listener waits for 100ms of no resizing before firing `flipGallery()`

window.onresize = () => {
clearTimeout(window.resizeEndTimer)
window.resizeEndTimer = setTimeout(flipGallery, 100)
}

try it!
codepen.io/argyleink/pen/…