这是apple.com的很漂亮的导航栏:
如果用Firebug仔细研究一下,就会发现这个导航栏的实现用了4张图片。如下图:
现在随着css3的脚步越来越近,我在想用光用css3能不能实现上面的效果呢?下面就是我用纯css3实现的导航,一点都没有用到图片。
当然肯定跟原版的有些差距,我很难把握原来的渐变颜色,但是基本的风格还是一直的。
实现过程
首先,html代码:
<li><a href='#'>Store</a></li>
<li><a href='#'>Mac</a></li>
<li><a href='#'>iPod</a></li>
<li><a href='#'>iPhone</a></li>
<li><a href='#'>iPad</a></li>
<li><a href='#'>iTune</a></li>
<li class='last'><a href='#'>Support</a></li>
</ul>
就是利用这样一段简单的代码,加上神奇的css3,就能实现apple style了。
然后:样式化
分析一下苹果网站的那个导航栏,都有哪些元素?圆角,渐变,阴影,文字内嵌的效果,分隔符也有点外发光的效果。这些效果大部分都可以用css3来实现。
先给出整个css的代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
#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版的苹果风格导航栏就完成了!
这样的实现跟原版还有个很大的区别,就是没有翻转效果。但是这个效果实现了,翻转效果也就不难了,同样的道理嘛