CSS Sprites

CSS Sprite is a concept where instead of having multiple images for your webpage, you can have a single sprite which will have all your images in it. Typically, a sprite is a transparent image in .png format. For our menu, we need those four icons into a single sprite which we will manipulate using css.
Here is the sprite I came up with in photoshop:

I got these delicious icons from here. My icons are 64×64, so I set the canvas to 64×256 since I need to stack the four icons on top of each other. I set up three guidelines, each spaced exactly 64px apart. Now I just imported the icons and placed them inside those guides. Export this sprite to a .png file with a transparent background.

The markup

Since now we have the sprite ready, lets start with the markup

  <ul class="menu">
    <li id="cakes">cakes</li>
    <li id="donuts">donuts</li>  
    <li id="rolls">rolls</li>  
    <li id="pies">pies</li>    
  </ul>

The reason I have added IDs to each list element is because we need an identifier to distinguish between east list item for our css.

The CSS

Here is the necessary CSS we need for the sprite to work

ul.menu li    {
   color:#47170b;
   font-size:40px;
   padding:12px 0 12px 85px;
   margin:14px 0;
   background:url(sprite.png) no-repeat
}

Note that we add the sprite as a common background for all the list elements, along with the necessary padding and margin.

   ul.menu li#cakes   {background-position:0 0}
   ul.menu li#donuts  {background-position:0 -64px}
   ul.menu li#rolls   {background-position:0 -128px}
   ul.menu li#pies    {background-position:0 -196px}

Adding these css will distinguish the list from one another. Note that the Y-position of the background is shifted up in multiples of 64px, since our icons are spaced out that way.

Conclusion

There you go, after necessary styles, you should have your CSS Sprite-powered menu. Feel free to download my files and experiment. Have fun!

The markup

As always with my tutorials, the markup will be as simple as possible.

<form class="css3Form">
    <h1>Contact me</h1>
    <ul>
        <li><input type="text" value="Your Name"/></li>
        <li><input type="text" value="Email Address"/></li>    
        <li><textarea rows="5"> Comments </textarea></li>
    </ul>
    <input type="button" class="button" value="Send" />
</form>

The CSS

We start with the CSS for the form. Please note that CSS3 will be extensively used, this will not work in IE8 or other older browsers (but it will still fall back gracefully).

.css3Form ul li
{
    margin:10px 0;
	box-shadow: 1px 1px 0 0 #949494;
	-moz-box-shadow: 1px 1px 0 0 #949494;
	-webkit-box-shadow: 1px 1px 0 0 #949494;
		border-radius: 18px 18px;
	-moz-border-radius: 18px 18px;
	-webkit-border-radius: 18px 18px;	
 
	float:left;
	clear:both
}
.css3Form input, .css3Form textarea
{
	margin:0;
	width:300px;
	padding: 8px 10px;
	font-size:16px;
	color:#b3b3b3;
	border:solid 1px #585858;
	text-shadow: 1px 1px 0 #4b4b4b;	
 
	border-radius: 18px 18px;
	-moz-border-radius: 18px 18px;
	-webkit-border-radius: 18px 18px;		
 
	box-shadow: inset 1px 1px 3px 0 #000;
	-moz-box-shadow: inset 1px 1px 3px 0 #000;
	-webkit-box-shadow: inset 1px 1px 3px 0 #000;
 
	background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
 
}
.css3Form .button
{
	width:150px;
	border:solid 1px #bababa;
	color:#363636;
	font-weight:bold;
	font-size:18px;
	border-bottom-color:#363636;
	background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));	
 
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 
	text-shadow: 1px 1px 0 #9d9d9d;	
}

If you find any of the above styles incomprehensible, check out some of my earlier tutorials which explain these CSS3 properties in simple terms: CSS3 Buttons, CSS3 Navigation

There you go, a simple yet gorgeous form created using just CSS.

Google raises the ‘bar’

Google rolled out its top navigation bar today, and it now reflects across Gmail, Search, Reader and other Google Apps. In my opinion, the new design looks a lot sleeker and more modern than the old one since it does away with all the old school underlines.

Recreating the Google Navigation in CSS

So let’s develop this new, stylish bar in CSS. Check out the demo below to see what you will be creating.

The markup

Here is the basic markup for the navigation. It’s pretty simple.

<ul class="googleTab">
	<li class="active">Home</li>
	<li>About us</li>
	<li>Our Services</li>
	<li>Our Technologies</li>
	<li>Contact us</li>
</ul>

The CSS

Here we have the CSS style for the navigation. You can see that it uses a lot of CSS3 properties.

ul.googleTab				{
	background: #848383;
	padding:0 5px;
	font-size:13px;
	color:#3366cc;
	overflow:hidden;
 
	background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5));
}
ul.googleTab li	{
	float:left;
	padding:7px 8px;
	border-top:solid 2px #bad3ea;	
}
ul.googleTab li.active{
	border-top: solid 3px #1a54e1;
	color:#363636;
	font-weight:bold;
}
ul.googleTab li:hover	{
	background:#e4ebf8;
	cursor:pointer;
}

The CSS styles and parameters mentioned above are mostly self-explanatory. If you still found it hard to understand any of the parameters, check out my other tutorials which cover this subject in detail: CSS3 Buttons, CSS3 Navigation

I hope that this was both fun and helpful. Enjoy!

The final product

This is what your nav bar will look like at the end of the tutorial. You only need a basic knowledge of CSS to pull this off, so no worries.

The solution

Menus driven purely by CSS have always been the ideal solution when it comes to navigation. However, we all know that we have been forced to use simplistic designs or images because of limited CSS and browser capabilities sometime or the other. You’ll be happy to know that with the advent of CSS3, it is easier than ever to create flexible, and simple yet creditably good looking navigation menus.

