Unique Navigation Bars Using CSS Sprites

Navbar-Tutorial
In my previous article about CSS Sprites - Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.

PHOTOSHOP TUTORIAL
To create a navigation bar that stands unique from the rest of the other blogger templates, it becomes a little mandatory that you know a little about PhotoShop. So, we will just let you know how to create one.

1. Open Adobe PhotoShop. Create a new transparent file with the dimensions you want. Most of the blogs usually have a navigation bar of width 960px and height varies between 30-50px. In this tutorial, we will be working with an example of dimension 495 x 48px.
Sprites-Navbar-Tut-1
2. Now, let your imagination run wild. Create a unique navigation bar as per your wish. Try different fonts, change pixel sizes, change the text color (or) include images next to each text. It's your navigation bar. So, have it your way. The design which I made is a simple one with icons next to each text as shown below.
Navbar-01
3. Save this image as "Nav-01" using "File>>Save for Web..." option to obtain a .png image. This image will serve as the base image below which we will build another image for the hover effect. So, create another new file with same width as that of the initial image but double the height. In my example, I had an initial image with dimensions 495 x 48 px. The new image should be 495 x 96 px.
Sprites-Navbar-Tut-2
4. Now, open "Nav-01.png" and copy the entire image to the new file which you created. Place the image to fit the window dimensions. You will find a new layer being created that has a label "Layer 1". Have a look at the following picture for better understanding.
Sprites-Navbar-Tut-3
5. Now, duplicate that layer (Layer 1) as shown below.
Sprites-Navbar-Tut-4
6. We need to show a difference when the mouse is hovered over the link. For this very reason, place the duplicate layer below the first layer and work on the duplicate layer alone. You may show difference by changing the text color (or) have gradient effects...
7. In my case, I have just added a small box to appear above each link. So, the final outcome would be something like the one shown below.
Final-Navigation-Bar
Well, save this image as "Final-Nav-Bar.png" and upload the same to PICASA or ImageShack or any image up-loader. Obtain the URL and save it to a temporary text file!!!

"I'm sure you would have gone nuts before you got the exact look you had in your mind! Assuming that you got one, you may have a cup of coffee to relax yourself before we move the next part in the tutorial."

HTML PART
The HTML coding involved with the navigation bar is pretty simple. We make use of an unordered list with 4 list items present it. We make use of span tags in the HTML part so that, the search engines index the text along with the image rather than only the image. Well, you may extend the list to any number as you want. Make sure the text on the image and text in between the span tag matches else you will end up flagged. You may place the following piece of code anywhere in between body tags to realize the effect.
<ul id='nav-example'>
<li id='nav-example-1'>
<a href='#'><span>Home</span></a></li>
<li id='nav-example-2'>
<a href='#'><span>Advertise</span></a></li>
<li id='nav-example-3'>
<a href='#'><span>Contact</span></a></li>
<li id='nav-example-4'>
<a href='#'><span>Portfolio</span></a></li>
</ul>
Save your template once you add the above code! You may replace the '#' symbol with the links you wish to point to. It's pretty self-explanatory!

CSS PART
The CSS part will vary from person to person depending upon the image size you chose and other specifications. However, the basic layout will remain the same. You just need to vary few parameters in the coding below to match your creative work.
#nav-example {
background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") no-repeat;
width:495px;
height:48px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:48px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-1 {width: 125px;}
#nav-example-2 {width: 122px;}
#nav-example-3 {width: 122px;}
#nav-example-4 {width: 123px;}
#nav-example-1 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") 0px -48px no-repeat; }
#nav-example-2 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -125px -48px no-repeat; }
#nav-example-3 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -247px -48px no-repeat; }
#nav-example-4 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -369px -48px no-repeat; }
If you are blogger - blogspot user, then place the above code just before the following line. Use "CTRL+F" to search your blogger template.
]]></b:skin>
Finally, replace the link which points to my example to your image URL - the one which you temporarily saved on a text document. Just replace the code highlighted in blue with your link. Save your template!

CUSTOMIZATION
1). The very basic step in customizing the CSS part to match your navigation bar would be to change the width and the height of the bar. As mentioned earlier in the post, I worked on 495 x 48 px version while your navigation bar could be much larger or smaller. So, vary the code that is highlighted in green to match the dimensions of your navigation bar and save them.

2). Note the codes highlighted in orange. These codes specify the width of the lists in the navigation bar. In my example, the first list occupies a width of 125px while the second one occupies a width of 122px and so on... You may vary this as per your design. It's better to use the option of "Rulers" in PhotoShop to know the exact width of each item. Make the respective changes as per your design and save them!

3). The background position for the a:hover state is pretty easy to fix. The vertical position will never vary because you have to display the complete bar. So, you can simply mention the height with a negative sign prefixed to it. To find the horizontal position ( Highlighted with Rose Color), initially you start off from 0px. The next position shall be obtained by subtracting from the nav-example-01 state, that is, 0 - 125 = -125 px. Similarly for the next position, obtain it from nav-example-02, -125 - 122 = -247px. This shall be done for your entire list. That's it! Save the template and your done!

