{"id":1883,"date":"2011-01-08T11:05:35","date_gmt":"2011-01-08T16:05:35","guid":{"rendered":"http:\/\/www.designmarketingadvertising.com\/freetips\/?p=1883"},"modified":"2011-01-08T03:58:22","modified_gmt":"2011-01-08T08:58:22","slug":"free-css-sprite-image-generators","status":"publish","type":"post","link":"https:\/\/designmarketingadvertising.com\/freetips\/free-css-sprite-image-generators\/","title":{"rendered":"Free CSS Sprite Image Generators"},"content":{"rendered":"<p>When designing a website, one of the best ways to save time and space is by creating Sprite images. If you don&#8217;t know what CSS Sprites are&#8230;here&#8217;s a fabulous article &#8220;<a title=\"CSS Sprites: What They Are, Why They're Cool, and How to Use Them\" href=\"http:\/\/css-tricks.com\/css-sprites\/\" target=\"_blank\">CSS Sprites: What They Are, Why They\u2019re Cool, and How To Use Them<\/a>&#8221; written by Chris Coyier.<\/p>\n<p>Without further adieu, listed below are 4 awesome CSS Sprite image generators, all free and extremely useful when designing your next website \ud83d\ude42<\/p>\n<h3>1. <a title=\"SpriteBox: Create CSS from Sprite Images\" href=\"http:\/\/www.spritebox.net\/\" target=\"_blank\">SpriteBox: Create CSS from Sprite Images<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1884\" style=\"border: 1px solid #888888; padding: 3px; background: url(http:\/\/designmarketingadvertising.com\/freetips\/wp-content\/themes\/nitrogenate\/images\/bg-caption.png) repeat scroll left top transparent;\" title=\"Spritebox\" src=\"http:\/\/www.designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritebox.jpg\" alt=\"\" width=\"622\" height=\"254\" srcset=\"https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritebox.jpg 622w, https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritebox-300x122.jpg 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n<h3>2. <a title=\"SpriteMe: Spriting made easy\" href=\"http:\/\/spriteme.org\/\" target=\"_blank\">SpriteMe: Spriting Made Easy<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1891\" style=\"border: 1px solid #888888; padding: 3px; background: url(http:\/\/designmarketingadvertising.com\/freetips\/wp-content\/themes\/nitrogenate\/images\/bg-caption.png) repeat scroll left top transparent;\" title=\"SpriteMe\" src=\"http:\/\/www.designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spriteme.jpg\" alt=\"\" width=\"622\" height=\"254\" srcset=\"https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spriteme.jpg 622w, https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spriteme-300x122.jpg 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n<h3>3. <a title=\"Sprite Creator 2.0\" href=\"http:\/\/www.floweringmind.com\/sprite-creator\/index.php\" target=\"_blank\">Sprite Creator 2.0<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1895\" style=\"border: 1px solid #888888; padding: 3px; background: url(http:\/\/designmarketingadvertising.com\/freetips\/wp-content\/themes\/nitrogenate\/images\/bg-caption.png) repeat scroll left top transparent;\" title=\"Sprite Creator 2.0\" src=\"http:\/\/www.designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/sprite-creator2.jpg\" alt=\"\" width=\"622\" height=\"279\" srcset=\"https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/sprite-creator2.jpg 622w, https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/sprite-creator2-300x134.jpg 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n<h3>4. <a title=\"CSS Sprite Generator\" href=\"http:\/\/spritegen.website-performance.org\/\" target=\"_blank\">CSS Sprite Generator<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1897\" style=\"border: 1px solid #888888; padding: 3px; background: url(http:\/\/designmarketingadvertising.com\/freetips\/wp-content\/themes\/nitrogenate\/images\/bg-caption.png) repeat scroll left top transparent;\" title=\"CSS Sprite Generator\" src=\"http:\/\/www.designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritegen.jpg\" alt=\"\" width=\"622\" height=\"254\" srcset=\"https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritegen.jpg 622w, https:\/\/designmarketingadvertising.com\/freetips\/wp-content\/uploads\/2011\/01\/spritegen-300x122.jpg 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When designing a website, one of the best ways to save time and space is by creating Sprite images. If you don&#8217;t know what CSS Sprites are&#8230;here&#8217;s a fabulous article &#8220;CSS Sprites: What They Are, Why They\u2019re Cool, and How To Use Them&#8221; written by Chris Coyier. Without further adieu, listed below are 4 awesome [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[403],"tags":[418,420,421,419,125],"class_list":["post-1883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-dev","tag-css","tag-sprite-generator","tag-sprite-images","tag-sprites","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/posts\/1883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/comments?post=1883"}],"version-history":[{"count":13,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/posts\/1883\/revisions"}],"predecessor-version":[{"id":1901,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/posts\/1883\/revisions\/1901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/media\/1899"}],"wp:attachment":[{"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/media?parent=1883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/categories?post=1883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designmarketingadvertising.com\/freetips\/wp-json\/wp\/v2\/tags?post=1883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}