{"id":4586,"date":"2009-11-02T04:39:46","date_gmt":"2009-11-02T11:39:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=4586"},"modified":"2009-11-02T04:39:46","modified_gmt":"2009-11-02T11:39:46","slug":"holy-sprites","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/holy-sprites\/","title":{"rendered":"Holy Sprites"},"content":{"rendered":"<p>Lots of folks joined in on the fun with the <a href=\"https:\/\/css-tricks.com\/sprites-contest\/\">Show Off Your Sprites!<\/a> contest. I used the ol&#8217; <a href=\"https:\/\/css-tricks.com\/generate-a-random-number\/\">random number generator<\/a> and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let&#8217;s take a look at some of the submissions. Looking at sprites I find strangely fascinating. It&#8217;s like this strange secret language of the web that only us performance nerds really understand =)<\/p>\n<p><!--more--><\/p>\n<p>Some of these may have been cropped or resized. They aren&#8217;t meant to be taken and used, I just hope they serve as an inspirational spark!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/sprite-1.png?resize=382%2C196\" width=\"382\" height=\"196\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/nav_logo7.png?resize=164%2C106\" width=\"164\" height=\"106\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/dragon-sprite.jpg?resize=556%2C350\" width=\"556\" height=\"350\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/STORMINKspriteOLD.png?resize=416%2C157\" width=\"416\" height=\"157\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/apple-sprite.png?resize=558%2C152\" width=\"558\" height=\"152\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/socialbuttons.png?resize=432%2C72\" width=\"432\" height=\"72\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/jquery-ui.png?resize=256%2C240\" width=\"256\" height=\"240\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/yahoo-cn.png?resize=557%2C270\" width=\"557\" height=\"270\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/amazon.png?resize=410%2C307\" width=\"410\" height=\"307\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cycle-news.png?resize=528%2C378\" width=\"528\" height=\"378\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/tech-icons.png?resize=210%2C140\" width=\"210\" height=\"140\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/youtube-sprite.png?resize=169%2C468\" width=\"169\" height=\"468\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/warsprite.png?resize=549%2C335\" width=\"549\" height=\"335\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/makesometime.png?resize=370%2C304\" width=\"370\" height=\"304\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/rachel.png?resize=391%2C414\" width=\"391\" height=\"414\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/tut9sprite2.jpg?resize=553%2C240\" width=\"553\" height=\"240\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/buttons_sprite.gif?resize=240%2C341\" width=\"240\" height=\"341\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/princespriteswb3.jpg?resize=561%2C637\" width=\"561\" height=\"637\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/timwright.jpg?resize=400%2C475\" width=\"400\" height=\"475\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/beersprite.jpg?resize=570%2C304\" width=\"570\" height=\"304\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/tommyday.jpg?resize=526%2C312\" width=\"526\" height=\"312\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/designbumb.jpg?resize=553%2C641\" width=\"553\" height=\"641\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/social_sprite16.png?resize=112%2C32\" width=\"112\" height=\"32\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/login-v2.png?resize=175%2C300\" width=\"175\" height=\"300\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/bg_sprites.jpg?resize=257%2C297\" width=\"257\" height=\"297\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/netsprite.png?resize=383%2C445\" width=\"383\" height=\"445\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/mine-sprite.png?resize=64%2C48\" width=\"64\" height=\"48\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>If you just look through all these and were like &#8220;Uhmm, what the heck was that?&#8221; Those are called CSS Sprites and you can <a href=\"https:\/\/css-tricks.com\/css-sprites\/\">learn about them here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol&#8217; random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let&#8217;s take a look at some of the submissions. Looking at sprites I find strangely fascinating. It&#8217;s like this strange [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4586"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4586"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4586\/revisions"}],"predecessor-version":[{"id":4593,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4586\/revisions\/4593"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=4586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}