{"id":908,"date":"2015-01-19T11:57:52","date_gmt":"2015-01-19T17:57:52","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=908"},"modified":"2015-01-19T11:57:52","modified_gmt":"2015-01-19T17:57:52","slug":"the-case-for-css-sprites","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/the-case-for-css-sprites\/","title":{"rendered":"The Case For CSS Sprites"},"content":{"rendered":"<p>Lots of techniques are available for CSS to achieve a particular result. It does mean that we can achieve the same result by applying different types of techniques. However, CSS sprites is one of the techniques developers use.  <\/p>\n<p>This particular technique can be used, if you have a large image, which contains a set of image. By using CSS sprites, we shall be able to separate the images. Let us take a look at the following image.<\/p>\n<p>These are three bars with three different colors. Those are also separated by white lines or spaces. However, by using the CSS sprites, we will be able to separate that image. This particular article will describe the benefits of CSS sprites.<\/p>\n<ul>\n<li style=\"margin: 15px;\">One of the key advantages of using CSS sprites is it actually is cutting back on the HTTP Request. If a browser visits your website, then the data will be requested from the server. If you have lesser images, you will be able to cut back the loading time as well. <\/li>\n<li style=\"margin: 15px;\">In addition, it can help to save time as well. You can use this to merge several images into a larger image. It is saving time and is helping you to locate the images easily. <\/li>\n<li style=\"margin: 15px;\">When you are using the CSS sprites, you are actually becoming flexible regarding the design of your website as well as layout. While using the CSS sprites, you need not to modify any image just for grabbing a slice. <\/li>\n<\/ul>\n<p>However, major companies like Facebook.com and Ask.com use this particular method as it makes them smarter. As now you understand the importance of CSS sprites, you should try to use it while developing. <\/p>\n<p>You will enjoy higher level of flexibility and this particular CSS technique will save your time as well. <\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Lots of techniques are available for CSS to achieve a particular result. It does mean that we can achieve the same result by applying different types of techniques. However, CSS sprites is one of the techniques developers use.  <\/p>\n<p>This [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/the-case-for-css-sprites\/\" title=\"Click to read 'The Case For CSS Sprites'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/908"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=908"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/908\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}