现代 CSS

CSS3+jQuery制作切角的Tabs

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

今天在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);
			 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的支持不一样。

现在效果出来了,大家肯定会问,不是说要看如何制作切角效果吗?怎么没有看见呢,是的,其实我们的切角效果就是使用CSS3gradient制作的。下面我们一起来看看是如何制作?

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

			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);
		

我们同时也可以使用CSS3gradient和径向渐变来制作圆角效果等,我们一起来看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这里给我们提供了一些用CSS3gradient制作的一些CSS3 Patterns,非常神,而且也非常有意思。

最后在次非常感谢RedLea Verou给我们带来这么好的东东。同时希望您能喜欢这篇文章,如果您有任何疑问,意见或建议可以直接和我联系或通过下面的评论给我留言。我会第一时间与您一起探讨相关方面的知识,最后在次感谢您对W3CPLUS的关注。

如需转载烦请注明出处:W3CPLUS

Jordan Jumpman Pro AJ12.5
返回顶部