Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.

This morphing number CodePen from Fabio Ottaviani is a clever use of two great techniques. Both techniques make use of SVG’s powerful feature set. SVG paths feature helper functions we can tap into, and SVG filters can modify our graphics in seemingly limitless ways. We’ll first learn how Fabio is handling the animation, then we’ll look into the three filters he combined for the awesome gooey effect.

In this article, I explain how we went about optimizing full-screen images for the Rijksmuseum website, retaining the source image’s properties, and realizing savings in data transferred to the user while still delivering the biggest images for an impactful experience.

CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it’s sometimes hard to understand. Some folks even deny it’s a programming language altogether. Let’s prove them wrong by programming a smart, flexible style system.