Vista风格CSS菜单
After seeing an amazing design tutorial on PSDTUTS for a [url=http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/][color=#800080]Vista Style menu design[/color][/url] （二楼）a decided to give it ago and turn their design into reality. Well I’ve built it and it looks pretty good (see the [url=http://www.andrewsellick.com/examples/vista-menu/][color=#800080]css vista menu demo[/color][/url]) so I thought I would share how I did it with the world.[img=258,42]http://www.andrewsellick.com/wp-content/uploads/Image/vista.gif[/img]
step oneCreate a PSD of the menu as details in the PSDTUTS article linked above.
step twoCut out the images required for the menu design and save them to an images folder at the root of your site. The required images are as follows:
[list][*]A one pixel wide image of the background of the menu. (nav-bg.gif)[*]A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)[*]An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)[/list][img=370,104]http://www.andrewsellick.com/wp-content/uploads/Image/vista-items.gif[/img]
step threeBuild the HTML structure:
<div id="main-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<div class="clear-both"> </div>
</div>
As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".
HTML wise that is it really. Just drop this in to the body of the site.
step fourNow we need to style the menu using the images we previously cut out as detailed below:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
}
#main-nav{
height:29px;
float:left;
background-image:url(../images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
The code above sets the default font and font size for the body of the document. You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.
The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
Next we need to remove the default padding/margin and bullets applied to unordered lists.
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(../images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side. Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other. In this example the width is fixed to 80px but this is very much up to you and your design. A line-height si also set to equal the applied height forcing the text to vertically align to the middle.
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(../images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
Now we need to style the "a" tag itself. Again it has been given the same width and height as the li tag and floated left. This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6. Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li.active a,
#main-nav li a:hover{
background-image:url(../images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
Finally we need to add the link styling and active/hover states. The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.
Now all you need to do is check it out in your browser. Enjoy..
demoCheck out the [url=http://www.andrewsellick.com/examples/vista-menu/][color=#800080]CSS Vista Menu Demo[/color][/url] for yourself.
download[url=http://www.andrewsellick.com/examples/vista-menu/vista-menu.rar][color=#0000ff]Download the CSS Vista Menu[/color][/url].
[[i] 本帖最后由 solaxi 于 2008-6-7 16:37 编辑 [/i]] [url=http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/][img]http://psdtuts.s3.amazonaws.com/40_Vista/vista200.jpg[/img][/url] [url=http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/]
[/url]
Step 1
Open a new canvas that is [b][i]600x335px[/i][/b]. Begin by showing rulers ([b][i]View>Rulers[/i][/b]) then create two guides similar to below. Create one at [b][i]285px[/i][/b] and the other at [b][i]310px[/i][/b].
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-1.jpg[/img]
Step 2
Create a [b][i]Rectangle (U)[/i][/b] that fills the lower ruled area and label the layer “lower bar”. Open up the [b][i]Effects Menu[/i][/b] for the layer. Navigate to the [b][i]Gradient Overlay[/i][/b] property and apply a gradient between #000000 and #0c0c0c at 90 degrees.
Now create another rectangle in the upper rules area and name the layer “upper bar”. Again open up the effects menu and apply a [b][i]Gradient Overlay[/i][/b] between [b][i]#35393d[/i][/b] and [b][i]#787b7d[/i][/b] at [b][i]90 degrees[/i][/b]. Select the two rectangles created so far and change the [b][i]Opacity to 90%[/i][/b]. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-2.jpg[/img]
Step 3
The next step is to add a highlight to the menu using the [b][i]Line Tool (U)[/i][/b]. Select the Line Tool and change the weight to [b][i]2px[/i][/b]. Draw a line across the bar and change the colour to [b][i]#9fa2a4[/i][/b]. Rename this layer to “lower highlight”. Now draw another line directly above the previous and change the colour to [b][i]#484b4d[/i][/b] and change the name to “upper highlight”. Group these layers with bar layers in a group called “bar”. This stage completes the basis of the menu.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-3.jpg[/img]
Step 4Now that the menu bar is complete, we can now create a set of dividers to go between the text. Select the Line Tool again and leave the weight at [b][i]2px[/i][/b]. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a [b][i]Gradient Overlay[/i][/b] at [b][i]90 degrees[/i][/b] between [b][i]#676a6d[/i][/b] and [b][i]#4d6672[/i][/b]. Label this layer “upper divider”.
Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to [b][i]#43474b[/i][/b]. Rename this layer to “lower divider”. Group the two sections of the divider and name the group “divider”.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-4.jpg[/img]
Step 5Select the [b][i]Type Tool (T)[/i][/b] and change the colour to white ([b][i]#FFFFFF[/i][/b]). The font I chose to use for the menu is called [i]Segoe UI[/i] because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement [i]Arial [/i]will do. Set the size to [b][i]11pt[/i][/b] and type your links out, spacing them evenly. Group them together and name the group “links”.
Now copy your dividers and space them in between the links. You should end up with something similar to this.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-5.jpg[/img]
Step 6Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colourful or scenic will do.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-background.jpg[/img]
Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-6.jpg[/img]
Step 7
This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.
First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the [b][i]Rounded Rectangle Tool (U)[/i][/b] draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.
Rasterize the layer and then using the [b][i]Magic Wand Tool (W)[/i][/b] select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called “blur”.
Paste the shape in the layer called “blur” and then apply a [b][i]Gaussian Blur[/i][/b] of [b][i]5px[/i][/b] ([b][i]Filter>Blur>Gaussian Blur[/i][/b]). Then apply a [b][i]Drop Shadow[/i][/b] as shown below.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-7.jpg[/img]
Step 8
Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a [b][i]Drop Shadow[/i][/b] and a [b][i]Gradient [/i][/b]as well. This produces a modern looking text that has a striking look.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-8.jpg[/img]
Step 9
This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large [b][i]Ellipse (U)[/i][/b] that fills the area between the dividers. Change the color of the ellipse to [b][i]#5c94c5[/i][/b] and apply a [b][i]Gaussian blur[/i][/b] of [b][i]10px[/i][/b]. The shape has now become a raster layer, and you can clean up the excess blur by using the [b][i]Marquee Tool (M)[/i][/b].
[img]http://psdtuts.s3.amazonaws.com/40_Vista/vstep-9.jpg[/img]
Conclusion
This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web based menu with hover states.
[img]http://psdtuts.s3.amazonaws.com/40_Vista/conclusion.jpg[/img] 看不太懂 :) :cool: 不错的。 COOL *** 作者被禁止或删除 内容自动屏蔽 ***
页:
[1]