The five best design links, every weekday

Category: Css

All Categories

kizu.dev

Self-Modifying Variables: the inherit() Workaround

Style queries will unlock many doors.

cruncher.ch

Printing music with CSS grid

Music notation should be as accessible and as fluid as text is on the web. CSS Grid helps us get there.

kizu.dev

Alternating Style Queries

With container style queries on the horizon, it is a good time to do more experiments with them.

ryanmulligan.dev

Detect JavaScript Support in CSS

I had been aware of the scripting CSS media feature but I was still under the impression that cross-browser support was lacking.

piccalil.li

A primer on the cascade and specificity

Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS.

frontendmasters.com

Things That Can Break aspect-ratio in CSS

CSS has an aspect-ratio property, which has had full support since around 2021.

webkit.org

Help us invent CSS Grid Level 3, aka “Masonry” layout

If you’ve been making websites for years, you know how frustrating it was to lay out a web page with CSS floats.

javier.xyz

Motion extraction with mostly CSS

A simple way to extract motion from a video using CSS.

heydonworks.com

Testing HTML With Modern CSS

CSS can be a great HTML testing tool, especially in 2024

piccalil.li

How we’re approaching theming with modern CSS

We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out.

anchor-tool.com

Anchor Position Tool

A Chrome Canary demo of the new CSS anchor positioning features.

smashingmagazine.com

Sliding 3D Image Frames In CSS

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup.

dev.37signals.com

Modern CSS patterns in Campfire

An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors.

joshwcomeau.com

Folding the DOM

In this post, we’ll explore a technique we can use to “fold” a DOM node, like folding a letter in real-life.

frontendmasters.com

Gap is the new Margin

In 2020, Max Stoiber wrote the spicy "Margin considered harmful".

joshwcomeau.com

CSS in React Server Components

When the core React team unveiled their vision for the future of React, some of my favourite libraries got scrambled.

piccalil.li

How we’re approaching theming with modern CSS

We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out.

scottjehl.com

How would you build Wordle with just HTML & CSS?

A fun little form validation and CSS selector experiment.

frontendmasters.com

Drawing a Line to Connect Elements with CSS Anchor Positioning

The World Wide Web Consortium (W3C) published a First Public Working Draft of CSS Anchor Positioning last year, so I thought I would give it a try.

dev.to

Curious Geckos: The Most Precise CSS-only Position-Aware Mini-Game

A CSS-only, no JS, no checkbox, position-aware (hover/touch aware) interactive gecko-luring game.