Category Archives: Tutorials

Horizontal CSS menu using a pointer and background images

OK, so the title is a bit too descriptive but I’m trying to make this post findable in case anyone out there needs to solve a similar problem. So this will be about… that’s right: creating a horizontal menu, using CSS and XHTML. Each menu item will have a small pointer underneath (an arrow if you will), and I want it all done using images, just to make it a little harder.

Here’s what I wanted the menu to look like:

menu

As you can see, some menu items are longer, some shorter. The menu sits in a gray bar and is separated from the remainder of the page by a green “tube”. I want the selected item and the hover state to be represented by a dark box with a pointer that breaks through the green tube.

At first I made the item an li which had the dark box as a background image and was immediately followed by an empty em tag which then had the pointer as a background image and was offset using relative positioning at 50% left.

A menu item looked a bit like this:

<li><a href="whatever">Homepage</a><em></em></li>

The problem was the positioning of the whole thing as in some browsers, the pointer would become detached from the dark box, and I couldn’t fix that with negative top margins because then the pointer would be offset in yet another browser. A mess. Plus, with this method, I needed a minimum width for each item, so I could then calculate the mid point to place the pointer. No good.

But there is quite a practical solution that came to me while thinking about the sliding doors method of making tabbed navigation menus: marvel then, at the ability to stack background images.

I couldn’t have used a single background image, because then, all my items would have to be the same width, since stretching the background image would distort the triangular pointer, so enter the bkg stack!

I took the li elements of an ul and styled them so they had the correct height: dark box plus triangular pointer. Then, I added a span inside each li, so I could style two overlapping elements with two different images. Then, in the CSS, I applied a background image to the li and another (the pointer) to the span. Keeping the stretching and centering is dead easy like this: you make the dark box around the text repeat on the x-axis and you turn off stretching on the pointer. Plus, you can easily center the pointer by just using “center” on the background declaration.

Here’s the HTML:

<div id="menuarea">
  <ul class="menu">
    <li class="current"><a href="#"><span>Homepage</span></a></li>
    <li><a href="#"><span>Funcionalidades</span></a></li>
    <li><a href="#"><span>Contactos</span></a></li>
    <li><a href="#"><span>SMS</span></a></li>
    <li><a href="#"><span>Chamadas</span></a></li>
    <li><a href="#"><span>Webmessenger</span></a></li>
    <li><a href="#"><span>Comunidade</span></a></li>
    <li><a href="#"><span>Passatempos</span></a></li>
  </ul>
</div>

And the CSS:

#menuarea {
  height:40px;
  background-color:#F0F0F0;
  background:url('images/menuarea_background.gif') repeat-x;
}

.menu {
  width:73.84em;
  margin:0 auto;
  padding:6px 0 0 0;
  white-space:nowrap;
  list-style-type:none;
}

.menu li {
  float:left;
  font-size:93%;
  text-align:center;
}

.menu a {
  position:relative;
  display:block;
  text-decoration:none;
  float:left;
}

.menu a span {
  display:block;
  color:#000;
  text-align:center;
  padding:9px 8px 8px 8px;
  cursor:pointer;
}

* html .menu a span {
  cursor:hand;
  width:66px;
} /*IE Fix*/

.menu a em {
  display:none;
}

