I have a Question on how Guys are using the CSS Sprites on their web mail (new version). Only thing what I know is they are using single image, which is containing the multiple I cons and Gradients. Example would be appreciated.

  • What does "only thing what I know is" mean? Abinadi Ayerdis about 7 years ago

3 answers

-4
points
This was chosen as the best answer

I know that Technique, but i want to know how could we use the backgrounds, as like http://www.thirteen23.com/ site, in that site they are using some Sprite technique for the background, (for rounded corners). blogger also uses the smiler way implemented in http://www.blogger.com/about

any solution for such method?

Answered about 7 years ago by Muhammad Yoosuf
  • sry... but i have no idea what you try to do. Just for the possibility that you have misunderstood CSS Sprites: A CSS Sprite is a combination of several pictures. The advantage is, that there is a smaller overhead when you load the page. On the Blogger Page wasn't any sprite used, or i haven't found it. On the thirteen23 Page, a method similar to mine was used. When using sprites, there are not many other ways to do this, then with background-position. You could use a different way to change the state, but the theory is the same. Sven Finke about 7 years ago
  • @Muhammad: so you re-ask the question as an answer and then give yourself the best answer? Really? -1 Abinadi Ayerdis about 7 years ago
1
point

In theory, you attach the one sprite as a background-image and change the position with background-position. Let's imagine you wan't to create a navigation with 4 links and 2 states for each link. Each Link is 128px wide and 32px high. You would end up with a 512px wide and 64px high sprite. Here is a little example on how the CSS File could look:

#navi a{
display:block;
height:32px;
width:128px;
background-image:url(image.png);
background-repeat:no-repeat;
}
#navi a.link1{
background-position:0 0;
}
#navi a.link1:hover{
background-position:0 32px;
}
#navi a.link2{
background-position:128px 0;
}
#navi a.link2:hover{
background-position:128px 32px;
}
...

It's like you have a big picture and a small frame, the only thing you can see is what's inside the frame, to see other parts of the picture you move the picture behind the frame. Thats what the effect of background-position is like.

I hope that this was a little help :)

Answered about 7 years ago by Sven Finke
1
point

Try this:

http://spriteme.org/

Answered about 7 years ago by Tony Crockford