CODEWITHSUNDEEP
htmlcss
CSS Apprentice
CSS Apprentice

Reputation: 939

How To Make Sprites Larger

I need to increase the size of some sprites in a WordPress Footer, and I can't figure out a good way to do it.

HTML:

<div>
    <div class="sprites sprite1"></div>
    <div class="sprites sprite2"></div>
    <div class="sprites sprite3"></div>
</div>

CSS: 

.sprites {
    background-image: url('http://static.tumblr.com/6az34or/hTwmc1qw7/socialmedia-sprites.png');
}
.sprite1 {
    background-position: 0px 0px;
    height: 25px;
    width: 25px;
}

<!-- etc. -->

jsFiddle: http://jsfiddle.net/Labb6da9/

Upvotes: 2

Views: 414

Answers (1)

Toni Leigh
Toni Leigh

Reputation: 4971

.png sprites works because you use pixels to peep onto a restricted area of a larger image. This means you can't zoom them very easily. You can't do anything that effects the co-ordinates that picks out the sprite image without exposing other sprite images, unless you zoom the size of the underlying image correspondingly. You then need to do it by an exact multiple of pixels (so exact 2x or 3x) to avoid bleeding - this might not fit your designs.

With any zooming on a pixel based image quality will be lost.

Drop the pixels in order to win ...

SVGs will scale without loss of quality. You can also sprite them. They work by defining an image as a set of co-ordinates that define lines, rather than by the colours of a set of atomic blocks arranged in a grid. Co-ordinates can be easily scaled. Also, they're defined like HTML, meaning they can be targeted with css and embedded directly in the document. All this sort of thing gives more flexibility, while allowing scaling and keeping http requests down (the original goal of spriting)

Icon fonts will allow you to treat a set of icons like a font, giving you that sort of flexibility you'd expect from a font, such as colour and size. Also, with a font, you get the one http request benefit of a sprite.

IcoMoon will produce both for you

Upvotes: 3

Related Questions