The five best design links, every weekday

Category: Css

All Categories

sakofchit.github.io

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

oddbird.net

Not All Zeros are Equal

And every ‘best practice’ comes with caveats.

ryanmulligan.dev

The Infinite Marquee

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

theverge.com

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.app

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

developer.chrome.com

: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!

web.dev

CSS border animations

Looking at several ways to animate a border in CSS.

smashingmagazine.com

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.

css-tricks.com

Recreating MDN’s Truncated Text Effect

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

developer.chrome.com

Help pick a syntax for CSS nesting

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

cloudfour.com

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.

hidde.blog

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.

daverupert.com

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.

darn.es

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.

blog.mayank.co

The case for using Sass in 2022

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

una.im

Style Queries

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

css-irl.info

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.

svgees.us

What are color gamuts

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

ishadeed.com

The CSS behind Figma

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

jakearchibald.com

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

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