CSS Sprites | What are They?

CSS Sprites most web developers should have heard this term, so what is it ?.
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.

Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.

Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools and they will generate the Sprite for you.


Signup Sprite image
Signup image
Confirmation sprite image
Signup confirmation image



Two images made into one image


As you see above the are two images called "Signup image" and "Signup confirmation image"  are made into one Big Image using an online CSS Sprite Generator as you can see it above. Once we have our CSS sprite we can use it to our needs  by specifying the CSS "background-position" property like so. 



<!doctype html>                                                               

<html>                                                                        

   <head>                                                             
              <title>CSS Sprites</title>                                      
              <style>                                                         
               input{  width:300px;                                           
                       height:70px;                                           
                       background:url(result.png);                            
                       background-position: 0px 0px;}                         
       input:hover{                                                   
                       background:url(result.png);                            
                       background-position: 0px -88px;                        
                       cursor:pointer;}                                       
              </style>                                                        
          </head>                                                             
                                                                              
 <body>                                                                       
         <input type="button" />                                              
 </body>                                                                      
                                                                              
</html>                                                                       






Comments

  1. Nice Tutorial on CSS Sprites.

    -Regards,
    Sagavaram

    ReplyDelete
  2. Gr8 info on CSS sprites

    ReplyDelete
  3. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!

    ReplyDelete
  4. Nice information about Web application development. Today many companies provide web application development services. Today all people crazy behind the online shopping. So every web master try to developed attractive website for product or service. If you want Web Application Development Services for your company then visit our website.

    ReplyDelete
  5. It is funny how much we can learn just by surfing around the net. This post answered a few questions I had this past week. I usually contact website design columbia sc with any questions that I have concerning development or design but this one time I wanted to do my own research.

    ReplyDelete
  6. Glad to hear about CSS sprites. You have nicely elaborated with points. I have found it very useful.

    ecommerce web design in los angeles

    ReplyDelete
  7. Thanks for share this article. For more visit:Web App Development

    ReplyDelete
  8. This one is awesome saves me a lot of time constraint in solving my webdesign problems

    Arch@Blogfreakz

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Hey!
    It is an inspiring blog post. The issue handles very nicely. I really appreciate the communication skill of yours.

    ReplyDelete
  11. Hey!
    Oh my God I was unaware of the facts you mentioned in your article. It is so helpful. I am highly thankful to you.

    Vachel
    Executive
    cmscentral.net

    ReplyDelete
  12. Hey!
    Oh my God I was unaware of the facts you mentioned in your article. It is so helpful. I am highly thankful to you.

    Vachel
    Web Development Chicago
    cmscentral.net

    ReplyDelete
  13. Thanks for html codes, checkout my blog at
    http://www.definingwords.blogspot.com/2013/04/facts-about-windmillls.html
    don't be shy to leave a comment and like on facebook

    ReplyDelete
  14. Hi,

    Thanks for sharing the CSS language information, most of Web Development Company use them now a days.

    ReplyDelete
  15. It is an inspiring blog post.You also like this http://rcandesign.blogspot.com/2013/04/photoshop-action-part-2.html

    ReplyDelete
  16. Css can make a colorful website, your info is more than that

    ReplyDelete
  17. Thanks also for sharing your knowledge by making this blog. It's really a great help for me. I hope you make more blogs like this.

    ReplyDelete
  18. most of Web Development company uses css for website layout,Thanks for sharing such a vry informative article

    ReplyDelete
  19. offering all kind of Website designers in bangalore and also dealing with best and quallity website developers bangalore in bangalore..

    ReplyDelete
  20. Very Nice Post. I really appreciate with your blog.
    All India Advertisement Service
    Our Type Of Service Like:- Pay per click, Seo Service, Social Marketing, web Design Company Cheap And Best Service in All Over India.

    ReplyDelete
  21. Good information, thanks to share. it really helped me a lot. Digital Agency - Mediaura

    ReplyDelete
  22. good informatio, thanks to share. it really helped me a lot. Digital Agency - Mediaura

    ReplyDelete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Popular posts from this blog

How CSS3 Works