.menu a:hover {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu a:hover span {
  background:url('images/menu_pointer.gif') top center no-repeat;
  height:17px;
}

.menu a:hover {
  background-position:0 0;
} /*IE fix*/

.menu .current a {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu .current span {
  background:url('images/menu_pointer.gif') top center no-repeat;
height:17px;
}

This is what the images look like:

menu area background The menu area background, which repeats along the x axis.

Menu item background The “dark box” that envelops each “current” or “hover” menu item

Menu pointer And the pointer.

As you can see, the dark box is as tall as a menu item plus the pointer and the pointer is the same height. They’re both transparent where they overlap and the pointer includes a bit of the green tube.

Overlapping background is a really powerful method of styling elements to make them look more complex than they actually are. It’s not *very* easy and you’ll notice the need for some IE 6 fixes and some weird height definitions that seem to make no sense. I know, I still can’t really explain some of it. But the truth is that the menu looks perfect in IE6, IE7 and Firefox for Windows as well as in Safari and Firefox for the Mac.

Glossy “web 2.0” button Photoshop tutorial

Glossy buttons are still all the rage. Actually, anything that has a gloss on it will look cool, especially if you add a little reflexion to it.

I’ve seen a fair share of tutorials on this and I still think I may have a bit to add, from my own experience. So, to add a little extra something, here’s a glossy button Photoshop tutorial that’s really easy to do, uses only one layer with effects and even nicer: it allows you to quickly change the color of the button.

Here we go. Start by creating an empyt RGB 72 dpi file, I chose a 400×400 px working area, filled with white:

Open a new 400×400 document

Then, hit your rounded rectangle tool (U, or shift+U to cycle through the various shape tools), and give it a 20 px radius.

Choose the rounded rectangle tool with 20px radius

Time to draw your button shape. Pick a foreground colour and draw the button.

I used blue, #4F6F9E for the colour and 250×96 px for the button size. It’s quite a big button, but you can make smaller ones with the same effect.

Create your button shape

OK, now the fun part. Double-click on the right-hand side of the name of your shape 1 layer to access your layer effects. (Sorry, the screenshot says “right-click”, its a mistake, I’ll fix it asap).

Access the layer FX

Go to “drop shadow” and configure it like the image below. We’ll use a 90 degree shadow. I hate seeing those glossy buttons with a top glow and an oblique shadow: makes no sense. Remember to try to make sense. Where’s your light source? Above? Good, then shadow goes in the bottom.

Set your drop shadow

So far, it’ll look unimpressive:

Not quite glossy yet…

So go to gradient overlay to really lay down some gloss on this baby.

You’re going to want to click on whatever gradient is there by default, to edit that and replace it with this:

Your brand new gradient overlay.

Now, that’s a bit hard to make out, so here it goes: You need five markers on top (the alpha settings), and five on the bottom (the colour settings). By default, Photoshop will have a black to white gradient on there, so add three markers on top and three on the bottom.

Then, click on each marker and modify its values, thusly:

Alpha markers:

  1. opacity: 90%; location: 0%
  2. opacity: 40%; location: 46%
  3. opacity: 0%; location: 47%
  4. opacity: 95%; location: 86%
  5. opacity: 95%; location: 100%

Colour markers:

  1. colour: white; location: 0%
  2. colour: white; location: 46%
  3. colour: black; location: 47%
  4. colour: black; location: 86%
  5. colour: black; location: 100%

That’s it, you can hit ok and get ready to mess with the overlay settings, like so:

Adjust overlay settings

Notice the important bit: blend mode is set to overlay; this will allow you to change the colour of your button with lots of flexibility. Only a few colours won’t work at all. You can also design the whole gradient in reverse and not have to hit “reverse”, but I like it the hard way 🙂

Right! All that work payed off, because now you should have this:

Gloooooooossy!

That could be it, but a stroke adds a bit of solidity to it, so go into the layer fx, activate the stroke option and change it around like this:

Stroke it

Notice the red circle? That’s where you should pick the colour for your stroke from. More or less 1/4 of the way up the button you just created.

And that’s it. You can add some text to it. I’ve added the word “gloss”, using “Calibri”, changed the fill alpha to around 80%, added a 2px stroke the same colour as the button’s and a 1px distance 2px size inner shadow.

Done!

And what’s better… if you double click the colour swatch on your button shape, you can now happily change the button’s colour and alll you have to do is adjust the stroke’s colour in the end (that’s easy: just pick from 1/4 of the way up the button).

Double click the swatch to change the colour.

Here are a few examples. Have fun!

Lots of colour!