11选5投注技巧:漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu

作者:网络 来源:佚名 更新时间:2011-01-10 15:53:17 点击:

安徽25选5直播 www.by7yj.cn 漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu,firefox3.6运行正常,ie6不支持css3,谨慎使用

In this article we are  trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Lets create the html used.

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>

<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>

 

Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}

 

The CSS code for the menu item.

ul {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }

ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

ul li a:hover {
    background: transparent none;
}

ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

 

  • 柳斌杰:加强文化担当同样是企业不可缺少的社会责任 2019-04-23
  • 世界上海拔最高的无人超市将落户拉萨 2019-04-23
  • 市第六十六中学举办“防治结核病”讲座 2019-04-22
  • 邢台财富家园小区物业乱收费已解决 2019-04-22
  • 《生逢灿烂的日子》:把最好的北京献给你 2019-04-22
  • 中共上海十届市委六次全会召开 2019-04-22
  • 生活-热门标签-华商生活 2019-04-21
  • 这里把贫困搬迁户当成“宝” 河北灵寿县的扶贫新探索 2019-04-21
  • 商务部新闻发言人就美白宫6月18日声明发表谈话 2019-04-21
  • 坚决改全面改彻底改立即改!林彬杨到这两个地方现场督导环保督察反馈问题整改工作 2019-04-20
  • 年轻的“老黄牛”——记淮安清浦大队参谋储能 2019-04-20
  • 抓住了!云南文山脱逃嫌疑人七小时后在城内被抓获 2019-04-19
  • 李丽珠:沉到基层 脚踏实地干工作 2019-04-19
  • 比利时并不轻松地击败巴拿马 2019-04-18
  • 紫光阁中共中央国家机关工作委员会 2019-04-18
  • 384| 824| 397| 542| 650| 948| 256| 675| 950| 703|