Home
1
CSS Sprites (Part 2/2) Wed Dec 08, 2010 9:14 pm
Guest
Guest
CSS Sprites (Part 2/2) Using CSS Sprites in your page |
Hey there once again.Welcome to the second part of CSS Sprites.In order to undestand whats coming up,i suggest you to read the first part.If you did,then prepare yourself to work  .I will try to explain everything the best i can so that you clearly undestand how to work with css sprites  Let the tut begin! 0)Introduction There are many sites using css sprites.Facebook,E-bay,Dragon interactive and our lovely appple .At the previous part we have mentioned the navbar effect on the apple's website.Right now,we are going to make a clone of the navbar in order to undestand how css sprites work 1) Creating the image We are now going to create the navbar.Actually two,one of them which will contain the mouse over effect.Just to give you a quick example of how we are going to create the navbar,take a look at our graphic designer's Iros, navbar:       The above are a collection of 6 seperate images.Looks like a single image cause i have placed them with an inline style.This is exactly what we are going to do with css sprites. Now,i will be giving you a clone image of apple's navbar containing 2 in total navs(the default and the mouseover effect).Click the spoiler for the image.
2)Working with HTML We are going to use an unordered list because they are great especially for navigation. So create an unordered list like the one below.We have specified the li tag at every nav link and also placed the identity(id) at each of them because we are going to need it at the css to work on the placement of the sprites.
3) Working with CSS Read these lines with attention so that we make everything clear.As mentioned in part 2,the first part we will be working at is the div selector for the customisation of the nav.We are going to set as background of our navbar the image i gave you before.Its height is 76px and the width 876 px. Notice:Remember that we will now be working at the standard navbar.The image contains 2 navbars,so the height of the standard navbar is 38px.Why?Because we do not want the bottom half of the picture to show up until one of the buttons on the nav is hovered over. So,we are setting the height of the unordered list to 38,which is the half of 76. ___________________ Extra modifications:
That is just to center the Unordered list in your browser window.I suggest you to place this so that there wont appear any bugs at the nav. ___________________ Now,lets let a look at our css so far:
Now,we are going to list the items of our navbar horizontaly because thats the structure of our navigation.So we float the list items to the left so that they line up horizontally(or we set the style to inline; but floating is better for navigations). We also want to get rid of the bullets of the list cause they are pointless. The next step is to give a height to our anchor tags. The anchor tags determine which part is going to be clickable which we are giving a height of 38px. If we want all of those 38px to be clickable we have to use display: block; . Lets take a look at the whole css so far:
4) Lets start measuring Thats the trickiest part.We have to measure exactly each of the "buttons" at our navbar are.We now have to go to an image editor like gimp or Photoshop.Open the ruler tool and drag it the dark middle separator between the second button.You can also Zoom so that you be more accurate.Keep repeating this process for all buttons of the navbar.Our image's width is 876 px so,if you add all of the buttons width they must make up 876 px.If not,go back and start measuring again. Now, we have to get our selectors ready for each button.Here is the code for the apple clone navbar.
Now that we have the widths set we need to position the rollover on hover. We are going to use background positioning. So we choose our first selector which is #list1, and we set the background image as the image i gave you above. When using background positioning you have two choices.The X-axis(horizontal) and the Y-Axis(vertical). Since are rollover image is underneath our active state we need to shift the image up the Y-axis.The hover image has the same height with the standard and its just under the standard nav,so we are going to use a height of 38 px, but we need to use a negative 38 because the negative makes it go up the Y-axis where as a positive 38 would shift it down. Heres the code:
Now lets work at the other buttons of the hover navbar: We need to shift it over the amount of the previous list items width (Hopefully that makes sense). So we go back and look at the width of the first list item, which we see is 112px so we add that as a negative number to our x-axis on #list2.
The same process goes on and on,here is how the code will be like:
We are done! All you have to do now is upload the whole css to your stylesheet,and place the html to your body tags .To sum up: css Sprites may look tricky,however they have huge benefits: ->Less HTTP Requests ->Less time to load the page ->All your images into a single big image ->Less Bandwith ->No waiting time to load images when hovering This is how css sprites are working.If you have a basic understanding of css ,you can create your own easily  And as always.... Live Demo |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
