Menu

CSS

Long Hover

March 16th, 2021

I had a very embarrassing CSS moment the other day. I was working on the front-end code of a design that had a narrow sidebar of icons. There isn’t enough room there to show text of what the icons are, so the idea is that we’ll use accessible (but visually hidden, by default) text that…

How to Map Mouse Position in CSS

March 1st, 2021

Let’s look at how to get the user’s mouse position and map it into CSS custom properties: –positionX and –positionY. We could do this in JavaScript. If we did, we could do things like make make an element draggable or move a background. But actually, we can still do similar things, but not use any…

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…