CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文，介绍了使用CSS3制作切角的Tabs，觉得特有意思。其中含量最高的并不是其如何实现的Tabs，而是其中如何使用CSS3来制作切角效果，如：

随着Web技术的日新月异，CSS3的技术也越来越多的出现于Web的页面中了，大家目前看到的最多就是圆角Border-radius技术。今天主要和大家一起跟随Red来学习如何使用CSS3的Gradients技术来制作切角效果。下面我们先来看其效果的实现过程，今天我们主要关注的一点——CSS3的Gradients制作切角。

HTML Markup

<ul class="uiTabs">
 <li><a href="#" title="tab1" class="current">Tab1</a></li>
 <li><a href="#" title="tab2">Tab2</a></li>
 <li><a href="#" title="tab3">Tab3</a></li>
 <li><a href="#" title="tab4">Tab4</a></li>
</ul>
<div id="uiTabContent">
 <div id="tab1">content for tab1</div>
 <div id="tab2">content for tab2</div>
 <div id="tab3">content for tab3</div>
 <div id="tab4">content for tab4</div> 
</div>

和往常一样，第一步的目的就是创建一个清洁而又有语义的HTML结构，这里我们使用ul来制作Tabs的每一项，而使用div来制作相对应的内容块。

CSS Code

有子一个好的完整的结构，需要给他应用一个样式，具体请看代码：

.uiTabs {
overflow: auto;
width: 100%;
margin: 0;
padding: 0;
}

.uiTabs li {
margin: 0;
padding: 0;
float: left;
list-style: none outside none;
}

.uiTabs a {
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}

.uiTabs a:hover	{
background: #c93434;
background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}

.uiTabs a:focus	{
outline: 0;
}

.uiTabs a.current {
background: #fff;
background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px); text-shadow: none;
color: #333;
}

#uiTabContent{
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; 
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
color: #444;
}

上面的样式中，我们使用了好多个CSS3的属性，比如border-radius制作圆角，box-shadow制作阴影、text-shadow制作文字阴影、gradient制作背景等等，如果你对CSS3有浓厚的兴趣，你可以点击这里阅读更多有关于CSS3的知识。

jQuery Code

现在样式之类都完成了，我们需要完成的是功能，也就是Tabs的功能，点击了就会隐藏相对应的内容，比如说你点了"tab1"对应显示“content for tab1”，当然也有“hover”下的效果，下在我们一起来看这两种效果的jQuery如何写。

1、Click效果：

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//载入页面时，只显示第一个uiTabContent，其他隐藏
$('#uiTabContent div:not(:first)').hide();
//给tabs绑定click事件
$('.uiTabs a').click(function(e){
//将a.current中的类名移除
$('.current').removeClass('current');
//点击的a元素加上类名current
$(this).addClass('current');
//uiTabContent内容隐藏起来
$('#uiTabContent div').hide('fast');
var $showContent = $(this).attr('title');
//显示对标签对应的内容
$('#' + $showContent).show('fast');	
e.preventDefault();	 
});	 
});
</script>

2、hover效果

$(document).ready(function(){
$('#uiTabContent div:not(:first)').hide();
$('.uiTabs a').hover(function(){
if ($(this).hasClass('current')) return;
$('.current').removeClass('current');
$(this).addClass('current');
$('#uiTabContent div').hide('fast');
var $showContent = $(this).attr('title');
$('#' + $showContent).show('fast');
});
});

上面jQuery的效果可能代码写得不理想，对于jQuery或js的高手而言，但目前偶只能写到这样的水平，高手见笑了，有更好的方法，小生更是求之不得呀。

如果运行上面的代码，效果就能在浏览器看到了，上面的代码在各浏览器下都能正常运行，唯一不同的是其外观有所不同，主要是因为浏览器对CSS的支持不一样。

实现切角效果，主要运用了CSS3的gradient的线性渐变的旋转角度，大家可以看前面我们在其中运用到的代码：

background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);

<div class="gradientDemo" style="padding: 30px;">
<div class="beveledRT">Test Beveled right top</div> 
<div class="beveled">test Beveled</div>
<div class="round">test Round</div>
</div>

/*Beveled corners & negative border-radius with CSS3 gradients*/
.gradientDemo div {
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
margin: 20px auto;
}

.beveledRT {
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
} 

.beveled {
background: #c00; /* fallback */
background:
-moz-linear-gradient(45deg, transparent 10px, #c00 10px),
-moz-linear-gradient(135deg, transparent 10px, #c00 10px),
-moz-linear-gradient(225deg, transparent 10px, #c00 10px),
-moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #c00 10px),
-o-linear-gradient(135deg, transparent 10px, #c00 10px),
-o-linear-gradient(225deg, transparent 10px, #c00 10px),
-o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}

.beveled,.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}

效果大家可以点击Demo查看：

怎么样，没讲得太深，意在看代码，从中发现其特别之处，如果你感兴趣可以阅读Lea Verou写的《Beveled corners & negative border-radius with CSS3 gradients》一文，不过我建议自己动手，才有收获。

最后在次非常感谢Red和Lea Verou给我们带来这么好的东东。同时希望您能喜欢这篇文章，如果您有任何疑问，意见或建议可以直接和我联系或通过下面的评论给我留言。

转自：W3CPLUS