Skip to main content
CSS is fun and cool and I like it.

GIFS and prefers-reduced-motion

The <picture> element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you’d do:

<picture<source srcset="img/waterfall.avif" type="image/avif"<source srcset="img/waterfall.webp" type="image/webp"<img src="img/waterfall.jpg" alt="A bottom-up shot of a huge waterfall in Iceland with green moss on either side."</picture

But notice those <source> elements there… they can take a media attribute as well! In other words, they can be used … Read article “GIFS and prefers-reduced-motion”


Pausing a GIF with details/summary

Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.… Read article “Pausing a GIF with details/summary”


Masking GIFs with other GIFs

The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:

See the Pen
Masking gifs with other gifs… (svg masking is cool)
by Cassie Evans (@cassie-codes)
on CodePen.

Considering I’ve never done anything with SVG masks before, I … Read article “Masking GIFs with other GIFs”


Reduced Motion Picture Technique, Take Two

Did you see that neat technique for using the <picture></picture> element with <source media=""/> to serve an animated image (or not) based on a prefers-reduced-motion media query?

After we shared that in our newsletter, we got an interesting reply from Michael Gale:

What about folks who love their animated GIFs, but just didn’t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI?

I thought … Read article “Reduced Motion Picture Technique, Take Two”


Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img /> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell.… Read article “Fallbacks for Videos-as-Images”


Full Page Background Video Styles

I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting effect that you don’t see every day. The biggest reason you don’t, probably, is that you can’t set a movie file as the background-image in CSS. You’ll have to do some layout trickery to get it done.

Certainly, a full-page background video can be just a bit much. I’d argue it … Read article “Full Page Background Video Styles”


Optimizing GIFs for the Web


New `video` Policies for iOS