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:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 汽车股票推荐 最笨最赚钱的炒股方法 青海福彩快3 钢铁板块股票分析 湖北十一选五走势一定牛 万马股份股票行情走 湖北30选5app 股市趋势技术分析在线阅读 广东十分快乐开奖直播 上证指数一直跌说明什么 今日排列三 急速赛车技巧 福彩12基本走势图 配资开户 北京pk赛车预测网 免费 沪深配资