Skip to main content
CSS is fun and cool and I like it.
Article

How to Animate on the Web With GreenSock

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.… Read article “How to Animate on the Web With GreenSock”

Link

A CSS Tribute to SVG

Article

Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg"/>). And you can embed CSS within an SVG with a <style></style> element. That CSS can use a perfers-color-scheme media query, and as a result, a favicon that supports dark mode!… Read article “Dark Mode Favicons”

Article

The Amazingly Useful Tools from Yoksel

I find myself web searching for some tool by Yoksel at least every month. I figured I’d list out some of my favorites here in case you aren’t aware of them.… Read article “The Amazingly Useful Tools from Yoksel”

Article

When to Use SVG vs. When to Use Canvas

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.

  • A little flat-color icon? That’s clearly SVG territory.
  • An interactive console-like game? That’s clearly canvas territory.

I know we didn’t cover why yet, but I hope that will become clear as we dig into it.… Read article “When to Use SVG vs. When to Use Canvas”

Article

A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

I was long a fan of that approach for icon systems (<use></use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.

What if you have a sprite, and you wanna see what’s in it?… Read article “A Snippet to See all SVGs in a Sprite”

Article

The Many Ways to Link Up Shapes and Images with HTML and CSS

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Or you have an interactive image that responds differently when different regions of it are clicked.

You can surround … Read article “The Many Ways to Link Up Shapes and Images with HTML and CSS”

Article

Moving Text on a Curved Path

There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But… the pictures aren’t actually selfies because they are taken by someone else. The article has this hilarious line of text that wiggles by on a curved line as you scroll down the page.

Let’s look at how they did it.… Read article “Moving Text on a Curved Path”

Video

#172: Hand SVGing a Curved Line

I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG code. Hey, I’ve even got a book about all that.

But once in a while, it’s appropriate, and maybe even a little bit fun. In this case, I wanted to draw a pretty specific line with a couple of … Read article “#172: Hand SVGing a Curved Line”

Article

Weekly Platform News: Preventing Image Loads with the Picture Element, the Web We Want, Svg Styles Are Not Scoped

In this week’s week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG.

Let’s turn to the headlines…… Read article “Weekly Platform News: Preventing Image Loads with the Picture Element, the Web We Want, Svg Styles Are Not Scoped”