The five best design links, every weekday

Category: Css

All Categories

system.css - a design system for building retro Apple interfaces

A CSS library that allows you to implement a classic MacOS interface. Based on the monochrome stylings of Apple's System OS that ran from 1984-1991

Not All Zeros are Equal

And every ‘best practice’ comes with caveats.

The Infinite Marquee

A responsive looping marquee-style animation using HTML and CSS.

These “CSS crimes” turn social media posts into games

It is a truth universally acknowledged that if you build something on the internet, people will find ways to creatively break it.

Polypane 10: detachable panel, navigation sync, element screenshots and more

Polypane 10 brings a number of often requested workflow features to Polypane like a detachable panel and the ability to turn off navigation sync

:has(): the family selector

With :has() landing in Chromium 105, let’s take a look at some of the awesome opportunities it brings to our CSS!

CSS border animations

Looking at several ways to animate a border in CSS.

Fluid Sizing Instead Of Multiple Media Queries?

If you like math and CSS, you’ll love this one. Fluid Sizing Instead Of Multiple Media Queries? Yep, we can make it work, with a bit of math.

Recreating MDN’s Truncated Text Effect

It’s no secret that MDN rolled out a new design back in March. It’s gorgeous!

Help pick a syntax for CSS nesting

Two competing syntaxes need your help in determining which should be championed through to a specification candidate.

Font Subsetting Strategies: Content-Based vs Alphabetical

Font subsetting allows you to split a font’s characters into separate files so your visitors only download what they need.

With :focus-visible, you can have focus styles when it makes sense

On why :focus-visible is more than a way to target keyboard users only.

Solving “The Dangler” Conundrum with Container Queries and :has()

It’s a major minor problem that’s tough to explain to the client, but it all comes down to… The dangler.

Using Display-P3 colour

I wanted really bright colours on my site, but in order to do that I needed to delve into a rabbit hole of using Display-P3 colour in CSS.

The case for using Sass in 2022

Is Sass still relevant? It seems like we need to have this conversation every few months.

Style Queries

Exploring when and how you would use style queries in your day-to-day work.

Logical Properties for Useful Shorthands

Something I like about logical properties is the ability to set margins or padding on just a single axis on an element, while leaving the other alone.

What are color gamuts

So, CSS Color 4 adds Wide Color Gamut colors to CSS. But what is a gamut, anyway?

The CSS behind Figma

A look at some interesting use-cases for CSS flexbox and grid in Figma app.

Avoiding img layout shifts: aspect-ratio vs width & height attributes

Two ways to do the same thing, but which is best?