Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis

June 10th, 2020

That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, crisscrossed into a checked pattern, and played with in other ways using the idea of hard stops. But stripes can be boring, too….

Making My Netlify Build Run Sass

June 9th, 2020

Let’s say you wanted to build a site with Eleventy as the generator. A popular choice these days! Eleventy doesn’t have some particularly blessed way of preprocessing your CSS if that’s something you want to do. There are a variety of ways to do it and perhaps that freedom is part of the spirit of…

The Trickery it Takes to Create eBook-Like Text Columns

June 8th, 2020

There’s some interesting CSS trickery in Jason Pamental’s latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away… how do you set full-width columns that add columns horizontally, as-needed ? Well that’s a good trick right there, and…

How to Get All Custom Properties on a Page in JavaScript

June 8th, 2020

We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element: html {   –color-accent: #00eb9b; } In JavaScript, we can access…

Diverse Illustration

June 7th, 2020

Hey gang, #BlackLivesMatter. One tiny way I thought we could help here on this site, aside from our efforts as individuals, is to highlight some design resources that are both excellent and feature Black people. Representation matters. Here’s one. You know Pablo Stanley? Pablo is a wonderful illustrator who combines his illustration work with modern…

How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale

June 5th, 2020

The HBO sitcom Silicon Valley hilariously followed Pied Piper, a team of developers with startup dreams to create a compression algorithm so powerful that high-quality streaming and file storage concerns would become a thing of the past. In the show, Google is portrayed by the fictional company Hooli, which is after Pied Piper’s intellectual property….

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

June 4th, 2020

It’s useful when DevTools tells you that a declaration is invalid. For example, colr: red; isn’t valid because colr isn’t a valid property. Likewise color: rd; isn’t valid because rd isn’t a valid value. For the most part, a browser’s DevTools shows the declaration as crossed out with a warning () icon. It would be…

A Primer on Display Advertising for Web Designers

June 4th, 2020

A lot of websites (this one included) rely on advertising as an important revenue source. Those ad placements directly impact the interfaces we build and interact with every day. Building layouts with ads in them is a dance of handling them in fluid environments, and also balancing the need to showcase our content and highlight…

A New Way to Delay Keyframes Animations

June 2nd, 2020

If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way to do it in CSS. Sure, we can delay the start of a set of @keyframes with animation-delay, but there’s no way to add time between the first iteration…

Overlapping Header with CSS Grid

June 1st, 2020

Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place: Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the…