apple menu bar

[calebm12]

does anyone know a good tutorial on how to create a similar menu bar as apple is using.

i cant seem to create the same sort of lines it has making the buttons.

[tZ]

Search CSS Sprite. Thats is the name of the method.

It frustrates me that I can't find the bookmark from the accredited creator, but for your purposes this should be equally as useful: http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

[calebm12]

thanks for the posting. being new to css it is very useful...i know i am behind the times...but i also just bought a flat screen tv..ha...just the way i "roll" i guess. ha.
anyhow...my post was more curious about the actual graphic design element. i can seem to repeat the look of the a metal sheet with lines inscribed into it making the buttons. i found a short tutorial showing me how to do the text, but nothing on the acutal bar. http://www.bittbox.com/illustrator/quick-tip-beveled-text-without-filters-or-effects/
any ideas how this is accomplished. politics aside, john mccain's site has the same sorta thing. on his i can reporoduce the masking element, but once again can seem to reproduce the lines that create the buttons. his site is http://www.johnmccain.com/

any ideas!?!?
thanks again from the sprite link..i have always wondered how i could accomplish rollover technique without all the images.

c

[shalom_m]

It should be quite simple.
The actual method depends on the graphic software you have.

Most can do it.
Define one color say #808080 as background
another say #c0c0c0 as foreground

Look for something called gradient properties and choose background to foreground.

Fill with gradient.

This is the result you will get: http://mandelbaumonline.net/csspop/b2f.png

If you can do it on your own, do so. If not, PM me with the 2 colors you want and the width and height to use and I will send you the file.

[calebm12]

i got the gradient part. it is the lines breaking up the buttons. is it just a grey line with a solid white dropshadow??

[shalom_m]

I still cant quite understand where you are heading too.

Here are 4 examples, which is the nearest?

http://mandelbaumonline.net/csspop/b2f1.png

[calebm12]

i think example c is. which i think was exactly what i just tried. let me guess: dark line (1pt) with a white line behind it barely nudged out to the left?

or did you do it differently?

[shalom_m]

Nearly!

Lighter line #dddddd, you may want to try it even lighter #eeeeee
Darker line #404040
Both lines 1 px

[bazman]

http://www.realflairdesign.co.uk/graphicdesignforum/apple_button.jpg

I donwloaded the buttons and took a close look.

Here is how they did it in Photoshop

Gradient you know.

Select a 1 px line with marquee tool top to bottom and on a new layer fill black and opacity 10%. Select a 1px line next to black line and fill white.