CSS3+jQuery制作切角的Tabs
发布于
大漠
今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文，介绍了使用CSS3制作切角的Tabs，觉得特有意思。其中含量最高的并不是其如何实现的Tabs，而是其中如何使用CSS3来制作切角效果，如：
随着Web技术的日新月异，CSS3的技术也越来越多的出现于Web的页面中了，大家目前看到的最多就是圆角Border-radius技术。今天主要和大家一起跟随Red来学习如何使用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);
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制作的。下面我们一起来看看是如何制作？
实现切角效果，主要运用了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);
我们同时也可以使用CSS3的gradient和径向渐变来制作圆角效果等，我们一起来看Lea Verou在《Beveled corners & negative border-radius with CSS3 gradients》提供同时制作四个切角的代码：
<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>
CSS Code
/*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》一文，不过我建议自己动手，才有收获，而且Lea Verou在这里给我们提供了一些用CSS3的gradient制作的一些CSS3 Patterns，非常神，而且也非常有意思。
最后在次非常感谢Red和Lea Verou给我们带来这么好的东东。同时希望您能喜欢这篇文章，如果您有任何疑问，意见或建议可以直接和我联系或通过下面的评论给我留言。我会第一时间与您一起探讨相关方面的知识，最后在次感谢您对W3CPLUS的关注。
如需转载烦请注明出处：W3CPLUS
Jordan Jumpman Pro AJ12.5