Flynn from Doom as a CSS sprite

<div class=”flynn flynn0“></div>

I love this Flynn character from Doom. Thanks to the GKrellFlynn plugin, he is on my CPU monitor and gets more and more bloody as the computer CPU usage increases. I thought this would be a fun concept to take to other projects and to the web so I extracted this single XPM image file in the GKrellFlynn source code,
converted it to a transparent png, and wrote some CSS to make him into a CSS sprite.

Feel free to take the code for your own purposes. Use him like this:

Grab the transparent png.

Take this CSS. Point that background-image wherever you put your flynn.png:

.flynn {

.flynn1 {background-position:0px 0px}
.flynn2 {background-position:0px -64px}
.flynn3 {background-position:0px -128px;}
.flynn4 {background-position:0px -192px;}
.flynn5 {background-position:0px -256px;}
.flynn6 {background-position:0px -320px;}
.flynn7 {background-position:0px -384px;}
.flynn8 {background-position:0px -448px;}
.flynn9 {background-position:0px -512px;}
.flynn10 {background-position:0px -576px;} /* this one is an exception to the 64 rule */
.flynn11 {background-position:0px -640px}
.flynn12 {background-position:0px -704px}
.flynn13 {background-position:0px -768px;}
.flynn14 {background-position:0px -832px;}
.flynn15 {background-position:0px -896px;}
.flynn16 {background-position:0px -960px;}
.flynn17 {background-position:0px -1024px;}
.flynn18 {background-position:0px -1088px;}
.flynn19 {background-position:0px -1152px;}
.flynn20 {background-position:0px -1216px;}
.flynn20 {background-position:0px -1280px;}
.flynn21 {background-position:0px -1344px;}
.flynn22 {background-position:0px -1408px;}
.flynn23 {background-position:0px -1472px;}
.flynn24 {background-position:0px -1536px;}
.flynn25 {background-position:0px -1600px;}
.flynn26 {background-position:0px -1664px;}

Add this to your page along with the CSS:

<div class="flynn flynn1"></div>

26 frames of animation, so you can change that flynn1 up to flynn26

This is now part of the project.

Have fun and please let me know if you use this somewhere!

Chris Carey

Leave a Reply

Your email address will not be published. Required fields are marked *