炫意html5
中国最早CSS3和HTML5移动开发技术网站之一

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制作的。下面我们一起来看看是如何制作?
 

 

实现切角效果,主要运用了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》一文,不过我建议自己动手,才有收获。

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

转自:W3CPLUS

炫意HTML5 » CSS3+jQuery制作切角的Tabs

分享到:更多 ()

html5游戏css3教程