If you are a WordPress user, then you need to add the following CSS mentioned in the tutorial to your ".css file" and upload the same to your server. If you are blogspot user, then you need to add the following CSS codes just above the following code in your template - ]]></b:skin>.
FOR WEBKIT BROWSERS
To realize the gradient effect on webkit browsers like Safari, Chrome, etc... just include the following line in the CSS part of your theme.
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
FOR FIREFOX 3.6+
To visualize the gradient effect on Firefox, add the following piece of code in the CSS part of your template.
background: -moz-linear-gradient(top, #ccc, #000);
FOR INTERNET EXPLORER
Use the following code to enable the gradient effect on IE.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Note: You may change the color codes highlighted in green and blue as per your choice. The codes which are highlighted in green represent the starting color in the gradient effect while the code highlighted in blue represents the ending color. I suggest you to take a look at the following link to easily pick the color code of your choice - HTML Color Codes Generator.
To see the effect on all the browsers, simply combine the above mentioned codes. So, you'll have a browser compatible CSS gradient effect. However, I strongly suggest you to provide a simple color as a background in case the user is using a browser that does not support CSS3. Hence, your final code should be similar to the one shown below.
background: #ccc; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
If you feel the above the post is too complex to understand, then I suggest you to visit this link - Ultimate CSS Gradient Generator and choose the gradient effect of your choice for different colors. Once you make a choice at the left, you can preview the same at the right. Moreover, the required CSS to be inserted in your theme will also be generated. So, just copy that & insert it in your template. That's it!
Why gradient effect using CSS? Simple! No external HTTP requests - increases the loading speed of your web page on all browsers... I recommend you to read the following articles to know more about page speed of your blog - Speed Up Your Blog - Tips And Tools, How To Speed Up Your Blogger Blog? and Using CSS Sprites On Blogger - Introduction. Share your opinions about the article via comments!
This article illustrates about creating unique navigation bars using Adode PhotoShop and CSS Sprites. By using CSS Sprites, we achieve the following advantages - save bandwidth (less image size), reduce the number of HTTP requests and make our blog browser compatible.
