back to top
shopping basket

View your basket

Memory DVD

What our customers are saying:

The quality of the scans are superb and Mark kept us up-to-date on each stage of the process

Read more...

Responsive Image Sprites Using Only CSS

Responsive Image Sprites Using Only CSS

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 26 March 2015

Before I launch into the explanation of how to achieve this, I'd just like to explain what image sprites are. If you've ever played Horace Goes Skiing, Lotus Esprit Turbo Challenge (am I showing my age?) or pretty much any game in the 80's or 90's, you will have come across them. What they are is a collection of images put together into one image file that the code of, in this case a computer game, then selects parts of depending on what the user is doing in the game. This gave the illusion of movement or driving along a road. The use of sprites saved a lot on the load on the computer.

Sprites in web-design work in a very similar way. For a working example of one you need look no further than the footer of this website. Where? At the social media links. Right click on any and select 'View Image' and you will see a collection of six images, displaying each of the icons and their hover state. Using one for the social media links means there is only one round trip required by the browser to fetch all the different icons and their hover states.

Like many things with this newest incarnation of the website, it took me a few goes to find guidance on how to create them in a way that I was happy with. One key advantage with this method is that you can easily add titles and alt tags to the images, and, crucially, all that is required is a bit of css.

Firstly the html.

Almost all that is needed is a containing div and three hyperlinked images:

<div id="followlist">
<a target="_blank" id="twitter" href="https://twitter.com/piciscan">
<img src="/images/piciscan-social.png" alt="PiciScan on twitter" title="Follow us on Twitter"></a>
<a target="_blank" id="google-plus" href="https://google.com/+piciscancouk">
<img src="/images/piciscan-social.png" alt="PiciScan on Google Plus" title="Join us on Google+"></a>
<a target="_blank" id="facebook" href="https://facebook.com/piciscan">
<img src="/images/piciscan-social.png" alt="PiciScan on facebook" title="Like us on Facebook"></a>
</div>

Of course, if you were to use this for your own site, you would point the links to your own social media pages, or whatever pages you wanted and alter the alt and title tags. You could use image sprites for navigation, for example.

The key part of the html that interacts with the CSS to make the sprites work is as follows:

<a … id="twitter" ><img src="/images/piciscan-social.png"></a>

As a minimum, there needs to be an a href that has a target and an id or class, and there needs to be an image, which itself needs NO id or class.

Now for the CSS

As with any CSS that I have written for this site, it is mobile first followed by specified breakpoints for the various screen sizes/orientations. I'll give you it all and then explain a few bits:

#followlist {
width: 100%;
}

#twitter, #google-plus, #facebook {
width: 20%;
height: 0;
padding-bottom: 20%;
overflow: hidden;
display: inline-block;
}

#twitter {
margin: 0 5% 0 8%;
}

#google-plus {
margin: 0 5%;
}

#facebook {
margin: 0 8% 0 5%;
}

#twitter img, #google-plus img, #facebook img {
width: 300%;
border: none;
}

#twitter img {
margin: 0;
}

#google-plus img {
margin: 0 0 0 -100%;
}

#facebook img {
margin: 0 0 0 -200%;
}

#twitter: hover img, #google-plus: hover img, #facebook: hover img {
width: 300%;
}

#twitter: hover img {
margin: -100% 0 0 0;
}

#google-plus: hover img {
margin: -100% 0 0 -100%;
}

#facebook: hover img {
margin: -100% 0 0 -200%;
}

@media screen and (min-width: 480px) and (max-width: 799px)  {

#followlist {
width: 80%;
margin: 0 auto;
}
}

@media screen and (min-width: 800px) and (max-width: 1100px)  {

#followlist {
width: 70%;
margin: 0 auto;
}
}

@media screen and (min-width: 1101px) {

#followlist {
width: 54%;
margin: 0 auto;
}
}

The code to manage the sprites themselves doesn't change at all across all the screen sizes. What does alter is the size of the containing div. To help with the repsonsiveness, this is always set to a percentage of the screen-width as follows:

@media screen and (min-width: 480px) and (max-width: 799px)  {

#followlist {
width: 80%;
margin: 0 auto;
}
}

@media screen and (min-width: 800px) and (max-width: 1100px)  {

#followlist {
width: 70%;
margin: 0 auto;
}
}

@media screen and (min-width: 1101px) {

#followlist {
width: 54%;
margin: 0 auto;
}
}

To set up the size of each icon on the page, the following code is used:

#twitter, #google-plus, #facebook {
width: 20%;
height: 0;
padding-bottom: 20%;
overflow: hidden;
display: inline-block;
}

As each icon is identically sized, the ids for each icon are listed together:

#twitter, #google-plus, #facebook

The width of 20% sets the icons to be 20% of the containing div. This part ...

height: 0;
padding-bottom: 20%;

... forces the height to respond to the width of the screen. The height should be set to 0, but to find the correct padding-bottom, requires a bit of calculating. In this case, as the icons are square, the padding-bottom matches the width exactly. Were the icons rectangular, where the height was half the width, then so too would the padding-bottom be. In this case, the padding-bottom would be 10%. If the height were double the width, the padding-bottom would be 40%.

The margins for each of the icons differ slightly, so:

#twitter {
margin: 0 5% 0 8%;
}

#google-plus {
margin: 0 5%;
}

#facebook {
margin: 0 8% 0 5%;
}

As the width of the image used to display the icons is three times the width of what you want the user to see, both in the hover state and at rest ...

#twitter img, #google-plus img, #facebook img {
width: 300%;
border: none;
}

#twitter: hover img, #google-plus: hover img, #facebook: hover img {
width: 300%;
}

And finally, it is the margins of the icons, set by their ids, that determines which part of the larger image is displayed, both when hovering and at rest:

#twitter img {
margin: 0;
}

#google-plus img {
margin: 0 0 0 -100%;
}

#facebook img {
margin: 0 0 0 -200%;
}

#twitter: hover img {
margin: -100% 0 0 0;
}

#google-plus: hover img {
margin: -100% 0 0 -100%;
}

#facebook: hover img {
margin: -100% 0 0 -200%;
}

The negative margins 'pull' the correct part of the image into view. Percentages are used to keep it all responsive. And the percentages were calculated using the method outlined in the image below:

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more