Sprite images can help to reduce the number of the HTTP requests needed to load your website. In this recipe, you will use the Pre.less
mixin library. Pre.less
is a CSS framework that provides useful mixins. The util
module of Pre.less
contains mixins for sprite images that will be used in this recipe.
In this recipe, you will create some social media buttons with a mouse-over effect. You can download the example sprite images with a social media button at http://crunchify.com/social-media-css-sprite-example-for-your-wordpress-blog/, or create a sprite image yourself.
The image should look like the following screenshot:
When you create the sprite image yourself, you will have to use a square grid for your images. Each square should contain one image; a bigger image might overlap more than one grid square, but make sure the overlapping grid squares form a square of squares, too. Evaluate the result of your sprite image in your browser, and use the...