css3选项卡标题样式设计1

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

css3选项卡标题样式设计1

说起来惭愧,这个实例以前看起来的时候,看得莫名其妙,一时云里雾里。于是静下心来仔细研究下,才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了,各位firebug就可以知道了,设置的height是为0,然后line-height为30px,其实这个还不是关键,关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-colo来改变的,至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作,加上上一个实例,不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊,人家这才是高水平的应用。

demodownload

css主要代码:

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 40px;
  height: 0; 
  line-height: 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777\9;
  opacity: .3;
  filter: alpha(opacity=30);	  
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #2ac7e1;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #3d3d3d;
  opacity: 1;
  filter: alpha(opacity=100);	  
}

demodownload

查看更多:http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery

jordan shoes for sale outlet epic

如需转载,烦请注明出处:https://www.w3cplus.com/demo/407.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部