Menu

CSS

Displaying the Current Step with CSS Counters

July 7th, 2020

Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that. This kind of counting and displaying could be hard-coded, but that’s no fun. JavaScript could do this job as well. But CSS? Hmmmm. Can it? CSS…

Fluid Images in a Variable Proportion Layout

July 3rd, 2020

Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let’s say this image is not semantic content, but only decoration. That’s a good use for background-image. And because in this context…

When a Line Doesn’t Break

July 2nd, 2020

We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn’t have enough room for the next word in a line, it breaks it and moves down to the next line…

A Complete Guide to Dark Mode on the Web

July 1st, 2020

Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same. DuckDuckGo’s light and dark themes Let’s get into dark mode in the context of websites. We’ll delve into different options and approaches to implementing…

When Sass and New CSS Features Collide

June 29th, 2020

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered, how I…

In Defense of a Fussy Website

June 26th, 2020

The other day I was doom-scrolling twitter, and I saw a delightful article titled “The Case for Fussy Breakfasts.” I love food and especially breakfast, and since the pandemic hit I’ve been using my breaks in between meetings (or sometimes on meetings, shh) to make full bacon, poached egg, vegetable plate, so I really got…

Hide Scrollbars During an Animation

June 24th, 2020

CSS still can’t animate to auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won’t animate. */ height: auto; } There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back. My mind always goes to this solution just because…

An Overview of Scroll Technologies

June 22nd, 2020

Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. There are a number of scroll related technologies out there, so this article’s aim is to provide an overview of them…

Using Custom Property “Stacks” to Tame the Cascade

June 22nd, 2020

Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuances — and inheritance requires an…

Where Do You Learn HTML & CSS in 2020?

June 19th, 2020

The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have,…