However, I just discovered this amazing technique yesterday (yes, you read that right), and I just wanted to get my hands dirty on trying it! For those who are as clueless as me, you can find out more over at CSS Tricks (recommended) or visit my final Codepen doodle here.
Anyways, so I thought a tutorial on CSS sprites would be really cool, since the benefits are really there to be seen. By packing all icons / pictures into one big sheet of image collection, we save on the total number of HTTP requests into just one! Yes, just one :) Over here, I'll be discussing how we can use CSS sprites on the navbars of our web page, but of course, CSS sprites can be used for any images, besides navbar icons - for example, social media icons and all. What is great about it, is its flexibility for web designers to design the different button states (hover, active, visited, etc). It's really only limited to your creativity I guess!
1. Create Your Navbar Image Collection
Let's start by designing our much-needed navbar icons. I would really recommend Fireworks since it's one of the most popular image-to-web publisher and rightly so. For this, I created a 3x3 buttons collection for 3 main buttons, coupled by their 3 representative states (normal, hovered, active/selected). Fireworks is great, since I could add some gradient patterns onto the background for some texturized feel. Each button was created with a 120px X 40px dimension. Also, one of my favourite online .PNG file compressor is TinyPNG, so go ahead and give it a try! (I managed to save 55% upon compression with this image)
2. HTML-ify This Navbar
Right, so now we have to translate this into our html web page. To get started fast, let's focus on the <body> content:
This is a simplified semantic version of our navbar in HTML-speak. It is still raw of course, so we need to tackle the button states via CSS.
3. Where's the make-up?
To fix our navbar at the top:
#menu {
padding: 5px;
position: fixed; //sticky at the top
width: 100%;
background: #fff; //white background
border-bottom: 2px solid #ddd; //faint grey line at the bottom
}
To set our navbar's margins, padding and borders:
#nav {
width: 390px;
margin: 0px auto;
}
#nav li {
float: left;
width: 120px;
height: 40px;
margin: 5px;
}
To set up the nav bar icons(most important!):
nav li a {
display: block;
width: 120px;
height: 40px;
background: url('img/main_nav_flat.png') no-repeat 0 0; //our image collection
}
#nav li.blog a {
background-position: 0 0;
}
#nav li.blog a:hover {
background-position: 0 -40px; //get the right position for display
}
.blog #nav li.blog a {
background-position: 0 -80px; //get the right position for display
}
#nav li.photos a {
background-position: -120px 0; //get the right position for display
}
#nav li.photos a:hover {
background-position: -120px -40px; //get the right position for display
}
.photos #nav li.photos a {
background-position: -120px -80px; //get the right position for display
}
#nav li.contact a {
background-position: -240px 0; //get the right position for display
}
#nav li.contact a:hover {
background-position: -240px -40px; //get the right position for display
}
.contact #nav li.contact a {
background-position: -240px -80px; //get the right position for display
}
Notice the 3rd line of each section - e.g. ".blog #nav li.blog a {background-position: 0 -80px}". This is quite a cool technique that separates concerns correctly. Here, the CSS is only concerned with how to style the "blog" icon when pressed. So we are saying, when <div id="menu"> is assigned a class value of "blog" (so that we know the user has clicked 'blog' and is viewing the page content for 'blog'), the icon needs to display the 'pressed' state, which is our last vertical image of 'blog' under the image collection. But how would we update the menu so that we can add the right classes to take effect then? Enter jQuery.....
4. Querying user interactions
Include the jQuery Javascript file onto the bottom of the <body> content for efficiency. Here, i've chosen to work with Google's Content Delivery Network (a jQuery 1.9.0 minified file can be found here) so that we try to improve site performances (when the user already have a cached jQuery copy from Google previously). Now, onwards to the custom javascript then:
var contents = ["Blog", "Photos", "Contact"]; //edit accordingly for content
$(document).ready(function(){
$('#nav .blog').click(function(){
$('#content #title').html(contents[0]);
$('#menu').addClass('blog');
$('#menu').removeClass('photos');
$('#menu').removeClass('contact');
});
$('#nav .photos').click(function(){
$('#content #title').html(contents[1]);
$('#menu').addClass('photos');
$('#menu').removeClass('blog');
$('#menu').removeClass('contact');
});
$('#nav .contact').click(function(){
$('#content #title').html(contents[2]);
$('#menu').addClass('contact');
$('#menu').removeClass('blog');
$('#menu').removeClass('photos');
});
});
This is done so that we add and remove the relevant classes into the menu div for our CSS to take effect. If you wish to do some specific content delivery when the different buttons are clicked (e.g. deliver blog contents when 'blog' is pressed), you can do so by adding in those codes right inside the functions inside the .click() method (I would be writing a new tutorial on dynamic content delivery using this template soon). Let's run the html page now and see our baked creations!
To view my demo and the source codes, click here (in Codepen). Enjoy :)
