CSS is evolving faster than ever. Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors to help identify the latests trends… and try to bridge the ever-growing “great front-end divide”!

The RICG had a few goals, some shouted from the rooftops and some not. For example, the goal of finding efficient, preparser-friendly methods of tailoring image requests to browsing contexts was no secret. Paving a path for more designers and developers to become involved in the standards process—we were pretty loud about that one, too. More subtle, however, was a goal many RICG members shared, me included: a day when we would hardly think about responsive images.

In the previous article in this series I introduced you to the <feComponentTransfer>, and we used it to limit the number of colors in an image to create a poster effect. In this article, we will take a look at how it can be used to create a Photoshop-like duotone effect. We’ll also learn how to use it to control the intensity and contrast of an image’s colors.

I came across this neat little animation in a designer newsletter. In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code. The approach I took was to use SVG text as a clip path for an SVG background.

Come on, it’s 2019. Isn’t there a decent way to build a carousel with native browser APIs? As it turns out, there is. My carousel implementation uses a few simple building blocks: 1) CSS scroll snap. 2) scrollTo() with smooth behavior. 3) The <pinch-zoom> custom element.