Please note that this will work only on modern browsers, but it does have a fall-back for IE and other older browsers.

The markup

Let’s start with the html markup for the navigation. We’ll keep it very simple and straightforward here.

<ul class="cssTabs">
	<li class="active">Home</li>
	<li>About us</li>
	<li>Our Services</li>
	<li>Contact us</li>           
</ul>

Step 1 – The basic CSS

Now, let’s style the navigation with the basic parameters.

ul.cssTabs {
	background: #848383;
	border:solid 1px #606060;
	padding: 0 75px;
	width: 405px;
	margin:20px;
	font-size:12px;
	font-weight:bold;
}
 
ul.cssTabs > li {
	background:#989898;
	color:#3a3a3a;
	border:solid 1px #606060;	
	border-bottom:0;	
	display: inline-block;
	margin: 10px 1px -1px;
	padding: 8px 20px;
}
 
ul.cssTabs > li.active {
	background:#ededed;
}

Done? Great! It should look like this now:

This should be pretty self-explanatory. This is also what the fall-back will look like.

Step 2 – Gradients, box-shadows and rounded corners

We now get down to the main business of using CSS3 capabilities. Add the following code to the ul.cssTabs class:

	background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
 
	box-shadow: inset 0 1px 0 0 #dfdfdf;
	-moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
	-webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 
	border-radius: 8px 8px;
	-moz-border-radius: 8px 8px;
	-webkit-border-radius: 8px 8px;

If you are not sure how this works, check out my earlier tutorial which explains this in detail.

Step 3 – Styling the list items

Using the techniques described above, we add these styles to the list items (ul.cssTabs > li):

	background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 
	box-shadow: inset 0 1px 0 0 #dfdfdf;
	-moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
	-webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 
	text-shadow: 1px 1px 0 #d3d3d3;

As you can see, the text shadow is added to highlight the text.

The final step – Active list

And finally, let’s add a different style to the active list item (ul.cssTabs > li.active).

	background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 
	box-shadow: inset 0 1px 0 0 #fff;
	-moz-box-shadow: inset 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 0 #fff;	
 
	text-shadow: none;

Conclusion

Like what you see? Click on the download button to get the code. It also includes three different color schemes. And try out your own colors too!
Have fun and ciao for now.

The final product

This is what we will be creating by the end of this tutorial. You only need some very basic knowledge in CSS to start rolling.

The solution.

The problem with creating rich-looking buttons for the web is that it tends to get really complicated and tricky. Designers have long dreaded rounded corners and gradients and that meant that they had to resort to using a few, if not several, images or jquery to achieve the effect. Techniques like sliding doors are cumbersome and not easily customizable.

The CSS3 solution is elegant and simple, but the catch is that it only works on modern browsers (You didn’t really think that this will work on IE, did you?). But it will will fall-back gracefully on IE and other older browsers.

The markup.

Let’s start with the html markup. This is pretty simple and neat. And of course, you can use this on anchors, divs or basically any other element.

<button class="blue-btn">Click here</button>

Step 1 – The basic CSS

We start out with the basic CSS for our button.

button.blue-btn{
	background: #2e8ce3;
	padding: 7px 30px;
  	font-size:13px;
	font-weight: bold;
	color:#fff;
	text-align: center;  
	border:solid 1px #73c8f0;
}

It should look like this now:

This is also how the fall-back will look like.

Step 2 – Gradients

Lets add those gradients now:

	background: -moz-linear-gradient(0% 100% 90deg,#2e8ce3, #73c2fd);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73c2fd), to(#2e8ce3));

This basically declares a linear gradient for the mozilla and webkit based browsers. Note that the order of the start and end colors differ for the two methods.

Step 3 – Rounded corners

Add these for the rounded corners:

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

This will ensure that the rounded corners will work across all the modern browsers.

Step 4 – Inner shadow

Let us add a white inset to have that protruding effect.

	box-shadow: inset 0 1px 0 0 #fff;
	-moz-box-shadow: inset 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 0 #fff;

This is the box shadow CSS3 property to achieve the shadow effect. The ‘inset’ parameter allows us to have inner-shadows. This will add a 1px white offset at the top of the button inside the border.

Add a darker color for the bottom border for better contrast:

	border-bottom-color:#196ebb;

Final step – Text shadow

This is optional, but it will add a nice contrast to our text.

	text-shadow: 0 -1px 0 #196ebb;

Conclusion

Feel free to experiment and try dabbling with other colors.

I hope that you found this tutorial helpful. Please leave your comments/suggestions below.

Check out my other tutorial covering the same subject.

Who is this guy?

For those who are unfamiliar with me, I am a 24-year-old web designer from Chennai, India. I specialize in designing usable, rich interfaces for the web.

What is this about, then?

Well, apart from showcasing my portfolio, this blog will be about sharing my experiences as a web designer, tips for rookies, killer tutorials I stumble upon (I intend to write some tuts on my own too), design resources that fellow designers will find useful and the like. So there you go, yet another design blog, with a difference.

How can I be involved?

This is what I am really excited about, I mean, that’s the whole point of a blog anyway, right? I have a pretty good commenting system developed right below (Facebook connect is glitchy, bear with me), you are welcome to post your thoughts, suggestions or critiques. You can also email me directly from the contact page for any queries you might have. And you can share my posts on facebook, twitter or delicious etc on the share panel above the comments.

Nice!

So, there you go, this blog in a nutshell, let’s do this thing!
PS: Sorry about the bromidic star wars reference in the title (Did I mention I love star wars?)