用css3实现一个苹果风格的导航菜单
2010-04-09 09:58
555 查看
这是apple.com的很漂亮的导航栏:
代码
<style>
#nav{
margin:100px auto;
width:850px;
height:40px;
/*渐变*/
background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
/*圆角*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*阴影*/
box-shadow:#b1b1b1 1px 1px;
-moz-box-shadow:#b1b1b1 0 1px 2px;
-webkit-box-shadow:#b1b1b1 0 1px 2px;
}
#nav li{
float:left;
/*padding:0 40px;*/
width:110px;
text-align:center;
list-style:none;
height:40px;
line-height:40px;
border-right:1px solid #999999;
}
#nav li.last{
border:none;
}
#nav a{
text-decoration:none;
color:#262626;
font-weight:600;
font-size:13px;
font-family:"Segoe UI",Helvetica,sans-serif;
/*文本阴影*/
text-shadow:#e8e8e8 0 1px 1px;
}
</style>
第一步: 给ul和li设置一下样式,先形成导航栏的基本样子。
#nav{ margin:100px auto; width:850px; height:40px;} (#nav是ul的id)
#nav li{ float:left; width:110px; text-align:center; list-style:none; height:40px; line-height:40px;}
#nav a{ text-decoration:none; color:#262626; font-weight:600; font-size:13px; font-family:"Segoe UI",Helvetica,sans-serif;}
因为我们是根据苹果的风格来的,所以在字体,字号的设置上也是以接近苹果风格为目标。
第二步:实现渐变颜色效果
#nav{
...
background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
...}
如果这些css3语法不太清除的话可以参考这里:你应该知道的基本的css技巧 或是 css技巧
通过-moz-和-webkit-可以看出来,这个效果只能在firefox,chrome,safari中实现,至于ie,只能期待ie9了。
第三步:实现圆角效果
#nav{
...
-moz-border-radius:5px;
-webkit-border-radius:5px;
...}
第四步:实现导航的阴影
#nav{
....
box-shadow:#b1b1b1 1px 1px;
-moz-box-shadow:#b1b1b1 0 1px 2px;
-webkit-box-shadow:#b1b1b1 0 1px 2px;}
第五步:文字内嵌效果
#nav a{
....
text-shadow:#e8e8e8 0 1px 1px;
...}
第六步:分隔线
#nav li{
...
border-right:1px solid #999999;}
秉着不写没用的代码的原则,我这里用的是给li加右边框。这样就不可能实现像apple.com的那样有点微微外发光的效果了。我认为为了性能,牺牲一些视觉效果是合算的。但是要想实现苹果那样有点立体感的效果,我觉得可以通过给给li元素加背景图片实现。
这样一个css3版的苹果风格导航栏就完成了!
这样的实现跟原版还有个很大的区别,就是没有翻转效果。但是这个效果实现了,翻转效果也就不难了,同样的道理嘛
代码
<style>
#nav{
margin:100px auto;
width:850px;
height:40px;
/*渐变*/
background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
/*圆角*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*阴影*/
box-shadow:#b1b1b1 1px 1px;
-moz-box-shadow:#b1b1b1 0 1px 2px;
-webkit-box-shadow:#b1b1b1 0 1px 2px;
}
#nav li{
float:left;
/*padding:0 40px;*/
width:110px;
text-align:center;
list-style:none;
height:40px;
line-height:40px;
border-right:1px solid #999999;
}
#nav li.last{
border:none;
}
#nav a{
text-decoration:none;
color:#262626;
font-weight:600;
font-size:13px;
font-family:"Segoe UI",Helvetica,sans-serif;
/*文本阴影*/
text-shadow:#e8e8e8 0 1px 1px;
}
</style>
第一步: 给ul和li设置一下样式,先形成导航栏的基本样子。
#nav{ margin:100px auto; width:850px; height:40px;} (#nav是ul的id)
#nav li{ float:left; width:110px; text-align:center; list-style:none; height:40px; line-height:40px;}
#nav a{ text-decoration:none; color:#262626; font-weight:600; font-size:13px; font-family:"Segoe UI",Helvetica,sans-serif;}
因为我们是根据苹果的风格来的,所以在字体,字号的设置上也是以接近苹果风格为目标。
第二步:实现渐变颜色效果
#nav{
...
background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
...}
如果这些css3语法不太清除的话可以参考这里:你应该知道的基本的css技巧 或是 css技巧
通过-moz-和-webkit-可以看出来,这个效果只能在firefox,chrome,safari中实现,至于ie,只能期待ie9了。
第三步:实现圆角效果
#nav{
...
-moz-border-radius:5px;
-webkit-border-radius:5px;
...}
第四步:实现导航的阴影
#nav{
....
box-shadow:#b1b1b1 1px 1px;
-moz-box-shadow:#b1b1b1 0 1px 2px;
-webkit-box-shadow:#b1b1b1 0 1px 2px;}
第五步:文字内嵌效果
#nav a{
....
text-shadow:#e8e8e8 0 1px 1px;
...}
第六步:分隔线
#nav li{
...
border-right:1px solid #999999;}
秉着不写没用的代码的原则,我这里用的是给li加右边框。这样就不可能实现像apple.com的那样有点微微外发光的效果了。我认为为了性能,牺牲一些视觉效果是合算的。但是要想实现苹果那样有点立体感的效果,我觉得可以通过给给li元素加背景图片实现。
这样一个css3版的苹果风格导航栏就完成了!
这样的实现跟原版还有个很大的区别,就是没有翻转效果。但是这个效果实现了,翻转效果也就不难了,同样的道理嘛
相关文章推荐
- 用CSS3实现Win8风格的方格导航菜单效果
- 用css实现了一个精致的纵向导航菜单
- css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
- css3和jquery实现的可折叠导航菜单(适合手机网页)
- CSS3实现3D旋转菜单导航
- 纯CSS3实现手风琴风格菜单具体步骤
- jQuery+CSS实现一个侧滑导航菜单代码
- 一款纯css3实现的环形导航菜单
- jquery和css3实现的很酷的菜单导航
- jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
- 通过css3实现的动画导航菜单代码
- 7款风格新颖的jQuery/CSS3菜单导航分享
- 一款纯css3实现的环形导航菜单
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- drupal6 站点上如何实现一个标签(tags)菜单导航区块(block)
- jQuery实现类似标签风格的导航菜单效果代码
- div+css实现蓝色vista风格css导航菜单效果
- css3实例教程 一款纯css3实现的环形导航菜单
- 纯css3实现的动画导航菜单
- 7款风格新颖的jQuery/CSS3菜单导航分享