Menu

CSS

CSS Border Font

February 28th, 2021

Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness that works here. Plus, using…

A DRY Approach to Color Themes in CSS

February 24th, 2021

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a proper solution. What we want is to avoid redefining—and thus repeating—custom properties when switching between…

Clipping Scrollable Areas On The inline-start Side

February 19th, 2021

On a default left-to-right web page, “hanging” an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal scrollbar that scrolls as far as needed to make that whole element visible. But if you hang an element on the left side of the page, it’s just hidden (no scrollbar…

Things You Can Do With CSS Today

February 17th, 2021

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of it is cutting-edge enough that you might not be able to get it into projects…

Nested Media Queries

February 9th, 2021

Using media queries in CSS as part of responsive websites is bread and butter stuff to today’s front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. I spent a few months experimenting with a dozen different approaches to media queries in Sass and…

SVG within CSS

February 8th, 2021

Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that. But it can also point to a filter defined by SVG. So you could do filter: url(#my-custom-filter)…

Going From Solid to Knockout Text on Scroll

February 3rd, 2021

Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS! This effect is created by rendering two containers with fixed <h1> elements. The first…

Styling Web Components

January 29th, 2021

Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you’d probably be using it within your own app, it should be style-able so it can incorporated nicely anywhere. How to allow that styling isn’t exactly obvious: What wasn’t obvious to me, though, was how to allow users…

The Holy Grail Layout with CSS Grid

January 27th, 2021

A reader wrote in asking specifically how to build this layout in CSS Flexbox: My answer: That’s not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element (if not more grouping)….

You want minmax(10px, 1fr) not 1fr

January 22nd, 2021

There are a lot of grids on the web like this: .grid { display: grid; grid-template-columns: repeat(3, 1fr); } My message is that what they really should be is: .grid { display: grid; grid-template-columns: repeat(3, minmax(10px, 1fr)); }   Why? In the former, the minimum width of the grid column is min-content, which can be…