CSS Sprites | What are They?

By -
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. SagavramJanuary 21, 2013 at 1:27 AM

    Nice Tutorial on CSS Sprites.

    -Regards,
    Sagavaram

    ReplyDelete
  2. AnonymousJanuary 21, 2013 at 7:28 AM

    Gr8 info on CSS sprites

    ReplyDelete
  3. AnonymousJanuary 24, 2013 at 11:16 PM

    Gr8 information for a website Development Company.

    ReplyDelete
  4. UnknownFebruary 8, 2013 at 1:52 AM

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

    ReplyDelete
  5. AnonymousFebruary 8, 2013 at 4:16 AM

    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. UnknownFebruary 18, 2013 at 11:43 PM

    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. UnknownMarch 5, 2013 at 8:02 PM

    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. UnknownMarch 11, 2013 at 10:33 PM

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

    ReplyDelete
  9. ArchaznableMarch 14, 2013 at 8:20 PM

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

    Arch@Blogfreakz

    ReplyDelete
  10. Gagan SinghMarch 19, 2013 at 1:25 AM

    This comment has been removed by the author.

    ReplyDelete
  11. AnonymousMarch 19, 2013 at 11:03 PM

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

    ReplyDelete
  12. UnknownMarch 19, 2013 at 11:07 PM

    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. UnknownMarch 19, 2013 at 11:08 PM

    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. bloggerApril 3, 2013 at 9:06 AM

    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. UnknownApril 3, 2013 at 11:18 PM

    Hi,

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

    ReplyDelete
  16. RushiApril 24, 2013 at 2:50 AM

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

    ReplyDelete
  17. Joomla-developersApril 25, 2013 at 7:28 AM

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

    ReplyDelete
  18. Purushothaman RajuMay 21, 2013 at 11:22 PM

    Hello

    ReplyDelete
  19. AnonymousOctober 23, 2013 at 11:10 PM

    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
  20. UnknownJanuary 11, 2014 at 8:13 PM

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

    ReplyDelete
  21. UnknownJanuary 11, 2014 at 8:14 PM

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

    ReplyDelete
  22. Alana ShaikhJanuary 21, 2014 at 9:38 PM

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

    ReplyDelete
  23. All India AdvertisementFebruary 6, 2014 at 10:01 AM

    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
  24. UnknownFebruary 7, 2014 at 2:09 AM

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

    ReplyDelete
  25. UnknownFebruary 7, 2014 at 2:12 AM

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

    ReplyDelete
  26. UnknownApril 10, 2014 at 3:05 AM

    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

By -
Image
Here is an awesome demo of a login form , which makes good use of CSS3 and HTML5. In this demo, i have made extensive use of gradients, text-shadows and box-shadows to achieve a beautiful and modern looking login form. The design of this login form was originally taken for codrops.com, hope you'll like and use this login form in your projects. ViewDemo |   Download Source login form login form Onfocus
Know more »

HTML5 Semantic Tags | What do they mean

By -
HTML markup has changed a lot especially when the WHATWG introduced semantic tags.   Semantic Tags? What do they mean. The Semantic Markup helps Humans and Machines to Interpret the HTML markup in a more meaningful way. Which helps the HTML markup to be structured in a more meaningful way. remember adding semantic tags to your HTML5 markup wont change the apperance of your page, but it Gives more meaning to your Markup.   Here is a list of few HTML5 semantic tags. <section>  </section> <article>  </article> <header>    </header> <nav>          </nav> <aside>      </aside> <footer>    </footer> As you see above the above tags wont make our web pages pretty but it gives more meaning to the markup.
Know more »

Remove Scrollbars from syntaxhighlighter

By -
Image
It's easy to remove the scrollbars that's generated by the syntax highlighter plugin  go to the CSS file you using provided in the plugin for example" shCoreDefault.css" or the cutom css theme file you're using. and find class   .syntaxhighlighter  and comment or remove   overflow: auto !important; that's it the scrollbar's that's created by the plugin is gone and you'll get the default scroll bars of the browser window Comment the lines shown above
Know more »

Adding a button in HTML | styling a button

By -
Image
To add a button in a HTML page use <input> tags and specify the type as button like so <input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1 Add caption Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here
Know more »

How CSS3 Works

By -
CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML  look  good. For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. However, you’d use CSS to format that heading with, say, big and bold red type and position it 50 pixels from the left edge of the window. In CSS, that text formatting comprises a style—a rule describing the appearance of a particular portion of a web page. A style  sheet  is a set of these styles. You can also create styles specifically for working with images. For instance, a style can align an image along the right edge of a web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text....
Know more »

HTML5 | LocalStorage

By -
HTML5 LocalStorage a feature that's been added to HTML5 specification, which enables storing data on clients machine, which can be retrieved and manipulated for future use unless the user clears the cache from browsers. Though we can store data there is a limitation as in how much we can store, the current max size of storing is 5Mb, which is quite a big amount, lets look how to store  and retrieve data on client's machine Storing data: To store data we use the native localStorage.setItem(key,value) method which expects two arguments as shown the key and the value like so: localStorage.setItem('user_name','purush'); Retrieving Data: To Retrieve data we use the native localStorage.getItem(key) method which expects one argument as shown which is the key, lets retrieve the previously stored data localStorage.getItem('user_name'); this will return 'purush' Clearing Data: To remove or clear stored data we can use either localStorage.rem...
Know more »

Advanced Jquery easing | Demo and Download

By -
Image
Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods. Download  DEMO   <! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCF...
Know more »

How to add Jquery easing effects | Jquery tutorial

By -
Image
Lets start with the a little introduction, easing refers to the acceleration and declaration that occurs during the course of an animation to give it a more responsive and natural feel. There are two types of easing methods that the core Jquery library supports, which are Linear and Swing lets us see how to implement this easing methods, but before that lets see a brief description on linear and swing easing methods. Linear easing: Linear easing method accelerates and deacclereates at a constant rate which makes it look fairly boring but it is good to know the linear easing might comin handy. Linear Easing Swing easing: Swing easing method starts off slowly before gaining speed and slows down again towards the end of the animation , which makes it look more natural compared to Linear easing Swing easing             Download Demo <! DOCTYPE HTML> </head> <script type="text/javascript" src="jquer...
Know more »