The five best design links, every weekday

Category: Css

All Categories

albertwalicki.com

How to Fall In Love With Single Div Illustrations

A short tutorial on how to create images.

joshwcomeau.com

Let's Bring Spacer GIFs Back!

The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs.

css-tricks.com

Whack-a-Mole: The CSS Edition

We’ve seen the checkbox hack and how it can be used to build a complete state machine in CSS.

9elements.com

The Devil’s Albatross - An algorithmic layout technique

Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout.

ishadeed.com

The Art of Building Real-life Components

A walkthrough on building a component with HTML & CSS in details.

2020.stateofcss.com

The State of CSS 2020 Trend Report

If you didn't have time to read the full State of CSS report, here are the three main CSS trends from the past year.

nolanlawson.com

Options for styling web components

When I released emoji-picker-element last year, it was my first time writing a general-purpose web component.

kilianvalkhof.com

You want overflow: auto, not overflow: scroll

Mac hides scroll bars so developers using overflow: scroll instead of auto don't know their design has ugly scrollbars. This bookmarklet fixes that.

houdini.how

Houdini.how

Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today.

github.blog

How we built the GitHub globe

With our new homepage, we wanted to show how open source development transcends the borders we’re living in.

css-tricks.com

Simulating Drop Shadows with the CSS Paint API

Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers.

jayfreestone.com

Bulletproof flag components

A resilient take on a flag-like media object.

bram.us

The future of CSS: Higher Level Custom Properties

Higher Level Custom Properties are Custom Properties that control multiple other CSS Properties.

letsbuildui.dev

Reducing Motion in Animations

Learn a few ways to implement alternate animations in CSS and Javascript.

animxyz.com

AnimXYZ

The first composable CSS animation toolkit

web.dev

Centering in CSS

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.

css-tricks.com

2020 Roundup of Web Research

Lots of things are published this time of year, like developer advent calendars and organizations reflecting on the past year.

codersblock.com

What Can You Put in a CSS Variable?

A tour of the various things that CSS variables can hold, including animated values.

melanie-richards.com

Sticky CSS Grid Items

How to get position sticky working on a grid item without setting a hacky height.

ishadeed.com

Handling Short And Long Content In CSS

An in-depth article on how to handle short and long content in CSS.