Your final output should be as shown in the following DEMO LINK - NAVIGATION BAR USING CSS SPRITES, provided you followed all the steps correctly! Just hover your mouse over the lists on the page and enjoy the effect!!! Another great example to let you know how creative your work could be - CSS Navigation Bar Example.

"If you wish to have unique navigation bars for your blog without any hassle, then reach us via Our Services page. We'll design distinct navigation bars for you and set them on your blog too!!! Why to break your head when we are there to do that:)"

I tried to keep things as simple as possible! If you find any difficulties, our comments section is always welcome. Leave a comment and clear your doubts. We'll see you in another interesting tutorial!

Using CSS Sprites On Blogger - Introduction

CSS-Sprites
I'm sure many of you would have visited websites like Yahoo!, YouTube, Facebook, etc.. Have you ever wondered how quick these websites load though they possess a lot of images in the background? How is it possible? Is it possible only for websites - not for blogs on blogger? Definitely not, we can have these effects on blogger too. But how? Answer: Using CSS Sprites!!!

WHAT ARE CSS SPRITES? ARE THEY USEFUL?
Well, the name might be little misleading. Sprites are not small tiny pictures as you imagine. A sprite is one big image - usually a cluster of small images used on a website. By using CSS Sprites, we achieve the following advantages.
  • Total image size is generally less when compared to the size of the combined individual images. So, a considerable bandwidth is saved. 
  • Few images for the browser to load which means fewer HTTP requests (per page view). Multiplying this with the number of visitors per day, per week, per month, per year. Definitely a lot of saving... Isn't it?
  • Most important - no JavaScript, no jQuery - only CSS!!!
Well, I guess the question of "Whether Sprites are useful?" has got erased from your mind now. Moreover, we recently heard from Google that page speed will be reflected on the respective blog's PageRank. So, if you wish to have a better PR by increasing the page speed of your blog, then Sprites would come in handy!

SIMPLE HOVER EFFECT
In this article, I will just illustrate the very basics of CSS Sprites - to get hold of "What's CSS Sprites". In the upcoming articles, you will find a detailed explanation about how sprites could be applied to all the images in a blog. Here, we restrict ourselves to one simple trick - Hover Effect Using Sprites. Take a look at the demo before we proceed to the tutorial. Hover your mouse onto the tweety bird to the right. Cool Effect! Isn't it?












TUTORIAL
Wondering where to use this effect? It's most effective on navigation bars. Other areas include highlighting a link (or) usage in the header of your blog - anywhere you need a hover effect. I would like to illustrate this effect with my very own example - tweety bird. Before we get into the coding part, make sure you have identical images - same width and height.

The first image (PREVIEW) which I used is just the outline of the tweety bird while the second one (PREVIEW) is filled with colors. Later, I clubbed both the images onto a single file using Photoshop. Clubbed??? It's just placing one image below an another. You place the images horizontally one after another (or) place them one below another. I chose to place them one below another. Have a look at the final image - PREVIEW. The final image is the one which will be used for the hover effect using CSS Sprites.

HTML PART
The following piece of code is the HTML part for the above effect.
<a href='#' id='logo-link1'/>
Note: Make sure the ID used is unique (code highlighted in pink). You may place it anywhere in between your body tags to invoke the effect. I have used it in my post area in this article. You may point to any URL by replacing # with the link your wish to point to - it's pretty self-explanatory.

CSS PART
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Place the following piece of code just above the line mentioned in step 1.
#logo-link1
{
width:271px;
height:288px;
text-decoration:none;
display:block;
background-image:url(https://lh6.googleusercontent.com/-pAJTOcbwUh8/TfilybD4R_I/AAAAAAAABGo/L1OQ5951gi8/s800/tweety-sprites-tutorial.png);
background-position:0px -288px;
}
#logo-link1:hover,#logo-link1:active
{
background-image:url(https://lh6.googleusercontent.com/-pAJTOcbwUh8/TfilybD4R_I/AAAAAAAABGo/L1OQ5951gi8/s800/tweety-sprites-tutorial.png);
background-position:0px 0px;
}
Note: When the browser loads the image, I want the outline alone. For this reason, I set the background position of the image to 0px horizontally & -288px vertically (code highlighted in green). On hover, I need the colored version. So, I just move the vertical position from -288px to 0px (code highlighted in orange). That's it!
3. Save your template. That's it!

Pretty simple!!! Isn't it? Since this is an introductory article on sprites, it looks very easy.  Moreover, we have dealt with only one image. Imagine when it multiplies for all the images on your blog. It will be very difficult to exactly position your images and get the padding right. We will illustrate with better examples in the upcoming articles. Share your opinions or clear your doubts about sprites via comments!
[netinsert=0.0.1.11.14.1]