FlynnCSS

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 {
	background-image:url('/images/flynn.png');
	height:64px;
	width:48px;
}

.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 https://github.com/chriscareycode/nagiostv-livestatus project.

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