www.mattginsberg.net » CSS Tutorials

Tutorial: Coding the Apple’s Navigation Bar (Part 2 of 2)

Matt Ginsberg — Tue, 20 Oct 2009 04:01:47 +0000

In part one of this tutorial, I showed you how to create the navigation bar from Apple’s website in Photoshop. In this tutorial, I will show you how to code the navigation bar in CSS. It is really easy so sit back, read over this tutorial, then open up your editing tool and get started (I used dream weaver).

Step One

In part one you were left off by putting the hover part under the normal stage and saving it as one file. Here is the image for reference.

Click image to view full size. You may right click it and save it if you wish. If you followed the first tutorial, just open you image. You want to measure each link. Below is an image to clarify what I mean.

Once you write those numbers down, we can begin.

Step Two

The CSS

Let’s explain the CSS as best we can.
We have a total of eight spaces, however, only 7 will be links and the last one will be the search field. Each state is the width of each link then we have the hover state which is taking the bottom of the image (-35px – rememebr, this image is 70px high in total) and creating the hover effect. The larger numbers in the hover effect, are the numbers that start from the left hand side of our image and go outward. This will create the hover effect because it all lines up from the top to the bottom of our image.

Step Three

The HTML

search form here

Let’s explain the HTML as best we can.
The HTML consists of only the ul and li commands. Since this is pure CSS, all we need to do is create the simple commands to call the CSS to our image.

Test it out

There you have it. Feel free to leave a comment with any question’s or trouble’s you come across.

Tutorial: Design the Apple’s Navigation Bar (Part 1 of 2)

Matt Ginsberg — Sat, 17 Oct 2009 04:01:30 +0000

Anyone who has an iPod, iPhone, or any other Apple product more than likely has visited there website to get some sort of details on the product you will purchase. I do not have any of Apple’s products, but I do visit their website often because I love the look of it. So, in this tutorial, I will help you create the Apple’s navigation bar. In part one of two, I will design the actual navigation bar in Photoshop.

Step One

Open up Photoshop, create a new document and make it 1000 pixels wide by 47 pixel high.

Step Two

Click the Rounded Rectange Tool, , choose 4 for the radius, and make your shape. I used a red background to make it easier to see. I have this:
(Click image for full view)

Step Three

Add the following effects to the nav bar.

Gradient Overlay

Click image for full view.

Step Four

Add the Apple logo and the text. Use this for the apple logo. For the text, I used Veranda set at 11 pts and bold. Set it up to leave enough room at the right for the search field. The search field will be added in the part 2.
(Click image for full view)

Step Five

Add the following blending options to the text. This will be used for the ‘normal’ state.

Drop Shadow

Step Six

Make a new folder and put in the three layers you have right now. Name this folder normal.

Close the folder, drag to to the new layer icon, and name the new folder hover.

Step Seven (see edit’s at the bottom)

Open up the hover folder and make change to the blending options to the third layer (the nav bar).

Inner Shadow

Gradient Overlay

Now change the follow of the font to black. Change the drop shadow to white.
(click image for full view)

(This is wrong, please see updates at the bottom)

Step Eight

Add the lines that separate the links. Add a two new layers above the hover folder. The first layer will be a line from top to bottom in 6a6a6a. And two lines next to it (in the second layer) in white. Make the first layers opacity 42% and the second layer 9%.

Then make copies of them and move them over so they are between the rest of the links.

Click images to view larger.

Step Eight

Save the normal state and the hover state as png’s. Once you do that, you want to turn them into one image. Make the hover effect under the normal state. You new image will look like this (its ONE image):

Edit to Step Seven

I found that my Step Seven looks identical to Apple’s ‘active’ link. Therefore, I am glad you saved that, however, that was for the active stage. Apply the following settings to the nav bar layer for the hover stage:

Tutorial: Draggable Div with Open and Close Links.

Matt Ginsberg — Sat, 26 Sep 2009 04:01:53 +0000

If you read my first draggable div tutorial, you would know that I had planned to show you how to add a close and open function for this. So within this tutorial, I plan to show you what the old code looked like, and how to add the two extra functions. At the bottom of the tutorial you will see a link to view it in action.

Here is the full code from the previous tutorial:
See it in action.

Untitled Document
click in this region then move your mouse around Once you move it, then click on the mouse again to release it.... very easy and cool. This is perfect for advertising, or a website with stats.

Now, it is very simple to add the open and close functions to this.
You want to add this into the Javascript code:

function closeit(){document.getElementById("maindiv").style.display="none"} function loadwindow(){document.getElementById("maindiv").style.display="block"}

Your full Javascript code should look like this:

You now want to add the close div link into your HTML. To close the div, use the following HTML code:
Make sure to enter this code inside of the maindiv.

close this div

You now want to add the open div link into your HTML. To open the div, use the following HTML code:
Make sure this code is not inside of the maindiv.

Load Div

Here is the full code with the open and close links:

Draggable Div
click in this region then move your mouse around Once you move it, then click on the mouse again to release it.... very easy and cool. This is perfect for advertising, or a website with stats. close this div
Load Div

See it in action.

Tutorial: Draggable Div

Matt Ginsberg — Fri, 25 Sep 2009 04:01:06 +0000

Creating a div is, as you already (should) know, is very easy. A div is a great way to layout a website for many reasons. In this tutorial, I will show you how to create a div that lays on top of your content, and then the user can move it around the screen as they see fit. Also, you can see how to add a link within your website that will open the div and a link to close it. If you want to learn more, read this tutorial.

The first thing you want to do is create a new HTML file, or use a file that you are working with right now. You want to add the following CSS to the stylesheet. If you do have the stylesheet, be sure not to include the . If you do not have an external stylesheet, add the below after the head section and before the body section.

Next you want to add the Javascript. Below is the code.

Now you want to put the following code in the script like so:

<body onMouseMove="mousepos(event)" >

And finally, enter the following HTML code into the body section of your website.

click in this region then move your mouse around Once you move it, then click on the mouse again to release it.... very easy and cool. This is perfect for advertising, or a website with stats.

Here is the full code:

Untitled Document
click in this region then move your mouse around Once you move it, then click on the mouse again to release it.... very easy and cool. This is perfect for advertising, or a website with stats.

See it in action.

Tutorial: Image Rollover in CSS

Matt Ginsberg — Sun, 02 Aug 2009 04:01:07 +0000

When designing a website, you may want to use your own custom made buttons. However, in the older days, you would write a lot of HTML code just to get the rollover to work. Sometimes, it wasn’t even worth the trouble. But with the new days of CSS – life is much easier. This tutorial will describe, and show you how to do a rollover effect with using CSS. This would be perfect if you have an image gallery in your website, menu buttons, or whatever you decide to use it on. Most of you know what this would be like when doing normal text, but with an image, you can do just about anything.

First, you need to create a graphic that you want to use. You may use mine if you wish.

This graphic contains the original state, and the roll over state in one image. The total size of this image is 80 x 50 Pixels.

Why is this better than two images?
If you use two images, then the website needs to load both images. Whereas in this example, when the website loads, it loads the entire image, but only shows the original state, not the roll over stats.

Here is the CSS – put this in your stylesheet.

Let’s look at the CSS:

+ #button a – our button will be a link, therefore we use a
+ display: block – makes it possible to click on the whole block of the element
+ background: url(http://www.mattginsberg.net/blog/wp-content/uploads/2009/07/113.jpg) top – our rollover graphic
+ width: – width of our object
+ height: – height of our object, but only for one state, that’s why it’s 25 pixels.

Put the following code in your document to place the roll over button:

Test it: