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

Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS

I’ll be linking to individual Pens as I discuss the lessons I learned, but if you’d like to get a sense of the entire project, check out 60 days of Animation on Undead Institute. I started this project to end on August 1st, 2020, coinciding with the publication of a book I wrote featuring CSS animation, humor, and zombies — because, obviously, zombies will destroy the world if you don’t brandish your web skills and stop the apocalypse. Nothing puts the hurt on the horde like a HTML element on the move!
Link

Freak Flags

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

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion:

If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts.

I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion … Read article “Musings on HTTP/2 and Bundling”

Snippet

Basic Link Rollover as CSS Sprite

a {
  background: url(sprite.png) no-repeat;
  display: block;
  height: 30px;
  width: 250px;
}

a:hover {
  background-position: 0 -30px;
}

The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.

See the Pen KBjZwg by Geoff Graham (@geoffgraham) on CodePen.… Read article “Basic Link Rollover as CSS Sprite”