This article covers CSS-related techniques for optimizing Web Vitals.

CSS tips and tricks you will not see in most of tutorials.

In this article, I aim to provide you with a clear explanation of how clip-path works in detail when to use it, and how you can use it today in your web development projects.

In this article, Miriam takes a deeper dive into the ‘CSS Custom Properties for Cascading Variables’ specification to ask, “Why are they called custom properties, how do they work in the cascade, and what else can we do with them?” Pushing past the “variable” metaphor, custom properties can provide new ways to balance context and isolation in CSS patterns and components.

Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it.

I find working with the grid helpful. The grid helps to maintain consistency across the different layouts and make faster design decisions. Grids give more precise control over alignments and layout on different screen sizes.

I sometimes have a third reason to use CSS grid: prevent layout shifts. I tried to find a fancy acronym for this technique but all I got was ALSGST: "Anti Layout Shift Grid Stacking Technique".

If you’re familiar with CSS, you probably know all about the box-shadow property. But did you know there is a CSS filter, drop-shadow, that does something similar? Like box-shadow, we can pass in values for x-offset, y-offset, blur radius and colour.

<blockquote>Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.</blockquote>

<blockquote>I think about and enjoy very boring CSS stuff—probably much more than I should do...</blockquote>

<blockquote>Browse a carefully crafted collection of loaders, hover effects, transitions, and other CSS effects to use in your next project. Effects are designed with an emphasis on fluidity, simplicity, and ease of use.</blockquote>