The five best design links, every weekday

Domain: css-irl.info

css-irl.info

CSS Halftone Patterns

A little while ago, Ana Tudor created an impressive collection of halftone patterns using only CSS.

css-irl.info

Web Sustainability and the Ethical Dilemma

It was interesting to hear about the challenges of measuring the carbon emissions of a website.

css-irl.info

A Handy Use For Cascade Layers

I was just preparing a demo and it suddenly occurred to me that cascade layers would be a perfect solution to a problem I was having.

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.

css-irl.info

Masonry? In CSS?!

Pinterest’s grid design is a commonly-cited example whenever the masonry conversation comes up.

css-irl.info

Exciting Times for Browsers (and CSS)

This month saw Safari drop a new release that includes support for a tonne of new stuff.

css-irl.info

Aspect Ratio is Great

A little thing about why aspect-ratio sparks joy.

css-irl.info

Is it Time to Ditch the Design Grid?

I came across this website, Gridless Design recently, and it immediately struck a chord.

css-irl.info

Detecting Hover-Capable Devices

We developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users.

css-irl.info

Paper Snowflakes: Combining Clipping and Masking in CSS

Just after Christmas I made a fun little Codepen demo recreating realistic-looking paper snowflakes in CSS, inspired by our homemade decorations!

css-irl.info

A Utility Class for Covering Elements

Here’s something I find myself needing to do again and again in CSS: completely covering one element with another.

css-irl.info

Drop-Shadow: The Underrated CSS Filter

If you’re familiar with CSS, you probably know all about the box-shadow property.

css-irl.info

Irregular-shaped Links with Subgrid

Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover effect to be applied to an entire card.

css-irl.info

Exciting Things on the Horizon For CSS Layout

This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout.

css-irl.info

Different Approaches to Responsive CSS Motion Path

When it comes to using CSS Motion Path, it always bugs me that the path itself is doesn't scale.

css-irl.info

Positioning Text Along a Path with CSS

I've been playing around with CSS Motion Path a lot over the past couple of months, and having a lot of fun creating demos.

css-irl.info

Optimising SVGs for the Web

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with.

css-irl.info

7 Uses for CSS Custom Properties

Custom properties (also known as CSS variables) allow us to store property values for re-use in our stylesheets.

css-irl.info

Building a Scrapbook Layout with CSS Grid

My son was recently tasked with the responsibility of looking after his pre-school class teddy bear for the week.

css-irl.info

Variable Font Animation with CSS and Splitting JS

In this article I’ll explain what variable fonts are, and how I created a breathing effect with CSS and a little bit of Javascript.