SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS Sprite

    Hello,

    I have developed the following code which works fine but I think combining the images in a CSS sprite would be much more efficient since i have to repeat the code 12 times for all my buttons.

    Any ideas on the proper css to use with a sprite image?

    Code:
    a.pushup {display: inline-block;padding: 5px 10px 5px 30px;font-family: Century Gothic, sans-serif;text-transform:uppercase;background:#131313;color:#fff;}
    a.pushup:hover {color:#fff;background:#cc1a1a;cursor:pointer;} 
    
    #psubmit {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
    #psubmit:hover {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #cc1a1a;}
    #pinfo {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
    #pinfo:hover {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #cc1a1a;}
    #pphone {background: url("http://beta.com/images/phone16.png") no-repeat scroll 8px 8px #131313;}
    #pphone:hover {background: url("http://beta.com/images/phone16.png") no-repeat scroll 8px 8px #cc1a1a;}
    HTML

    <a class="pushup" id="pinfo" href="#">Email</a>

    many thanks,
    Andy

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The real advantage of using spites lies in saving HTTP requests ( and having one image ready loaded) and no so much in saving you characters in CSS.

    But first thing first.. the code you posted would be far more efficiently written as:
    Code:
    a.pushup {display: inline-block;padding: 5px 10px 5px 30px;font-family: Century Gothic, sans-serif;text-transform:uppercase;background:#131313;color:#fff;}
    a.pushup:hover {color:#fff;background:#cc1a1a;cursor:pointer;} 
    #psubmit,#pinfo,#pphone  {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
    #psubmit:hover,#pphone:hover,#pinfo:hover{background-color:#cc1a1a;}

    the example you posed doesn't seem to pose the need for a sprite ( or show clearly what your intent is)


    So here is the GENERAL idea:
    Where sprite .png is a 50px x 150px PNG file "containing" 3 different 50px x50px images (obviously , vertically stacked)

    Code:
    .button1,.button2,.button3 { height:50; width:50px;  background:url(sprite.png) no-repeat 0 0 pink;}
    .button2{  background-position:0 50px; background-color: orange;} 
    .button2{  background-position:0 100px; background-color: blue;}

    as you can see we have set the size of the .buttonX elements, so that they act as a "keyhole" ( you really cant use sprites unless you set at least one dimension as the other images contained in the file might show). then we use: background-position to align the full image so that the part we want shows through. optionally you can use background-color to set the background color as well.

    This doesnt preclude you from using the background: 'shortcut', but if you do you would have to type the same attributes over and over as you noticed.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply and sorry for the confusion - the images are different so i can't use your first suggestion - I know how sprites work but i can't figure out the specific CSS code i will need for this particular case...

    the problem lies with the way i create the buttons i think.. i think i would need some specific css code here but thanks for the feedback.

  4. #4
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,573
    Mentioned
    975 Post(s)
    Tagged
    14 Thread(s)
    Hey @neojandre ;
    We've built a new product at SitePoint to help people fix their CSS in real-time. This looks like something that we could easily help you fix immediately.
    One of our CSS experts is online now and ready to help if you're interested.

    Edit: I'm removing the link to the product while we fine tune and develop further. Will keep you posted.
    Last edited by HAWK; Feb 26, 2013 at 21:29.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •