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.

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. Gr8 information for a website Development Company.

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

    ReplyDelete
  5. 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
  6. 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
  7. 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
  8. Thanks for share this article. For more visit:Web App Development

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

    Arch@Blogfreakz

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

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

    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
    Executive
    cmscentral.net

    ReplyDelete
  13. 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
  14. 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
  15. Hi,

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

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

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

    ReplyDelete
  18. 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
  19. most of Web Development company uses css for website layout,Thanks for sharing such a vry informative article

    ReplyDelete
  20. Thanks for share this article. For more visit:Web Development India

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

    ReplyDelete
  22. 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
  23. Good information, thanks to share. it really helped me a lot. Digital Agency - Mediaura

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

    ReplyDelete
  25. Thank you for sharing valuable information. picos de seguridad

    ReplyDelete

Post a Comment

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

Check out

Login form | Using CSS3

Remove Scrollbars from syntaxhighlighter

Adding a button in HTML | styling a button

HTML5 Semantic Tags | What do they mean

How to remove plus and minus characters from input type number

HTML5 | LocalStorage

jQuery Resources | Support and tutorial help

How CSS3 Works