A little while back, I was in the process of adding focus styles to An Event Apart’s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and footer and orange rings in the main text. But in one place, I wanted rings that were more obvious—something like stacking two borders on top of each other, in order to create unusual shapes that would catch the eye.… Read article
Let's say you need a gradient border around an element. My mind goes like this:
- There is no simple obvious CSS API for this.
- I'll just make a wrapper element with a
linear-gradientbackground, then an inner element will block out most of that background, except a thin line of padding around it.
Perhaps like this… Read article
I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you'll favor one over another for clarity of syntax, efficiency, or otherwise. … Read article
An institution’s motto, an artist’s intro, a company’s tagline, a community’s principle, a service’s greeting… all of them have one thing in common: they’re one brief paragraph displayed on a website’s home page — or at least the about page!
It’s rare that just one word or one line of text welcomes you to a website. So, let’s look at some interesting ways we could style the lines of a paragraph.… Read article
border for a hover state. Simple, right? You might be unpleasantly surprised.
The challenge is simple: building a button with an expanding border on hover.
- Single element (no helper divs, but psuedo-elements are allowed)
- Works for any size (not
You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.… Read article