[CSS3技术]CSS3切角选项卡tabs

[tr][td]




今天你将学习如何创建使用CSS3渐变技术实现切角的选项卡tabs。




HTML
 

 
[*]One
 
[*]Two
 
[*]Three
 
[*]Four

 

 One - content

 Two - content

 Three - content

 Four - content



 
CSS
tabs
{
 overflow: auto;
 width: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
}
 
#tabs li
{
 margin: 0;
 padding: 0;
 float: left;
}
 
#tabs 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;
}
 
#tabs 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);
}
 
#tabs a:focus
{
 outline: 0;
}
 
#tabs #current a
{
 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;
}
 
#content
{
 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;
}
 
/* Remove the rule below if you want the content to be "organic" */
#content div
{
 height: 220px;
}
 
jQuery

$(document).ready(function() {
 $("#content div").hide(); // Initially hide all content
 $("#tabs li:first").attr("id","current"); // Activate first tab
 $("#content div:first").fadeIn(); // Show first tab content
 
 $('#tabs a').click(function(e) {
 e.preventDefault();
 $("#content div").hide(); //Hide all content
 $("#tabs li").attr("id",""); //Reset id's
 $(this).parent().attr("id","current"); // Activate this
 $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
 });
})();
[/td][/tr]