Mr.Agron

Process work from Mr.Agron

Something I looked up… CSS Sprites

Here is a tutorial that I got from: http://www.dave-woods.co.uk/index.php/css-hover-icon-menu-using-css-sprites/
I wanted to find out how to animate or add effects to icons in a website to make it more interactive and engaging and less static. It could be useful for doing certain things will I need an icon to disappear and display another one. It also places images in with CSS which I need to start doing…
“”””””
HTML
The HTML is really simple an is just an unordered list with an ID applied to each list item and an empty span which we’ll be replacing with an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Icons Demo</title>
</head>
<body>
<ul id="navigation">
<li id="digg"><a href="#"><span></span>Digg</a></li>
<li id="reddit"><a href="#"><span></span>Reddit</a></li>
<li id="delicious"><a href="#"><span></span>Del.icio.us</a></li>
<li id="facebook"><a href="#"><span></span>Facebook</a></li>
<li id="technorati"><a href="#"><span></span>Technorati</a></li>
</ul>
</body>
</html>

CSS
Within the CSS, we’ll start off with some generic styling.
* {
padding: 0; margin: 0;
}
body {
font: 85%/1.5 verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
list-style: none;
}
#navigation a {
color: #CCC;
text-decoration: none;
}
#navigation a:hover {
color: #666;
}

Next, we can start dealing with the icons themselves and can simply apply the set of icons to the span using the following CSS.

#navigation span {
background: url(icons.gif);
float: left;
width: 16px;
height: 16px;
margin: 3px 5px 0 0;
}

You’ll notice at this stage that all this does is apply the icon in the top left of the image to all the list items. So, in order to change this, we need to move the background image accordingly to display the relevant image within the 16×16 box.
We can do this by using the following CSS to positioning the image accordingly.

#reddit span {
background-position: -16px 0;
}
#delicious span {
background-position: -32px 0;
}
#facebook span {
background-position: -48px 0;
}
#technorati span {
background-position: -64px 0;
}

And finally, we can create the hover effect by moving each icon in turn up by 16px on hover by simply adjusting the background position.

#digg a:hover span {
background-position: 0px -16px;
}
#reddit a:hover span {
background-position: -16px -16px;
}
#delicious a:hover span {
background-position: -32px -16px;
}
#facebook a:hover span {
background-position: -48px -16px;
}
#technorati a:hover span {
background-position: -64px -16px;
}

“””””

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: