Question to say "I can!"

用CSS 3制作的漂亮导航

2011-07-15

Demo

image

看起来不错吧,全部都是使用css实现的。

在firefox和chrome能得到最佳效果,CSS 3中的圆角和渐变不被IE支持。

HTML

        <div  id="nav">
            <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Portfolio</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
            </ul>
        </div>

 

CSS

#nav ul{

        padding: 0;

        margin: 0;

        list-style: none;}

#nav li{ float: left;}

        
#nav a{

    float: left;

    color: #eee;

    margin: 0 5px;

    padding: 3px;

    text-decoration: none;

    border: 1px solid #831608;

    font: bold 14px Arial, Helvetica;

    background-color: #831608;

    background-image: -moz-linear-gradient(#bb413b, #831608);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

    background-image: -webkit-linear-gradient(#bb413b, #831608);

    background-image: -o-linear-gradient(#bb413b, #831608);

    background-image: -ms-linear-gradient(#bb413b, #831608);

    background-image: linear-gradient(#bb413b, #831608);

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    text-shadow: 0 -1px 0 rgba(0,0,0,.8);

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

#nav a:hover{

    background-color: #bb413b;

    background-image: -moz-linear-gradient(#831608, #bb413b);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));

    background-image: -webkit-linear-gradient(#831608, #bb413b);

    background-image: -o-linear-gradient(#831608, #bb413b);

    background-image: -ms-linear-gradient(#831608, #bb413b);

    background-image: linear-gradient(#831608, #bb413b);

}

#nav a:active{

    background: #bb413b;

    position: relative;

    top: 2px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

}

#nav span{

    border: 1px dashed #eba1a3;

    display: inline-block;

    padding: 4px 15px;

    cursor: pointer;

    background-color: #bb413b;

    background-image: -moz-linear-gradient(#d4463c, #aa2618);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));

    background-image: -webkit-linear-gradient(#d4463c, #aa2618);

    background-image: -o-linear-gradient(#d4463c, #aa2618);

    background-image: -ms-linear-gradient(#d4463c, #aa2618);

    background-image: linear-gradient(#d4463c, #aa2618);

}

#nav a:hover span{

    background-color: #bb413b;

    background-image: -moz-linear-gradient(#aa2618, #d4463c);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));

    background-image: -webkit-linear-gradient(#aa2618, #d4463c);

    background-image: -o-linear-gradient(#aa2618, #d4463c);

    background-image: -ms-linear-gradient(#aa2618, #d4463c);

    background-image: linear-gradient(#aa2618, #d4463c);

}

VIA: Sexy CSS3 menu

原文:用CSS 3制作的漂亮导航
作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*