Blog

First of all, I’d like to apologize (again!) for my lack of updates. I know I promised you guys new themes. Believe me, I’m working on them on my spare time. Unfortunately, spare time is a luxury for me these days.

So, to make up for it, allow me to give you a short tutorial on creating mouse-over graphics without using Javascripts. I’ve seen this effect in action through sites featured in CSS galleries. And frankly, I had some difficulty finding a tutorial on them—maybe because I just don’t know which keywords to use. Hehe

If you’ve been reading my personal blog, you’ll notice that I recently did a design make-over. I kept the mouse-over effect, but this time, I used CSS for it—not Javascript.

You’re probably used to seeing simple mouse-over effects like this. It changes color when your mouse is over it. This is a simple effect, and you can even dress it up a bit by putting a background image behind it or something. But what if you wanted to use some fancy font for your link? A fancy font that isn’t available in all computers?

Usually, the solution is Javascript. But not really 🙂 It’s still possible to use CSS.

This is going to be our finished product. As you can see, the links are images. The text has a drop-shadow effect, something that can’t be done using CSS only without bleeding your brains out. This isn’t difficult, promise.

STEP 1: Create the graphics
This is very important, though self-explanatory. Obviously, you need to create the graphics! Take note though, you need to create two graphics for each button: one for the normal state, and the other for the over state:

The normal state

The over state

STEP 2: Setup the button container
You need to determine first whether you want a horizontal or vertical menu. For the purpose of this tutorial, let’s make us of a horizontal one. Here’s what you need to do:

1. Determine the width and the height of the graphic you created. In our example, the width is 200 pixels while the height is 51 pixels.
2. Take note if you want the menu to be coming from the right or from the left side. For this tutorial, we’ll pick left.
3. Setup the CSS! Pick a name for your button container. I’m corny, I’ll chose “button.”


.button {
     width:200px;
     height:51px;
     margin:0px;
     padding:0px;
     float:left;
}


What this will do is to “stack” your buttons from left to right, hence creating a horizontal menu.

STEP 3: Create the common style for links
As much as possible, I don’t like re-typing styles over and over again. Besides, it’s best to take advantage of the “cascading” feature of CSS—it applies styles on top of others. That’s what we’ll do. For this, we’ll create a common specification for all button links. And since we’re going to be using the .button style as a DIV tag, the following code will tell our CSS, “for all links contained inside the DIV with the .button class, apply these specifications.”

Here’s the code. You add this under the .button code on top on your CSS file:

.button a {
     display:block;
     width:200px;
     height:51px;
     margin:0px;;
     padding:0px;
     text-decoration:none;
     background-repeat:no-repeat;
     border-bottom:none;
}

Don’t forget to put “display:block;” It’s very important. Else, your button graphic won’t show.

STEP 4: Specify the graphic backgrounds for each of the links
Since we’ve already specified almost all of the styles we’ll be applying for each of the links, we will only need to change the Normal state graphic, and the Over state graphic. You don’t need to repeat the other styles all over again.

The thing is, you have to create a different link class for each. One for Home, another for About, etc.

Take a look, it goes like this:

a.home {background-image:url(button1.gif);}
a.home:hover {background-image:url(button1-over.gif);}


a.about {background-image:url(button2.gif);}
a.about:hover {background-image:url(button2-over.gif);}

That way, when you apply these classes on a link, it’s going to show the appropriate image background.

STEP 5: Put everything together in HTML
Once you got the CSS done, it’s time for us to write the HTML markup. Here’s how it’s going to look within the “” tag.

As you can see, we made a space into a link. That’s actually the secret behind it all 🙂 Since it’s not going to show any text, the graphic used as the background image of the link will show through.

Take a look at the sample here. If you’re too lazy, I’m giving you permission to just copy the source of that page 😛

Well, hope that helps!