{"id":1241,"date":"2014-01-12T10:39:10","date_gmt":"2014-01-12T17:39:10","guid":{"rendered":"http:\/\/chriscarey.com\/?page_id=1241"},"modified":"2014-02-19T00:16:53","modified_gmt":"2014-02-19T08:16:53","slug":"flynncss","status":"publish","type":"page","link":"https:\/\/chriscarey.com\/blog\/code\/flynncss\/","title":{"rendered":"FlynnCSS"},"content":{"rendered":"<h2>Flynn from Doom as a CSS sprite<\/h2>\n<div class=\"blackbox\">\n<div class=\"flynn flynn1\" id=\"flynn\"><\/div>\n<p>&lt;div class=&#8221;flynn flynn<span id=\"flynntext\">0<\/span>&#8220;&gt;&lt;\/div&gt;\n<\/div>\n<div class=\"gimmeroom\">I love this Flynn character from Doom. Thanks to the <a href=\"http:\/\/bax.comlab.uni-rostock.de\/en\/projects\/flynn.html\">GKrellFlynn plugin<\/a>, 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,<br \/>\nconverted it to a <a href=\"..\/images\/flynn.png\">transparent png<\/a>, and wrote some CSS to make him into a CSS sprite.<\/p>\n<p>Feel free to take the code for your own purposes. Use him like this:<\/p>\n<p>Grab the <a href=\"\/images\/flynn.png\">transparent png<\/a>.<\/p>\n<p>Take this CSS. Point that background-image wherever you put your flynn.png:<\/p>\n<pre>\r\n.flynn {\r\n\tbackground-image:url('\/images\/flynn.png');\r\n\theight:64px;\r\n\twidth:48px;\r\n}\r\n\r\n.flynn1 {background-position:0px 0px}\r\n.flynn2 {background-position:0px -64px}\r\n.flynn3 {background-position:0px -128px;}\r\n.flynn4 {background-position:0px -192px;}\r\n.flynn5 {background-position:0px -256px;}\r\n.flynn6 {background-position:0px -320px;}\r\n.flynn7 {background-position:0px -384px;}\r\n.flynn8 {background-position:0px -448px;}\r\n.flynn9 {background-position:0px -512px;}\r\n.flynn10 {background-position:0px -576px;} \/* this one is an exception to the 64 rule *\/\r\n.flynn11 {background-position:0px -640px}\r\n.flynn12 {background-position:0px -704px}\r\n.flynn13 {background-position:0px -768px;}\r\n.flynn14 {background-position:0px -832px;}\r\n.flynn15 {background-position:0px -896px;}\r\n.flynn16 {background-position:0px -960px;}\r\n.flynn17 {background-position:0px -1024px;}\r\n.flynn18 {background-position:0px -1088px;}\r\n.flynn19 {background-position:0px -1152px;}\r\n.flynn20 {background-position:0px -1216px;}\r\n.flynn20 {background-position:0px -1280px;}\r\n.flynn21 {background-position:0px -1344px;}\r\n.flynn22 {background-position:0px -1408px;}\r\n.flynn23 {background-position:0px -1472px;}\r\n.flynn24 {background-position:0px -1536px;}\r\n.flynn25 {background-position:0px -1600px;}\r\n.flynn26 {background-position:0px -1664px;}\r\n<\/pre>\n<p>Add this to your page along with the CSS:<\/p>\n<pre>&lt;div class=\"flynn flynn1\"&gt;&lt;\/div&gt;<\/pre>\n<p>26 frames of animation, so you can change that flynn1 up to flynn26<\/p>\n<p>This is now part of the <a href=\"https:\/\/github.com\/chriscareycode\/nagiostv-livestatus\">https:\/\/github.com\/chriscareycode\/nagiostv-livestatus<\/a> project.<\/p>\n<p>Have fun and please let me know if you use this somewhere!<\/p>\n<\/div>\n<h5><a href=\"http:\/\/chriscarey.com\">Chris Carey<\/a><\/h5>\n<p><script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/scripts\/wordpress\/flynn.js\"><\/script><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\nflynn();\n\/\/ ]]><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flynn from Doom as a CSS sprite &lt;div class=&#8221;flynn flynn0&#8220;&gt;&lt;\/div&gt; 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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1087,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1241","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PrpYG-k1","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/pages\/1241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":25,"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/pages\/1241\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/pages\/1241\/revisions\/1423"}],"up":[{"embeddable":true,"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/pages\/1087"}],"wp:attachment":[{"href":"https:\/\/chriscarey.com\/blog\/wp-json\/wp\/v2\/media?parent=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}