Explore some of the amazing things that developers can do with CSS today. Exciting topics like transitions, variable fonts, scroll and snap, SVGs, building native-like PWAs, CSS theming, optimisation and more.

Modern CSS

Preface

In this article, we’ll learn how CSS transforms can be used in the real world to solve various tasks and achieve interesting results. Specifically, you’ll learn how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.

Using CSS Transforms in the Real World

In this article, we'll take a look at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.

Variable Fonts: What They Are, and How to Use Them

The following is a short extract from Tiffany's new book, CSS Master, 2nd Edition . 

Scroll Snap in CSS: Controlling Scroll Action

SVG is a lightweight vector image format that’s used to display a variety of graphics on the Web and other environments with support for interactivity and animation. In this article, we’ll explore the various ways to use CSS with SVG, and ways to include SVGs in a web page and manipulate them.

Real World Use of CSS with SVG

In recent years we’ve seen a number of major shifts in the online experience, mostly coming from the proliferation of mobile devices. The evolution of the Web has taken us from single versions of a website, to desktop versus mobile versions, to responsive sites that adapt according to screen size, then to native mobile apps, which either recreate the desktop experience as a native app, or act as a gateway to the responsive version.

CSS and PWAs: Some Tips for Building Progressive Web Apps

In this article, we look at 20 ways to optimize your CSS so that it’s faster-loading, easier to work with and more efficient.

20 Tips for Optimizing CSS Performance

Throughout this tutorial on CSS theming, we’ll be using CSS custom properties (also known as CSS variables) to implement dynamic themes for a simple HTML page. We’ll create dark and light example themes, then write JavaScript to switch between the two when the user clicks a button.

Unlock This Title

Community Questions