这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单，其实制作也非常的简单的，主要就是径向渐变的运用，以及@font-face实现的ICON效果，当然其中也离开不其他属性的点缀效果，比如说box-shadow制作的阴影，transition制作的动画效果等。

demodownload

HTML CODE

<button type="button" class="button">twitter</button>
<button type="button" class="button">github</button>

CSS CODE

body {
　background: -webkit-radial-gradient(#fcfdfd,#9ca3a6);
  background: -moz-radial-gradient(#fcfdfd,#9ca3a6);
  background: -ms-radial-gradient(#fcfdfd,#9ca3a6);
  background: -o-radial-gradient(#fcfdfd,#9ca3a6);
  background: radial-gradient(#fcfdfd,#9ca3a6);
}
.demo {
  width: 400px;
  text-align: center;
  margin:80px auto 0;
}
.button {
  position: relative;
  font-size: 0;
  width: 100px;
  height: 100px;
  text-align: center;
  margin-right: 50px;
  border-radius: 50%;
  border:none;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  background: -webkit-linear-gradient(top,#fff,#d5dbe1);
  background: -moz-linear-gradient(top,#fff,#d5dbe1);
  background: -ms-linear-gradient(top,#fff,#d5dbe1);
  background: -o-linear-gradient(top,#fff,#d5dbe1);
  background: linear-gradient(top,#fff,#d5dbe1);
  -webkit-transition: all .13s ease-out;
  -moz-transition: all .13s ease-out;
  -o-transition: all .13s ease-out;
  transition: all .13s ease-out;
}
.button:after {
  display: inline-block;
  font-family: 'icomoon';
  font-size: 24px;
  color: #bdc0c1;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 64px;
  line-height: 64px;
  margin: 10px;
  border-radius: 32px;
  border: 1px solid #efefef;
　box-shadow: -1px 0 0 #dbdcdd,1px 0 0 #dbdcdd,0 1px 0 #d0d1d2,0 0 8px #fff;
　background: -webkit-linear-gradient(top left,#fcfcfc 50%,#dfe4e8);
}
.button:first-child:after {
　content: "\21";
}
.button:last-child:after {
　content: "\25";
}
.button:hover:after {
　color: #19a6e4;
　box-shadow: 0 1px 3px #d7d8d9 inset;
　background: -webkit-radial-gradient(#dbeef8 ,#f2f4f6 50%);
}
.button:active {
　top: 3px;
　box-shadow: 0 1px 3px #d7d8d9 inset;
}
@font-face {
　font-family: 'icomoon';
　src:url('fonts/icomoon.eot');
　src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	url('fonts/icomoon.svg#icomoon') format('svg'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype');
　font-weight: normal;
　font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/social-media-buttons.html

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的，今天看到这个效果很有意思，特意扒过来与大家分享。整个效果是ＣＳＳ３使用了Bootstrap的Font Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的ＣＳＳ３属性有：nth-child()选择器，gradient制作渐变效果，@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗？没试过请继续吧！

demodownload

HTML CODE

<div id="colorNav">
  <ul>
    <li class="green">
      <a href="#" class="icon-home"></a>
      <ul>
        <li><a href="#">Back to the tutorial</a></li>
        <li><a href="#">Get help</a></li>
        <li><a href="#">Download this example</a></li>
      </ul>
    </li>
    <li class="red">
      <a href="#" class="icon-cogs"></a>
      <ul>
        <li><a href="#">Payment</a></li>
        <li><a href="#">Notifications</a></li>
        <li><a href="#">Privacy options</a></li>
        <li><a href="#">Account Settings</a></li>
      </ul>
    </li>
    <li class="blue">
      <a href="#" class="icon-twitter"></a>
      <ul>
        <li><a href="#">Follow us on Twitter</a></li>
        <li><a href="#">Find us on Facebook</a></li>
      </ul>
    </li>
    <li class="yellow">
      <a href="#" class="icon-beaker"></a>
      <ul>
        <li><a href="#">PHP tutorials</a></li>
        <li><a href="#">jQuery techniques</a></li>
        <li><a href="#">CSS articles</a></li>
        <li><a href="#">Everything else</a></li>
      </ul>
    </li>
    <li class="purple">
      <a href="#" class="icon-envelope"></a>
      <ul>
        <li><a href="#">Contact us</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS CODE

#colorNav > ul{
　width: 450px; /* Increase when adding more menu items */
　margin:50px auto;
}

#colorNav > ul > li{ /* will style only the top level li */
　list-style: none;
　box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
　display: inline-block;
　line-height: 1;
　margin: 1px;
　border-radius: 3px;
　position:relative;
}

#colorNav > ul > li > a{
　color:inherit;
　text-decoration:none !important;
　font-size:24px;
　padding: 25px;
}

#colorNav li ul{
　position:absolute;
　list-style:none;
　text-align:center;
　width:180px;
　left:50%;
　margin-left:-90px;
　top:70px;
　font:bold 12px 'Open Sans Condensed', sans-serif;	
　/* This is important for the show/hide CSS animation */
　max-height:0px;
　overflow:hidden;	
　-webkit-transition:max-height 0.4s linear;
　-moz-transition:max-height 0.4s linear;
　-o-transition:max-height 0.4s linear;
　-ms-transition:max-height 0.4s linear;
　transition:max-height 0.4s linear;
}

#colorNav li ul li{
　background-color:#313131;
}
#colorNav li ul li a{
　padding:12px;
　color:#fff !important;
　text-decoration:none !important;
　display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
　background-color:#363636;
}
#colorNav li ul li:hover{
　background-color:#444;
}
#colorNav li ul li:first-child{
　border-radius:3px 3px 0 0;
　margin-top:25px;
　position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
　content:'';
　position:absolute;
　width:1px;
　height:1px;
　border:5px solid transparent;
　border-bottom-color:#313131;
　left:50%;
　top:-10px;
　margin-left:-5px;
}

#colorNav li ul li:last-child{
　border-radius: 0 0 3px 3px;
}
#colorNav li ul li:only-child{
　border-radius: 3px;
}
/* This will trigger the CSS */
/* transition animation on hover */

#colorNav li:hover ul{
　max-height:200px; /* Increase when adding more dropdown items */
}


/*----------------------------
	Color Themes
-----------------------------*/


#colorNav li.green{
　/* This is the color of the menu item */
　background-color:#00c08b;

　/* This is the color of the icon */
　color:#127a5d;
}

#colorNav li.red{background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{background-color:#df6dc2;color:#9f3c85;}

特别声明：此案例大部分代码来自于：http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

demodownload

详细教程：http://tutorialzine.com/2012/10/css3-dropdown-menu/

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-dropdown-menu.html

这个案例是使用了ＣＳＳ３制作了六种不同风格的checkbox效果。表单的checkbox自定义效果，在webkit内核下，我们可以随心所意的进行自定义样式的美化，但在其他浏览器下还是有些麻烦，早期使用jQuery插件或者别的JavaScript脚本代码来实现，今天的ＣＳＳ３属性能让你解决这个难题。当然你要知道制作的思路，不然还是有难度的。在整个效果中，最关键的是标签的配合以及":before"和“:after”等ＣＳＳ３选择器的应用，特别声明一下，由于input的伪类选择器在部分浏览器下还不支持，所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果，详细的请看藤藤是怎么制作的吧。

demodownload

HTML CODE

<div class="black_form">
  <form action="">
    <div class="clearfix">
      <span class="check">
        <input type="checkbox" id="check" name="check" class="check" checked="checked" />
        <label for="check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="rec_swith">
        <input type="checkbox" id="rec_swith" name="rec_swith" class="rec_swith" checked="checked" />
        <label for="rec_swith"></label>
      </span>
    </div>
    <div class="clearfix">
      <span class="round_swith">
        <input type="checkbox" id="round_swith" name="round_swith" class="round_swith" checked="checked" />
        <label for="round_swith"></label>
      </span>
    </div>
    <div class="clearfix">
      <span class="rocker_swith">
        <input type="checkbox" id="rocker_swith" name="rocker_swith" class="rocker_swith" checked="checked" />
        <label for="rocker_swith"><em></em></label>
      </span>	
    </div>
  </form>
</div><!--/black_form-->
<div class="white_form">
  <form action="">
    <div class="clearfix">
      <span class="wheels_check">
        <input type="checkbox" id="wheels_check" name="wheels_check" class="wheels_check" checked="checked" />
        <label for="wheels_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check inner_check">
        <input type="checkbox" id="inner_check" name="inner_check" class="inner_check" checked="checked" />
        <label for="inner_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check rectangle_check">
        <input type="checkbox" id="rectangle_check" name="rectangle_check" class="rectangle_check" checked="checked" />
        <label for="rectangle_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check rectangle_inner_check">
        <input type="checkbox" id="rectangle_inner_check" name="rectangle_inner_check" class="rectangle_inner_check" checked="checked" />
        <label for="rectangle_inner_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
  </form>
</div><!--/white_form-->

CSS CODE

body {
　background-color: #272425;
}	
.demo {
　margin: 40px auto 0;
　width: 100px;
}	
.demo div {
　margin-top: 60px;	
}
.demo .white_form {
　margin-top: 120px;
}
.demo div span {
　position: relative;
　display: block;
}
.demo div span label ,
input[type="checkbox"] + label em {
　position: absolute;
　display: block;
　cursor: pointer;
}
input[type="checkbox"] {
　position: absolute;
　display: block;
　width: 100%;
　height: 100%;
　top: 0;
　left: 0;
　margin:0;
　cursor: pointer;
}
input[type="checkbox"] + label:after,
input[type="checkbox"] + label:before {
　position: absolute;
  display: block;
  content: "";
}
span.check input[type="checkbox"] + label em {
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  box-shadow: 0 1px 2px #97999b inset,0 3px 3px #0f0f0f;
  background-image: -webkit-linear-gradient(top,#424549,#1c1e20);
  background-image: -moz-linear-gradient(top,#424549,#1c1e20);
  background-image: -ms-linear-gradient(top,#424549,#1c1e20);
  background-image: -o-linear-gradient(top,#424549,#1c1e20);
  background-image: linear-gradient(top,#424549,#1c1e20);   
　margin-left:37px;
　z-index: 2;
　-webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
　-o-transition: .85s;
　transition: .85s;
}
span.check input[type=checkbox]:checked + label em {
　margin-left:0;
}
span.check input[type="checkbox"] + label {
　width: 60px;
　height: 22px;
　border-radius: 11px;
　box-shadow: 0 0 5px rgba(0,0,0,.8) inset,
　　　　　　　　0 0 12px rgba(0,0,0,.9) inset,
　　　　　　　　3px 4px 4px rgba(255,255,255,.055),
　　　　　　　　-3px 4px 4px rgba(255,255,255,.055),
　　　　　　　　-4px 3px 4px rgba(255,255,255,.055),
　　　　　　　　4px 3px 4px rgba(255,255,255,.055),
　　　　　　　　0 5px 0 rgba(255,255,255,.045),
　　　　　　　　0 0 0 5px #0e0e0e;
　background-image: -webkit-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-webkit-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -moz-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-moz-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -ms-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-ms-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -o-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-o-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),linear-gradient(left, #2e9c0c 50%, #e71300 50%);					
　background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 60px 0;
  -webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}					
span.check input[type="checkbox"]:checked + label{
　background-position: 0 0, 0 0;
}
span.check input[type="checkbox"] + label:after {
　content: attr(data-off);
　top:0;
　left: 0;
　color: #590000;
　font-size: 12px;
　font-weight: bold;
　text-shadow: 0 1px 0 #d44949;
　width: 24px;
  height: 24px;
　line-height: 22px;
　padding-left: 7px;
}
span.check input[type="checkbox"]:checked + label:after {
　content: attr(data-on);
　color: #0c1c00;
　text-shadow: 0 1px 0 #60ad32;
　padding-left: 33px;
}

span.rec_swith {
　width: 80px;
　height: 22px;
　border-radius: 15px;
　border: 2px solid #101010;
　box-shadow: 0 0 0 5px #1a1a1a,-1px -1px 0 #111111,1px 1px 0 #2e2c2d;
　background-image: -webkit-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -moz-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -ms-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -o-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
}
span.rec_swith input[type="checkbox"] + label {
　top: 0;
　left: -1px;
  width: 64px;
  height: 22px;
  color: #575757;
  text-shadow:-1px -1px 0 #7a7a7a,1px 1px 0 #7a7a7a;
  text-align: right;
  border-radius: 11px;
  border-left: 1px solid #414141;
  border-right: 2px solid #b9b9b9;
  background-image: -webkit-linear-gradient(left,#393939,#939393);
  background-image: -moz-linear-gradient(left,#393939,#939393);
  background-image: -ms-linear-gradient(left,#393939,#939393);
  background-image: -o-linear-gradient(left,#393939,#939393);
  background-image: linear-gradient(left,#393939,#939393);
  -webkit-transition: left .05s ease-in-out;
  -moz-transition: left .05s ease-in-out;
  -ms-transition: left .05s ease-in-out;
  -o-transition: left .05s ease-in-out;
　transition: left .05s ease-in-out;
}
span.rec_swith input[type="checkbox"] + label:after {
　top: 8px;
　right: 5px;
  width: 10px;
  height: 3px;
  border-radius: 3px;
  border: 1px solid #575757;
  box-shadow: 0 0 1px 1px #767676;
  background-color: #878787;
}
span.rec_swith input[type="checkbox"]:checked + label {
　left: 10px;
}
span.rec_swith input[type="checkbox"]:checked + label:after {
  border: 1px solid #264104;
  box-shadow: 0 0 1px 1px #afba90;
  background-color: #008c01;
}

span.round_swith {
　width: 50px;
　height: 50px;
　border-radius: 25px;
　border: 1px solid #636363;
　box-shadow: 0 5px 8px rgba(0,0,0,.26),	0 0 0 5px #ebebeb,0 0 2px 7px rgba(0,0,0,.23),0 6px 9px rgba(0,0,0,1);
　background-image: -webkit-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -moz-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -ms-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -o-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: linear-gradient(left,#767676,#eaeaea 48%,#767676);
}
span.round_swith input[type="checkbox"] + label {
　top:1px;
　left: 0;
　width: 50px;
　height: 44px;
　border-radius: 22px;
　background-image:-webkit-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-moz-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-ms-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-o-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:linear-gradient(top,#a5a5a5,#ebebeb);
　-webkit-transition: top .05s ease-in-out;
  -moz-transition: top .05s ease-in-out;
　-ms-transition: top .05s ease-in-out;
　-o-transition: top .05s ease-in-out;
　transition: top .05s ease-in-out;
}
span.round_swith input[type="checkbox"] + label:after {
　bottom: 2px;
　left: 20px;
　width: 10px;
　height: 8px;
　border-radius: 4px;
　border: 1px solid #470100;
　box-shadow: 0 -1px 3px rgba(0,0,0,.9) inset;
　background-image: -webkit-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -moz-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -ms-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -o-linear-gradient(top,#cd0000,#ff1a00);
　background-image: linear-gradient(top,#cd0000,#ff1a00);
}
span.round_swith input[type="checkbox"]:checked + label {
　top:6px;
}
span.round_swith input[type="checkbox"]:checked + label:after {
　border:1px solid #1e4a07;
　box-shadow: 0 -1px 3px rgba(0,0,0,.9) inset;
　background-image: -webkit-linear-gradient(top,#8ac000,#91cb00);
　background-image: -moz-linear-gradient(top,#8ac000,#91cb00);
　background-image: -ms-linear-gradient(top,#8ac000,#91cb00);
　background-image: -o-linear-gradient(top,#8ac000,#91cb00);
　background-image: linear-gradient(top,#8ac000,#91cb00);
}

span.rocker_swith input[type="checkbox"] + label {
　width: 60px;
　height: 26px;
　text-align: center;
　border-radius: 13px;	
　box-shadow: 0 1px 1px rgba(0,0,0,.4) inset,
　　　　　　　　0 -2px 3px rgba(0,0,0,.6) inset,
　　　　　　　　3px 4px 4px rgba(255,255,255,.055), 
　　　　　　　　-3px 4px 4px rgba(255,255,255,.055), 
　　　　　　　　-4px 3px 4px rgba(255,255,255,.055), 
　　　　　　　　4px 3px 4px rgba(255,255,255,.055), 
　　　　　　　　0 5px 0 rgba(255,255,255,.045), 
　　　　　　　　0 0 0 5px #0e0e0e;
　background-image: -webkit-linear-gradient(top,#505050,#1d1d1d);
　background-image: -moz-linear-gradient(top,#505050,#1d1d1d);
　background-image: -ms-linear-gradient(top,#505050,#1d1d1d);
　background-image: -o-linear-gradient(top,#505050,#1d1d1d);
　background-image: linear-gradient(top,#505050,#1d1d1d);
}
span.rocker_swith input[type="checkbox"] + label:before,
span.rocker_swith input[type="checkbox"] + label:after {
　top: 8px;
　width: 10px;
　height: 10px;
　border-radius: 5px;
　border: 1px solid #121112;
　background: -webkit-radial-gradient(#494949,#0f0f0e);
　background: -moz-radial-gradient(#494949,#0f0f0e);
　background: -ms-radial-gradient(#494949,#0f0f0e);
　background: -o-radial-gradient(#494949,#0f0f0e);
　background: radial-gradient(#494949,#0f0f0e);
}
span.rocker_swith input[type="checkbox"] + label:before {
　left: -30px;
　border: 1px solid #380801;
　box-shadow: 0 0 9px #ff7059;
　background: -webkit-radial-gradient(#ec3d02,#8a040e);
　background: -moz-radial-gradient(#ec3d02,#8a040e);
　background: -ms-radial-gradient(#ec3d02,#8a040e);
　background: -o-radial-gradient(#ec3d02,#8a040e);
　background: radial-gradient(#ec3d02,#8a040e);
}
span.rocker_swith input[type="checkbox"] + label:after {
　right: -30px;
}

span.rocker_swith input[type="checkbox"]:checked + label:before {
　box-shadow: none;
　border-radius: 5px;
　border: 1px solid #121112;
　background: -webkit-radial-gradient(#494949,#0f0f0e);
　background: -moz-radial-gradient(#494949,#0f0f0e);
　background: -ms-radial-gradient(#494949,#0f0f0e);
　background: -o-radial-gradient(#494949,#0f0f0e);
　background: radial-gradient(#494949,#0f0f0e);
}
span.rocker_swith input[type="checkbox"]:checked + label:after {
　right: -30px;
　border: 1px solid #1c3600;
　box-shadow: 0 0 9px #abff59;
　background: -webkit-radial-gradient(#c9ff30,#488704);
　background: -moz-radial-gradient(#c9ff30,#488704);
　background: -ms-radial-gradient(#c9ff30,#488704);
　background: -o-radial-gradient(#c9ff30,#488704);
　background: radial-gradient(#c9ff30,#488704);
}
input[type="checkbox"][class="rocker_swith"] + label em {
　position: relative;
　display: inline-block;
　width: 18px;
　height: 18px;
　margin-top: 4px;
　border-radius: 9px;
　box-shadow: 0 1px 0 #3e3e3e,0 -1px 0 #101010;
　background: #292b2e;
}
input[type="checkbox"][class="rocker_swith"] + label em:after,
input[type="checkbox"][class="rocker_swith"] + label em:before {
　position: absolute;
　display: inline-block;
　content: "";
}
input[type="checkbox"][class="rocker_swith"] + label em:before {
　top: -3px;
　left: -20px;
　width: 34px;
　height: 24px;
　border-radius:5px 300px 300px 0 / 0 100px 100px 0;
　background: -webkit-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -moz-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -ms-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -o-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
}
input[type="checkbox"][class="rocker_swith"] + label em:after {
　top: -2px;
　left: -30px;
　width: 24px;
　height: 24px;
　border-radius: 12px;
　box-shadow: 0 -1px 0 #6b6b6b,0 1px 2px #000;
　background: -webkit-linear-gradient(left,#484c4f,#757778);
　background: -moz-linear-gradient(left,#484c4f,#757778);
　background: -ms-linear-gradient(left,#484c4f,#757778);
　background: -o-linear-gradient(left,#484c4f,#757778);
　background: linear-gradient(left,#484c4f,#757778);
}

input[type="checkbox"][class="rocker_swith"]:checked + label em {
　-webkit-transform:rotate(180deg);
　-moz-transform:rotate(180deg);
　-ms-transform:rotate(180deg);
　-o-transform:rotate(180deg);
　transform:rotate(180deg);
}
span.wheels_check input[type="checkbox"] + label {
　width: 60px;
　height: 22px;
　border-radius:11px;
　border:1px solid #922010;
　box-shadow: 0 1px 5px #922010 inset;
　background-image: -webkit-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-webkit-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: -moz-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-moz-linear-gradient(left, #7ce292 50%, #da8d83 50%);	
　background-image: -ms-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-ms-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: -o-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-o-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),	linear-gradient(left, #7ce292 50%, #da8d83 50%);					
　background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 60px 0;
  -webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}
span.wheels_check input[type="checkbox"]:checked + label {
　border:1px solid #055917;
　box-shadow: 0 1px 5px #055917 inset;
　background-position: 0 0, 0 0;
}
span.wheels_check input[type="checkbox"] + label em {
　width: 24px;
　height: 24px;
　top:-1px;
　z-index: 2;
　border-radius: 12px;
　box-shadow: -1px 0 0 #b6786f,1px 0 0 #999;
　background:  -webkit-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-webkit-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-webkit-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-webkit-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-webkit-radial-gradient(#fff,#f8f8f8);
　background:  -moz-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-moz-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-moz-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-moz-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-moz-radial-gradient(#fff,#f8f8f8);					
　background:  -ms-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-ms-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-ms-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-ms-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-ms-radial-gradient(#fff,#f8f8f8);						
　background:  -o-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-o-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-o-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-o-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-o-radial-gradient(#fff,#f8f8f8);					
　background:  linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　radial-gradient(#fff,#f8f8f8);					
　background-size: 12px 12px,12px 17px,12px 8px,12px 12px,100% 100%; 
　background-position: 0 0,-1px 7px,12px 12px,9px 0, 0 0;
　background-repeat: no-repeat;
　-webkit-transform: rotate(180deg) translateX(-38px);
　-moz-transform: rotate(180deg) translateX(-38px);
　-ms-transform: rotate(180deg) translateX(-38px);
　-o-transform: rotate(180deg) translateX(-38px);
　transform: rotate(180deg) translateX(-38px);
　-webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}
span.wheels_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(0);
  -moz-transform:translateX(0);
　-ms-transform:translateX(0);
　-o-transform:translateX(0);
　transform:translateX(0);
　box-shadow: -1px 0 0 #999,1px 0 0 #1d7f32;	
}
span.inner_check input[type="checkbox"] + label em {
　width: 20px;
　height: 20px;
　top: 1px;
　-webkit-transform: rotate(180deg) translateX(-39px);
　-moz-transform: rotate(180deg) translateX(-39px);
　-ms-transform: rotate(180deg) translateX(-39px);
　-o-transform: rotate(180deg) translateX(-39px);
　transform: rotate(180deg) translateX(-39px);
　-webkit-transition: .75s;
  -moz-transition: .75s;
  -ms-transition: .75s;
  -o-transition: .75s;
  transition: .75s;
}
span.inner_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(2px);
  -moz-transform:translateX(2px);
　-ms-transform:translateX(2px);
　-o-transform:translateX(2px);
　transform:translateX(2px);
}
span.rectangle_check input[type="checkbox"] + label,
span.rectangle_inner_check input[type="checkbox"] + label {
　width: 76px;
　height: 24px;
　border-radius: 3px;
}
.white_form span.rectangle_check input[type="checkbox"] + label em {
　width: 38px;
　height: 24px;
　top:-2px;
　left: -2px;
　border-radius: 3px;
　border:1px solid #e4e4e4;
　background-image: -webkit-linear-gradient(top,#fff,#c7c5c5);
　background-image: -moz-linear-gradient(top,#fff,#c7c5c5);
　background-image: -ms-linear-gradient(top,#fff,#c7c5c5);
　background-image: -o-linear-gradient(top,#fff,#c7c5c5);
　background-image: linear-gradient(top,#fff,#c7c5c5);
　background-size: 100%,100%;
　-webkit-transform:translateX(40px);
　-moz-transform:translateX(40px);
　-ms-transform:translateX(40px);
　-o-transform:translateX(40px);
　transform:translateX(40px);
}
.white_form span.rectangle_check input[type="checkbox"]:checked + label em,
.white_form span.rectangle_inner_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(0);
  -moz-transform:translateX(0);
　-ms-transform:translateX(0);
　-o-transform:translateX(0);
　transform:translateX(0);
}
.white_form span.rectangle_inner_check input[type="checkbox"] + label em {
　width: 38px;
　height: 20px;
　top:1px;
　left: 1px;
　border-radius: 3px;
　border:1px solid #e4e4e4;
　background-image: -webkit-linear-gradient(top,#fff,#c7c5c5);
　background-image: -moz-linear-gradient(top,#fff,#c7c5c5);
　background-image: -ms-linear-gradient(top,#fff,#c7c5c5);
　background-image: -o-linear-gradient(top,#fff,#c7c5c5);
　background-image: linear-gradient(top,#fff,#c7c5c5);
　background-size: 100%,100%;
　-webkit-transform:translateX(34px);
  -moz-transform:translateX(34px);
　-ms-transform:translateX(34px);
　-o-transform:translateX(34px);
　transform:translateX(34px);
}
.white_form input[type="checkbox"] + label:after {
　content: attr(data-off);
　top:0;
　left: 0;
　color: #a54234;
　font-size: 12px;
　font-weight: bold;
　text-shadow: 0 1px 0 #eebab3;
　width: 24px;
  height: 24px;
　line-height: 24px;
　padding-left: 7px;
}
.white_form input[type="checkbox"]:checked + label:after {
　content: attr(data-on);
　color: #0b8425;
　text-shadow: 0 1px 0 #fff;
　padding-left: 33px;
}
.white_form  .rectangle_check input[type="checkbox"]:checked + label:after,
.white_form  .rectangle_inner_check input[type="checkbox"]:checked + label:after {
　padding-left: 53px;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-checkbox.html

关于这个东西教程太多了，就不必自己再来整个了。

关于更多细节，你可以参考这篇文章：http://yslove.net/2009/07/css-specificity/

Codrops CSS3 Lightbox总供有三个效果，今天把最后一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，能把CSS3运用到如此完美，真是让人折服。最后一个案例与前两个Lightbox的效果上没有多大的区别，这一部如何制作，如果你观注了本站的相关案例，我想您是懂了，而这个效果与前两个不同之处是添加了向前向后播放的按钮效果。

demodownload

HTML CODE

<ul class="lb-album clearfix">
  <li>
    <a href="#image-1">
      <img src="images/thumbs/1.jpg" alt="image01">
      <span>Pointe</span>
    </a>
    <div class="lb-overlay" id="image-1">
      <img src="images/full/1.jpg" alt="image01" />
      <div>
        <h3>pointe <span>/point/</span></h3>
        <p>Dance performed on the tips of the toes</p>
        <a href="#image-10" class="lb-prev">Prev</a>
        <a href="#image-2" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-2">
      <img src="images/thumbs/2.jpg" alt="image02">
      <span>Port de bras</span>
    </a>
    <div class="lb-overlay" id="image-2">
      <img src="images/full/2.jpg" alt="image02" />
      <div>							
        <h3>port de bras <span>/ˌpôr də ˈbrä/</span></h3>
        <p>An exercise designed to develop graceful movement and disposition of the arms</p>
        <a href="#image-1" class="lb-prev">Prev</a>
        <a href="#image-3" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-3">
      <img src="images/thumbs/3.jpg" alt="image03">
      <span>Plié</span>
    </a>
    <div class="lb-overlay" id="image-3">
      <img src="images/full/3.jpg" alt="image03" />
      <div>							
        <h3>pli·é <span>/plēˈā/</span></h3>
        <p>A movement in which a dancer bends the knees and straightens them again</p>
        <a href="#image-2" class="lb-prev">Prev</a>
        <a href="#image-4" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-4">
      <img src="images/thumbs/4.jpg" alt="image04">
      <span>Adagio</span>
    </a>
    <div class="lb-overlay" id="image-4">
      <img src="images/full/4.jpg" alt="image04" />
      <div>							
        <h3>a·da·gio <span>/əˈdäjō/</span></h3>
			  <p>A movement or composition marked to be played adagio</p>
        <a href="#image-3" class="lb-prev">Prev</a>
        <a href="#image-5" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-5">
      <img src="images/thumbs/5.jpg" alt="image05">
      <span>Frappé</span>
    </a>
    <div class="lb-overlay" id="image-5">
      <img src="images/full/5.jpg" alt="image05" />
      <div>							
        <h3>frap·pé<span>/fraˈpā/</span></h3>
        <p>Involving a beating action of the toe of one foot against the ankle of the supporting leg</p>
        <a href="#image-4" class="lb-prev">Prev</a>
        <a href="#image-6" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-6">
      <img src="images/thumbs/6.jpg" alt="image06">
      <span>Glissade</span>
    </a>
    <div class="lb-overlay" id="image-6">
      <img src="images/full/6.jpg" alt="image06" />
      <div>							
        <h3>glis·sade <span>/gliˈsäd/</span></h3>
        <p>One leg is brushed outward from the body, which then takes the weight while the second leg is brushed in to meet it</p>
        <a href="#image-5" class="lb-prev">Prev</a>
        <a href="#image-7" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-7">
      <img src="images/thumbs/7.jpg" alt="image07">
      <span>Jeté</span>
    </a>
    <div class="lb-overlay" id="image-7">
      <img src="images/full/7.jpg" alt="image07" />
      <div>							
        <h3>je·té <span>/zhə-ˈtā/</span></h3>
        <p>A springing jump made from one foot to the other in any direction</p>
        <a href="#image-6" class="lb-prev">Prev</a>
        <a href="#image-8" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-8">
      <img src="images/thumbs/8.jpg" alt="image08">
      <span>Piqué</span>
    </a>
    <div class="lb-overlay" id="image-8">
      <img src="images/full/8.jpg" alt="image08" />
      <div>							
        <h3>pi·qué <span>/pēˈkā/</span></h3>
        <p>Strongly pointed toe of the lifted and extended leg sharply lowers to hit the floor then immediately rebounds upward</p>
        <a href="#image-7" class="lb-prev">Prev</a>
        <a href="#image-9" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-9">
      <img src="images/thumbs/9.jpg" alt="image09">
      <span>Arabesque</span>
    </a>
    <div class="lb-overlay" id="image-9">
      <img src="images/full/9.jpg" alt="image09" />
      <div>							
        <h3>ar·a·besque <span>/ˌarəˈbesk/</span></h3>
        <p>Position of the body supported on one leg, with the other leg extended behind the body with the knee straight</p>
        <a href="#image-8" class="lb-prev">Prev</a>
        <a href="#image-10" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li>
    <a href="#image-10">
      <img src="images/thumbs/10.jpg" alt="image10">
      <span>Ballerina</span>
    </a>
    <div class="lb-overlay" id="image-10">
      <img src="images/full/10.jpg" alt="image10" />
      <div>							
        <h3>bal·le·ri·na <span>/ˌbaləˈrēnə/</span></h3>
        <p>A female ballet dancer</p>
        <a href="#image-9" class="lb-prev">Prev</a>
        <a href="#image-1" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
</ul>

CSS CODE

body {
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  background: #FBF8F4 url(images/bg.jpg) repeat top left;
  font-weight: 400;
  font-size: 15px;
  color: #AA3E03;
  overflow-y: scroll;
}
@font-face {
  font-family: 'BebasNeueRegular';
  src: url('fonts/BebasNeue-webfont.eot');
  src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/BebasNeue-webfont.woff') format('woff'),
       url('fonts/BebasNeue-webfont.ttf') format('truetype'),
       url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.lb-album{
  width: 900px;
  margin: 0 auto;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
  float: left;
  margin: 5px;
  position: relative;
}
.lb-album li > a,
.lb-album li > a img{
  display: block;
}
.lb-album li > a{
  width: 150px;
  height: 150px;
  position: relative;
  padding: 10px;
  background: #f1d2c2;
  box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  border-radius:4px;
}
.lb-album li > a span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 150px;
  color: rgba(27,54,81,0.8);
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  font-size: 24px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
  width: 0px;
  height: 0px;
  position: fixed;
  overflow: hidden;
  left: 0px;
  top: 0px;
  padding: 0px;
  z-index: 99;
  text-align: center;
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
  position: relative;
  color: rgba(27,54,81,0.8);
  width: 550px;
  height: 80px;
  margin: 40px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
  padding: 0px 20px;
  width: 200px;
  height: 60px;
}
.lb-overlay div h3{
  font-size: 36px;
  float: left;
  text-align: right;
  border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
  font-size: 16px;
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  font-style: italic;
}
.lb-overlay div h3 span{
  display: block;
  line-height: 30px;
}
.lb-overlay div p{
  font-size: 14px;
  text-align: left;
  float: left;
  width: 260px;
}
.lb-overlay a.lb-close{
  background: rgba(27,54,81,0.8);
  z-index: 1001;
  color: #fff;
  position: absolute;
  top: 43px;
  left: 50%;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  width: 50px;
  height: 23px;
  overflow: hidden;
  margin-left: -25px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
  -webkit-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  -ms-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{
  text-indent: -9000px;
  position: absolute;
  top: -32px;
  width: 24px;
  height: 25px;
  left: 50%;
  opacity: 0.8;
  filter: alpha(opacity=80); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
  margin-left: -30px;
  background: transparent url(images/arrows.png) no-repeat top left;
}
.lb-next{
  margin-left: 6px;
  background: transparent url(images/arrows.png) no-repeat top right;
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
/* 
  100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
  http://bricss.net/post/11230266445/css-hack-to-target-opera 
*/
x:-o-prefocus, .lb-overlay img {
  height: 100%;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/codrops-css3-lightbox3.html

英文网址：CSS3 LIGHTBOX

今天的案例是个老案例，使用ＣＳＳ３代码来制作３D按钮效果，ｗ３ｃｐｌｕｓ有关于ｂｕｔｔｏｎｓ的介绍已经很多，如果你没有看过，不仿点击这里。今天藤藤给大家带来的还是一个系列的３D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各让我很折服，因为很多效果在ｐｓ中制作是容易，特别对于设计师来说更容易，但对于一名ｃｏｄｅｒ来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服，至少我已膜拜藤藤以ｃｓｓ３的了解，以及其对制作过程中的细节的追求。

demodownload

HTML CODE

<form action="">
　<div class="clearfix">
　　<a href="#" class="onload pink">DOWNLOAD</a>
　　<a href="#" class="search pink"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload purple">DOWNLOAD</a>
　　<a href="#" class="search purple"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload sky_blue">DOWNLOAD</a>
　　<a href="#" class="search sky_blue"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload green">DOWNLOAD</a>
　　<a href="#" class="search green"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload yellow">DOWNLOAD</a>
　　<a href="#" class="search yellow"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload orange">DOWNLOAD</a>
　　<a href="#" class="search orange"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload red">DOWNLOAD</a>
　　<a href="#" class="search red"></a>
　</div>
　<div class="clearfix">
　　<a href="#" class="onload gray">DOWNLOAD</a>
　　<a href="#" class="search gray"></a>
　</div>
</form>	

CSS　CODE

body {
 background: -webkit-radial-gradient(#fdfdfd,#e5e5e5);
 background: -moz-radial-gradient(#fdfdfd,#e5e5e5);
 background: -ms-radial-gradient(#fdfdfd,#e5e5e5);
 background: -o-radial-gradient(#fdfdfd,#e5e5e5);
 background: radial-gradient(#fdfdfd,#e5e5e5);
}		
.demo {
 width: 250px;
 margin: 80px auto 0;
}
.demo div {
 margin-bottom: 20px; 
}
.onload,
.search {
 position: relative;
 display: inline-block;
 line-height: 25px;
 padding: 10px 15px;
 border-radius: 5px;
 color: #fff;
 font-weight: bold;
 text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.onload {
 width: 130px;
 font-size: 14px;
}
.search {
 width: 30px;
 margin-left: 20px;
}
.onload:after,
.search:after {
 display: inline-block;
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\21";
 font-size: 20px;
 padding-left: 5px;
}
.onload:after {
 content: "\22";
 padding-left: 14px;
 margin-left: 14px;
}
.onload:before,
search:before {
 position: absolute;
 top: 0;
 right: 0;
 display: inline-block;
 content: "";
 width: 90px;
 height: 59px;
 background: -webkit-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -moz-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -ms-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -o-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
}
.onload:hover,
.search:hover {
 color: #fff;
 text-decoration: none;
}
.onload:active,
.search:active {
 top:8px;
 box-shadow: 0 1px 6px rgba(0,0,0,.2) inset;
}
.pink {
 border:1px solid #de73bd;
 box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d745a4,#bd368d);
 background: -moz-linear-gradient(top,#d745a4,#bd368d);
 background: -ms-linear-gradient(top,#d745a4,#bd368d);
 background: -o-linear-gradient(top,#d745a4,#bd368d);
 background: linear-gradient(top,#d745a4,#bd368d);
}
.onload.pink:after {
 box-shadow: -1px 0 0 #8f3879,-2px 0 0 #e691cd;
}
.pink:hover {
 background: -webkit-linear-gradient(top,#ea6abd,#bd368d);
 background: -moz-linear-gradient(top,#ea6abd,#bd368d);
 background: -ms-linear-gradient(top,#ea6abd,#bd368d);
 background: -o-linear-gradient(top,#ea6abd,#bd368d);
 background: linear-gradient(top,#ea6abd,#bd368d);
}
.pink:active {
 background: -webkit-linear-gradient(top,#bd368d,#bd368d);
 background: -moz-linear-gradient(top,#bd368d,#bd368d);
 background: -ms-linear-gradient(top,#bd368d,#bd368d);
 background: -o-linear-gradient(top,#bd368d,#bd368d);
 background: linear-gradient(top,#bd368d,#bd368d);
}
.purple {
 border:1px solid #b271e5;
 box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#9246d7,#8339c2);
 background: -moz-linear-gradient(top,#9246d7,#8339c2);
 background: -ms-linear-gradient(top,#9246d7,#8339c2);
 background: -o-linear-gradient(top,#9246d7,#8339c2);
 background: linear-gradient(top,#9246d7,#8339c2);
}
.onload.purple:after {
 box-shadow: -1px 0 0 #5d297b,-2px 0 0 #c998e7;
}
.purple:hover {
 background: -webkit-linear-gradient(top,#a35de6,#7733be);
 background: -moz-linear-gradient(top,#a35de6,#7733be);
 background: -ms-linear-gradient(top,#a35de6,#7733be);
 background: -o-linear-gradient(top,#a35de6,#7733be);
 background: linear-gradient(top,#a35de6,#7733be);
}
.purple:active {
 background: -webkit-linear-gradient(top,#8339c2,#8339c2);
 background: -moz-linear-gradient(top,#8339c2,#8339c2);
 background: -ms-linear-gradient(top,#8339c2,#8339c2);
 background: -o-linear-gradient(top,#8339c2,#8339c2);
 background: linear-gradient(top,#8339c2,#8339c2);
}
.sky_blue {
 border:1px solid #7cccff;
 box-shadow: 0 0 0 1px #007ac7,1px 5px 0 #007ac7,-1px 5px 0 #007ac7,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#4db5fe,#3c9be2);
 background: -moz-linear-gradient(top,#4db5fe,#3c9be2);
 background: -ms-linear-gradient(top,#4db5fe,#3c9be2);
 background: -o-linear-gradient(top,#4db5fe,#3c9be2);
 background: linear-gradient(top,#4db5fe,#3c9be2);
}
.onload.sky_blue:after {
 box-shadow: -1px 0 0 #2c6c7f,-2px 0 0 #99d5fa;
}
.sky_blue:hover {
 background: -webkit-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -moz-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -ms-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -o-linear-gradient(top,#76c6ff,#3c9ce4);
 background: linear-gradient(top,#76c6ff,#3c9ce4);
}
.sky_blue:active {
 background: -webkit-linear-gradient(top,#3c9be2,#3c9be2);
 background: -moz-linear-gradient(top,#3c9be2,#3c9be2);
 background: -ms-linear-gradient(top,#3c9be2,#3c9be2);
 background: -o-linear-gradient(top,#3c9be2,#3c9be2);
 background: linear-gradient(top,#3c9be2,#3c9be2);
}
.green {
 border:1px solid #9bcf60;
 box-shadow: 0 0 0 1px #469a44,1px 5px 0 #469a44,-1px 5px 0 #469a44,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#8dd845,#6fbb31);
 background: -moz-linear-gradient(top,#8dd845,#6fbb31);
 background: -ms-linear-gradient(top,#8dd845,#6fbb31);
 background: -o-linear-gradient(top,#8dd845,#6fbb31);
 background: linear-gradient(top,#8dd845,#6fbb31);
}
.onload.green:after {
 box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;
}
.green:hover {
 background: -webkit-linear-gradient(top,#9de15d,#74bf37);
 background: -moz-linear-gradient(top,#9de15d,#74bf37);
 background: -ms-linear-gradient(top,#9de15d,#74bf37);
 background: -o-linear-gradient(top,#9de15d,#74bf37);
 background: linear-gradient(top,#9de15d,#74bf37);
}
.green:active {
 background: -webkit-linear-gradient(top,#6fbb31,#6fbb31);
 background: -moz-linear-gradient(top,#6fbb31,#6fbb31);
 background: -ms-linear-gradient(top,#6fbb31,#6fbb31);
 background: -o-linear-gradient(top,#6fbb31,#6fbb31);
 background: linear-gradient(top,#6fbb31,#6fbb31);
}
.yellow {
 border:1px solid #e0e571;
 box-shadow: 0 0 0 1px #87883b,1px 5px 0 #87883b,-1px 5px 0 #87883b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d1d744,#bbbf39);
 background: -moz-linear-gradient(top,#d1d744,#bbbf39);
 background: -ms-linear-gradient(top,#d1d744,#bbbf39);
 background: -o-linear-gradient(top,#d1d744,#bbbf39);
 background: linear-gradient(top,#d1d744,#bbbf39);
}
.onload.yellow:after {
 box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;
}
.yellow:hover {
 background: -webkit-linear-gradient(top,#dadd50,#c0c442);
 background: -moz-linear-gradient(top,#dadd50,#c0c442);
 background: -ms-linear-gradient(top,#dadd50,#c0c442);
 background: -o-linear-gradient(top,#dadd50,#c0c442);
 background: linear-gradient(top,#dadd50,#c0c442);
}
.yellow:active {
 background: -webkit-linear-gradient(top,#bbbf39,#bbbf39);
 background: -moz-linear-gradient(top,#bbbf39,#bbbf39);
 background: -ms-linear-gradient(top,#bbbf39,#bbbf39);
 background: -o-linear-gradient(top,#bbbf39,#bbbf39);
 background: linear-gradient(top,#bbbf39,#bbbf39);
}
.orange {
 border:1px solid #e5bf76;
 box-shadow: 0 0 0 1px #88683b,1px 5px 0 #88683b,-1px 5px 0 #88683b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#e0b956,#bb8231);
 background: -moz-linear-gradient(top,#e0b956,#bb8231);
 background: -ms-linear-gradient(top,#e0b956,#bb8231);
 background: -o-linear-gradient(top,#e0b956,#bb8231);
 background: linear-gradient(top,#e0b956,#bb8231);
}
.onload.orange:after {
 box-shadow: -1px 0 0 #7e6a33,-2px 0 0 #e8ce98;
}
.orange:hover {
 background: -webkit-linear-gradient(top,#e7c369,#c18838);
 background: -moz-linear-gradient(top,#e7c369,#c18838);
 background: -ms-linear-gradient(top,#e7c369,#c18838);
 background: -o-linear-gradient(top,#e7c369,#c18838);
 background: linear-gradient(top,#e7c369,#c18838);
}
.orange:active {
 background: -webkit-linear-gradient(top,#bb8231,#bb8231);
 background: -moz-linear-gradient(top,#bb8231,#bb8231);
 background: -ms-linear-gradient(top,#bb8231,#bb8231);
 background: -o-linear-gradient(top,#bb8231,#bb8231);
 background: linear-gradient(top,#bb8231,#bb8231);
}
.red {
 border:1px solid #e57171;
 box-shadow: 0 0 0 1px #883b3b,1px 5px 0 #883b3b,-1px 5px 0 #883b3b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d74444,#c43a3a);
 background: -moz-linear-gradient(top,#d74444,#c43a3a);
 background: -ms-linear-gradient(top,#d74444,#c43a3a);
 background: -o-linear-gradient(top,#d74444,#c43a3a);
 background: linear-gradient(top,#d74444,#c43a3a);
}
.onload.red:after {
 box-shadow: -1px 0 0 #8b3737,-2px 0 0 #e69090;
}
.red:hover {
 background: -webkit-linear-gradient(top,#e25c5c,#cc4646);
 background: -moz-linear-gradient(top,#e25c5c,#cc4646);
 background: -ms-linear-gradient(top,#e25c5c,#cc4646);
 background: -o-linear-gradient(top,#e25c5c,#cc4646);
 background: linear-gradient(top,#e25c5c,#cc4646);
}
.orange:active {
 background: -webkit-linear-gradient(top,#c43a3a,#c43a3a);
 background: -moz-linear-gradient(top,#c43a3a,#c43a3a);
 background: -ms-linear-gradient(top,#c43a3a,#c43a3a);
 background: -o-linear-gradient(top,#c43a3a,#c43a3a);
 background: linear-gradient(top,#c43a3a,#c43a3a);
}
.gray {
 border:1px solid #d6d6d7;
 box-shadow: 0 0 0 1px #919191,1px 5px 0 #919191,-1px 5px 0 #919191,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#bdbebf,#ababac);
 background: -moz-linear-gradient(top,#bdbebf,#ababac);
 background: -ms-linear-gradient(top,#bdbebf,#ababac);
 background: -o-linear-gradient(top,#bdbebf,#ababac);
 background: linear-gradient(top,#bdbebf,#ababac);
}
.onload.gray:after {
 box-shadow: -1px 0 0 #7b7a7a,-2px 0 0 #dbdbdc;
}
.gray:hover {
 background: -webkit-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -moz-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -ms-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -o-linear-gradient(top,#cbcccd,#9e9fa0);
 background: linear-gradient(top,#cbcccd,#9e9fa0);
}
.gray:active {
 background: -webkit-linear-gradient(top,#ababac,#ababac);
 background: -moz-linear-gradient(top,#ababac,#ababac);
 background: -ms-linear-gradient(top,#ababac,#ababac);
 background: -o-linear-gradient(top,#ababac,#ababac);
 background: linear-gradient(top,#ababac,#ababac);
}
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('fonts/icomoon.svg#icomoon') format('svg'),
  url('fonts/icomoon.woff') format('woff'),
  url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-3d-buttons.html

因为本人css很烂很烂，而且水平超烂，所以不敢写特效来误导人，所以，99js手记，是一个纯javascript的频道，利用javascript的各种特性，实现精彩的效果~这一系列的js手记呢，定位的是初中级的js开发人员，目的是多多的写代码~而不是把时间都放在排页面上~在文章中，我会引用大量的资料，希望大家可以认真的阅读。我引用的大多是火狐开发者社区等这样的权威资料，希望大家也养成在上面查阅资料的习惯~

今天开篇，也非常高兴大家能捧场，今天实现一个很有意思的东东

目标： nth-child选择器。

nth-child选择器(不了解可以点这里)对css3与jquery了解的童鞋都应该知道这个选择器。他的语法是

element:nth-child(an + b) { style properties }

这里我们利用js模拟，目标是拿到一个元素集合，利用nthchild(元素集合，an + b)方法来获得想要的结果

一些例子：

1. nthchild(lista,2n+1),
2. nthchild(lista,2),
3. nthchild(lista,3n),
4. nthchild(lista,n+2),
5. nthchild(lista,-n+2)

思路：

1.选择器，:顾名思义，首先要有一个范围来选择，那么我们的范围自然就是前面的节点，比如span，或者是已经获取完毕的一个list.(补充知识:domlist，跟arguments(函数参数)一样，是一个类数组，这是啥意思呢？http://shifteleven.com/articles/2007/06/28/array-like-objects-in-javascript

1. 它具有下标[0][1][2],它可以取到length
2. 它没有数组的方法，这一点很重要

关于更多的知识可以看:

1. http://www.cr173.com/html/12597_1.html
2. http://tuoxie.me/blog/how-to-make-array-like-object-in-javascript

值得补充的是 jquery对象也是个类数组，虽然他有一些数组方法，但都是人为加上去的。扯远了。。

2.我们需要根据“输入”来确定参数。因为我们知道 nth-child(2n+1),nth-child(2), nth-child(3n), 等等的处理办法是完全不同的。这个技术最好的工具是:"正则表达式”由于正则表达式无比艰深，这里提供经典教程 30分钟掌握正则表达式- - http://manual.phpv.net/regular_expression.html利用正则表达式，我们希望获得的是 是否有n? 什么符号？数字是多少

3.分支处理，当我们获得nth-child内的参数后，我们就可以根据情况来处理了。分为以下几种：

1. 纯数字 2
2. 倍数 2n
3. 混合型 n+2,2n+1之类

4 处理思路:x*n+y,n从0开始++，当然(x*n+y)要>0那我们可以设结果是 index 则 x*n+y=indexn = (index-y) / x ; 也就是说 x可以整除 index-y那么，当result满足：(index-y) % x === 0 且n >= 0，就是符合条件的了.之后我们遍历所有节点，判断下数量即可~另外注意一点，nth-child里面是从1开始的，所以遍历的时候一定要记得序号从1开始！

5 处理结果: 选择器通常返回的是一个数组，那么我们应该也要返回一个数组。可以利用空数组的push()方法(参考http://www.w3cschool.cn/jsref_push.html)

实现

1.实现正则匹配参数:正则的写法技巧是“找通性，考虑特殊”。

我们分析一下共性跟特殊,2n+1,2,3n,-n+2,n-1共性：格式都是 数字*n +-数字 的形式;特殊 ：可能有负号，可能没有n.根据这个思路我写一个正则表达式。也欢迎大家写出更好的来~

(-?\d*)[n]*([+-]\d+)*

1. *表示前面的匹配 0-无数个
2. [n]就表示一个n啦
3. [+-]表示 一个“范围”就是说既有可能匹配加号，也有可能匹配减号
4. \d表示匹配一个数字
5. -? 表示 减号匹配0个或者一个，也就是说有可能有
6. \d+ 加号表示 匹配一个或者多个

加一个括号表示“捕获组” 这是啥意思呢，其实就是让电脑在内存里开几个房子来存储这一小部分~我们之后可以利用match方法等等，再次访问被捕获组匹配到的部分.因为正则表达式是很多javascript函数的核心，所以这里讲得比较细，也希望大家回去多多学习正则。

2 利用正则抓出变量：我们可以利用javascript的match方法，来观察下正则的效果。(match方法的讲解http://www.jb51.net/w3school/js/jsref_match.htm)

var reg = /(-?\d*)[n]*([+-]\d+)*/
var a = '2'
a.match(reg)
//["2", "2", undefined]
var b = '2n+1'
b.match(reg)
//["2n+1", "2", "+1"]
var c= '-n+1'
c.match(reg)
//["-n+1", "-", "+1"]
var d = '10n+10'
d.match(reg)
//["10n+10", "10", "+10"]

非常明显，match的返回结果 在不同情况下表现是不同的。返回结果是一个数组，数组的第一项是“全局匹配”，即正则全部匹配到的内容,第二项跟第三项是我们所说的“捕获组” 可以叫做 捕获组1号，捕获组2号,再回头看

var reg = /(-?\d*)[n]*([+-]\d+)*/

是不是就明白多了。。

3开始处理:我们的核心函数利用拿到的值做分支判断

var reg = /(-?\d*)[n]*([+-]\d+)*/,
m = selector.match(reg);
if (selector === m[1]) { // 纯数字
  return [nodeList[(parseInt(m[1]) - 1)]];
}
function filter(index) { //过滤器函数
  console.log('m1'+m[1],'m2'+m[2])
  x = m[1];//直接把n前面的值赋给x
  y= m[2];
  if (m[2]) { // n后面存在y
  if ('' === m[1]) { // n前面木有负号 xn+y x=1
    x= 1;
    y= m[2]
  } else if ('-' === m[1]) { // n前面有负号
    x = -1;
    y= m[2]
  }
  } else { //n后面不存在y
    y = 0;
  }
  var n = (index - parseInt(y)) / parseInt(x);//开始计算
  console.log('x'+x,'y'+y,n+'n')
  // 正整数返回true
  return (n === parseInt(n) && n >= 0) ? true : false;
}

以上用了一个函数 parseInt 这是干嘛的呢，请参见http://www.w3school.com.cn/js/jsref_parseInt.asp;之后呢，我们开始遍历我们的dom节点。

var result = []; //存储结果
var l = nodeList.length;//缓存
for (var i =1; i<=l; i++) {//这里从1开始！
  console.log(i,filter(i))
  if (filter(i)) {
    result.push(nodeList[i-1])//注意了nodelist下标从0开始，所以要-1!
  }
}

补充(:这里我再次需要讲解一个东西叫做高性能循环.一般我们写循环通常是这样的

for(var i =0;i<nodelist.length;i++)

这样写有啥坏处呢？我们仔细分析for的结构.for(初始值；布尔值，表示满足条件后结束循环；操作)这样电脑每次都要计算一下i<nodelist.length这个布尔值不是么。 因此我们可以直接这么写

var l = nodeList.length;
for (var i = nodeList.length; i--; ) 

他的效力跟

for(var i =0;i<nodelist.length;i++) 

是一样的，但是性能更高。写了这么多，我们可以把完整的函数放出来了

	
function nthChild(nodeList, selector) {
  var x,
  y; //xn+y
  var reg = /(-?\d*)[n]*([+-]\d+)*/,
  m = selector.match(reg);
  if (selector === m[1]) { // 纯数字
   return [nodeList[(parseInt(m[1]) - 1)]];
  }
function filter(index) { //过滤器函数
  console.log('m1' + m[1], 'm2' + m[2])
  x = m[1]; //直接把n前面的值赋给x
  y = m[2];
  if (m[2]) { // n后面存在y
  if ('' === m[1]) { // n前面木有负号  xn+y x=1
    x = 1;
    y = m[2]
  } else if ('-' === m[1]) { // n前面有负号
    x = -1;
    y = m[2]
  } else { //n后面不存在y
    y = 0;
  }
  var n = (index - parseInt(y)) / parseInt(x); //开始计算
  console.log('x' + x, 'y' + y, n + 'n')
  // 正整数返回true
  return (n === parseInt(n) && n >= 0) ? true : false;
 }
 var result = []; //存储结果
 var l = nodeList.length; //缓存
 for (var i = 1; i <= l; i++) { //这里从1开始！
   console.log(i, filter(i))
   if (filter(i)) {
     result.push(nodeList[i - 1]) //注意了nodelist下标从0开始，所以要-1!
   }
 }
 return result;
}

大家注意到很多console.log了么，这是常用的javascript调试技巧，我这里只用了他很小的一个部分：显示当前的变量是多少。具体的用法可以参考: http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html.另外ie是不支持console.log的，记得去掉不然会报错.大家可以测试一下。

var lis = document.getElementsByTagName('li')//取得所有的li标签元素，返回一个nodelist
nthChild(lis,'2n+1')
nthChild(lis,'2')
nthChild(lis,'n+5')

有关于:nth-child的介绍就先介绍到这，希望这样的杂记对您的工作与学习有所帮助，如果你感兴趣请继续观注w3cplus中99js手记的相关更新。

如需转载，烦请注昨出处：http://www.w3cplus.com/js/js/99js-nth-child.html

上一篇,99给大家介绍了使用js控制“:nth-child()”的方法，今天99继续给大家介绍一个使用js自动调整路径的相关介绍，希望大家喜欢。

目标： 路径自动调整

需求是这样的:在javascript 开发中，常常会碰到相对路径与绝对路径的问题。而javascript模块化开发（补充javascript模块化http://www.cnblogs.com/muguaworld/archive/2011/11/27/2265356.html）。常见的实现方式就是把js文件按需载入，在载入的过程中也会遇到路径问题。比如我们有路径/workspace/wwwroot/module1；我们需要加载 wwwroot下面的a.js文件，跟wwwroot下面module2的b.js文件，熟悉linux的同学就会知道 当目录/workspace/wwwroot/module1，我们输入 ../a.js 即可以拿到文件，此时的路径为/workspace/wwwroot/a.js，我们输入../module2/b.js 此时的路径为/workspace/wwwroot/module2/b.js而javascript语言是浏览器端语言，除了现代浏览器未实现完全的fileapi外，他是不能操纵任何文件的。

补充 fileapi 跟 javascript安全策略 (沙箱策略)

1. 沙箱策略http://hi.baidu.com/meklrdoxtkbkyzd/item/c2480ad3f64e0848fa57684e
2. 同源策略http://baike.baidu.com/view/3747010.htm

html5file api

1. https://developer.mozilla.org/en-US/docs/DOM/File_API
2. https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

以及我写的fileapi的一个小应用：上传后预览http://99jty.com/?p=856

扯了那么多，我们来抽象成需求

1. 设str = 'aa/bb/cc' 设用户输入user = '../dd.js';
2. 则返回 aa/bb/dd.js

思路1

我们分析一下路径的组成

aa/bb/cc ../dd.js > aa/bb/dd.js
aa/bb/cc ../../dd.js > aa/dd.js

可以很清楚的看到：str的总长度- ..的个数 就是str需要保留的路径。那么我们只需要统计下 ../的个数就是了。。。

实现1：

function adjustPath(str, user) {
  var strArr = str.split("/"),
  userArr = user.split("../");
  var sl = strArr.length,
  ul = userArr.length;
  var s = "";
  var l = sl - ul;
  if (l < 0)
    throw new Error('未找到文件！')
    for (var i = 0; i < l; i++) {
      console.log(i, strArr[i]);
      s += strArr[i] + "/";
    }
  return s + userArr[userArr.length - 1];
}
var str = 'aaa/bbb/ccc/'
console.log(adjustPath(str, '../../../../dd.js'))

split方法是非常有用的一个东东，可以把字符串转成数组,另外 join方法是他的逆运算。这里给大家讲个技巧：

当涉及 字符串单字符，或者有规律的分隔符的字符串，尝试用split切分成数组，会好处理很多。关于字符串与数组的一系列方法。。属于js核心中的核心，希望背熟。。。http://www.w3cschool.cn/js_reference.html

第二个要讲的是throw new Error 这个命令。

在程序设计中，很重要的一点就是“容错性”， 也就是程序是否能够在遇到错误的时候进行相应的处理。我们可以观察到，当..数量太多，就不会找到文件了，这时候进行下一步操作，会严重影响程序的返回结果。所以我们if判断一下， 若出现问题，则抛个错。 在java开发中这应该是经常用的吧~其他其实也不用讲了，第一个思路比较简单。

思路2

涉及字符串的大部分问题都可以用正则表达式直接解决。这里我们要利用一个正则表达式的小技巧 吐泡泡- -

var d = [1, 2, 3, 4, 5];
var b = 'abcakjabjsaabadab';
var nstr = b.replace(/ab/g, function (a) {
  console.log(a);
  return d.pop() ? "" : 'hahah';
})

先解释一下吧replace方法是string对象的方法，可以替换字符串或者正则。而替换的时候可以传入一个参数function 这个function很有意思，它的参数包含被前面正则所“匹配”的部分。
详细的话，可以见replace的参考http://www.w3school.com.cn/js/jsref_replace.asp,跟我写的 function传参~http://99jty.com/?p=470

另外补充下 正则表达式也推荐看看这一篇:http://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222.html。正美的大作，基本把我们常用的都概括了。我们回到函数，以上函数返回的结果很有意思，返回了四个ab (显然是b匹配上四个ab字符串).但是呢，d变成了1。。。。这是肿麽回事呢。。我认为，每匹配一次，都会执行replace里面传的function函数一次，因此d就pop的没了。。。我把这个函数叫做。。正则吐泡泡。。。那这个与我们那个题目有啥关系呢。。。。聪明的人应该想到了，首先把字符串弄成数组形式

aa/bb/cc > [aa,bb,cc]

每次发现一个../我们就删掉字符串末尾的一项。比如 ../dd.js 那么 删掉后变为 [aa,bb] 之后组合起来就是我们想要的答案了~

实现：

function adjustPath(str, user){
  var patharr = str.replace(/\/$/,"").split("\/");
  console.log(str.replace(/\/$/,"").split("\/"));
  var nstr = user.replace(/\.\.\//g,function(a){console.log(a);
  return patharr.pop() ? "" : a;
});
  console.log(nstr,patharr);
  return patharr.length ? patharr.join("/")+"/"+nstr : nstr;
}
console.log('aa/bb/cc','../dd.js')

以上函数呢可能正则大家会看得比较晕。这里稍微解释下：

1. \符号是转义的意思。当需要匹配的内容包含
2. ^ $ . * + ? = ! : | \ / ( ) [ ] { } 时，需要用 \ 转义。

比如我们想匹配 ../ 会发现三个都需要转义。。那么就要写成 \.\.\/而每个正则表达式是由一个// 包裹起来的，我们包裹起来 /\.\.\//在函数中，还写了一个 patharr.pop() ? "" : a 他是javascript的三目表达式。其实很简单：a?b:c的意思是:

if(a){b}
else{c}

今天的你整明白了吗？要是没有整明白我们可以一起探讨。之后补充其他的方法！！！！！！！！！！！！欢迎本专栏相关更新。

如需转载，烦请注明出处：http://www.w3cplus.com/js/99js-automatic-adjustment-path.html

很早以前在Google Plus UI Button制作一文中详细介绍了Google Plus的UI按钮制作方法以及相关代码，今天藤藤特意将其中tip的提示按钮UI制作方法单独拿出来培析，与大家分享，希望大家喜欢这套由@font-face制作的TIP按钮库。

demodownload

HTML CODE

<ul class="control_buttons">
  <li>
    <a href="#" class="icon icon1">
      <span><em>icon-Home</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon2">
      <span><em>icon-Music</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon3">
      <span><em>icon-Image</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon4">
      <span><em>icon-Text</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon5">
      <span><em>icon-File</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon6">
      <span><em>icon-Bell</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon7">
      <span><em>icon-Calendar</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon8">
      <span><em>icon-Upload</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon9">
      <span><em>icon-Download</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon10">
      <span><em>icon-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon11">
      <span><em>icon-News</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon12">
      <span><em>icon-Load</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon13">
      <span><em>icon-Avatar</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon14">
      <span><em>icon-Search</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon15">
      <span><em>icon-Cake</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon16">
      <span><em>icon-Rise</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon17">
      <span><em>icon-Delete</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon18">
      <span><em>icon-App</em></span>
    </a>
  </li>
  <li>
     <a href="#" class="icon icon19">
       <span><em>icon-Good</em></span>
     </a>
  </li>
  <li>
    <a href="#" class="icon icon20">
      <span><em>icon-Upload</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon21">
      <span><em>icon-Download</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon22">
      <span><em>icon-Link</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon23">
      <span><em>icon-Like</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon24">
      <span><em>icon-Phone</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon25">
      <span><em>icon-Pad</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon26">
      <span><em>icon-Computer</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon27">
      <span><em>icon-Mouse</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon28">
      <span><em>icon-Wifi</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon29">
      <span><em>icon-Tencent</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon30">
      <span><em>icon-Transform</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon31 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon32 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li> 
    <a href="#" class="icon icon33 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon34 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon35 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon36 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon37 arrow">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon38">
      <span><em>select-Set Up</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon39">
      <span><em>Browser-Apple</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon40">
      <span><em>browser-Window</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon41">
      <span><em>Browser-Chrome</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon42">
      <span><em>browser-IE</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon43">
      <span><em>browser-Opera</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon44">
      <span><em>browser-Net..</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon45">
      <span><em>chat-...f</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon46">
      <span><em>chat-f...</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon47">
      <span><em>chat-git...</em></span>
    </a>
  </li>
  <li>
    <a href="#" class="icon icon48">
      <span><em>chat-f...</em></span>
    </a>
  </li>
</ul>

CSS CODE

body {
 background: #c0c0c0;
}
.demo {
 width: 500px;
 margin: 50px auto;
}
.control_buttons li {
 display: inline-block;
 margin:0 10px 10px 0;
}
.icon {
 position: relative;
 display: inline-block;
 color: #545454;
 text-shadow:0 -1px 0 #282828,0 1px 1px #e1e1e1;
 padding: 8px 10px 4px;
 box-shadow: 0 1px 0 #f4f4f4 inset;
 border: 1px solid #7d7d7d;
 border-radius: 3px;
 background: -webkit-linear-gradient(top,#ececec,#bfbfbf);
 background: -moz-linear-gradient(top,#ececec,#bfbfbf);
 background: linear-gradient(top,#ececec,#bfbfbf);
}
.icon:hover {
 color: #545454;
 text-decoration:none;
 background: -webkit-linear-gradient(top,#f7f5f5,#c9c7c7);
 background: -moz-linear-gradient(top,#f7f5f5,#c9c7c7);
 background: linear-gradient(top,#f7f5f5,#c9c7c7);
}
.icon:hover span {
 max-height: 36px;
}
.icon span {
 position: absolute;
 left: -32px;
 top: 30px;
 display: block;
 overflow: hidden;
 max-height: 0;
 text-align: center;
 z-index: 2;
 -webkit-transition: max-height .3s linear;
 -moz-transition: max-height .3s linear;
 -o-transition: max-height .3s linear;
 -ms-transition: max-height .3s linear;
 transition: max-height .3s linear;
}
.icon span em {
 display: block;
 width: 100px;
 line-height: 26px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 background-color:#000;
}
.icon span em:after {
 position: absolute;
 left: 50%;
 top: 0;
 content: '';
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #000;
 margin-left: -5px;
}
.icon:before,
.icon:after{
 font-family: 'icomoon';
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 display: inline-block;
 font-size: 15px;
}
.icon1:before {
 content: "\23";
}
.icon2:before {
 content: "\21";
}
.icon3:before {
 content: "\22";
}
.icon4:before {
 content: "\24";
}
.icon5:before {
 content: "\25";
}
.icon6:before {
 content: "\26";
}
.icon7:before {
 content: "\27";
}
.icon8:before {
 content: "\28";
}
.icon9:before {
 content: "\29";
}
.icon10:before {
 content: "\2f";
}
.icon11:before {
 content: "\2a";
}
.icon12:before {
 content: "\2b";
}
.icon13:before {
 content: "\2c";
}
.icon14:before {
 content: "\2d";
}
.icon15:before {
 content: "\30";
}
.icon16:before {
 content: "\31";
}
.icon17:before {
 content: "\32";
}
.icon18:before {
 content: "\33";
}
.icon19:before {
 content: "\3a";
}
.icon20:before {
 content: "\36";
}
.icon21:before {
 content: "\37";
}
.icon22:before {
 content: "\38";
}
.icon23:before {
 content: "\39";
}
.icon24:before {
 content: "\4e";
}
.icon25:before {
 content: "\4f";
}
.icon26:before {
 content: "\50";
}
.icon27:before {
 content: "\51";
}
.icon28:before {
 content: "\54";
}
.icon29:before {
 content: "\44";
}
.icon30:before {
 content: "\52";
}
.icon31:before {
 content: "\4b";
}
.icon32:before {
 content: "\4a";
}
.icon33:before {
 content: "\33";
}
.icon34:before {
 content: "\34";
}
.icon35:before {
 content: "\35";
}
.icon36:before {
 content: "\27";
}
.icon37:before {
 content: "\2f";
}
.icon38:before {
 content: "\4c";
}
.icon39:before {
 content: "\41";
}
.icon40:before {
 content: "\42";
}
.icon41:before {
 content: "\3f";
}
.icon42:before {
 content: "\46";
}
.icon43:before {
 content: "\47";
}
.icon44:before {
 content: "\48";
}
.icon45:before {
 content: "\3d";
}
.icon46:before {
 content: "\3c";
}
.icon47:before {
 content: "\40";
}
.icon48:before {
 content: "\3e";
}
.arrow:after {
 content: "\53";
 margin-right: -3px;
}
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('fonts/icomoon.svg#icomoon') format('svg'),
  url('fonts/icomoon.woff') format('woff'),
  url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/google-plus-tip-buttons.html

本文章旨在收集css的精品教程，为大家提供一个高质量的学习翻阅参考平台。其实网络上有很多很好的css教程，牛人更是一大把，只是藏得太深。每次查阅点资料那个百度啊，好不麻烦。索性我们一起动手，把那些黄沙中的金子挑出来，让它光芒尽显，造福于我辈，岂不快哉！每人贡献一份力量，把你自己的或你朋友的或你膜拜的偶像的精品文章贴出来吧。您可以通过下面评论，或者加入w3cplus qq群（1041263），或者通过下面的个人联系方式发给我们。css精品聚集，有你的一份！

1. CSS的盒子模型（Box Model）
2. 完美解决IE6不支持position:fixed的bug
3. IE6 PNG透明终极解决方案
4. inline-block的前世今生
5. 那些年我们一起清除过的浮动
6. PNG的秘密—— 一淘前端分享会
7. 可用性更好的CSS隐藏文字技术(CSS图片替换文字)
9. 你推荐的文章将会出现在这里！

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处，简单明了，也是我常常去逛的一个网站。今天收到一个CSS3效果，就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角，同时使用旋转transform以及定位到每个角落上，其中最难的一点就是，使用gradient制作了四个切角效果，这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

demodownload

HTML CODE

<div class="tucked-corners-top">
  <div class="tucked-corners-bottom">
    CSS3 Tucked Corners
  </div>
</div>

CSS CODE

body {
  background: #eac996 url(wood.png);
}
.tucked-corners-top {
  position: relative;
  width: 500px; min-height: 200px;
  margin: 100px auto; padding: 20px;
  background-color: #fff; /* Fallback */			
  background: 
    -webkit-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
  background: 
    -moz-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #fff 10px);
  background: 
    -o-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -o-linear-gradient(135deg, transparent 10px, #fff 10px),
    -o-linear-gradient(225deg, transparent 10px, #fff 10px),
    -o-linear-gradient(315deg, transparent 10px, #fff 10px);	        
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
}
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
  content: '';
  position: absolute;
  height: 20px; 
  width: 80px;
  box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
  box-shadow: none\9; /* Do not show on IE9 #needed */			
}
.tucked-corners-top::before,
.tucked-corners-top::after {
  top: -10px;
}

.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
  bottom: -10px;
}		
.tucked-corners-top::before,
.tucked-corners-bottom::before {
  left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
  right: -42px;
}
.tucked-corners-top::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tucked-corners-top::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);			
}

.tucked-corners-bottom::before {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.tucked-corners-bottom::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

特别声明：此案例代码来自于：red team design

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-tucked-corners.html

英文地址：http://www.red-team-design.com/css3-tucked-corners

这是一个纯CSS3制作的工具提示下拉菜单，当你鼠标悬浮在工具条上时，会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon，并使用了gradient给每个下拉菜单块制作了一个不同的渐变色，而下拉菜单的隐藏和显示并不是按照我们传统的制作方法，此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时，整个下拉菜单的高度为0，但当你的鼠标悬浮在对应的工具图标上时，此时下拉菜单的高度为180px,当然这个值是一个固定例的值，要完美一点的方法最好不要控制死他的高度，具体如何实现，大家自己想想，前面有讲过这样的案例哟。（^_^）。

demodownload

HTML CODE

<ul>
  <li>
    <a href="#" class="icon-user"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#" class="icon-clock"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#" class="icon-setup"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
</ul>

CSS CODE

body {
　background-color: #323232;
}
.demo {
　width: 180px;
　margin: 40px auto 0;
}
.demo > ul > li {
　float: left;
　width: 60px;
　text-align: center;
　position: relative;
}
.demo > ul > li a {
　display: block;
　color: #fff;
}
.demo > ul > li a:after {
　display: inline-block;
　font-family: 'icomoon';
　font-style: normal;
　speak: none;
　font-weight: normal;
　-webkit-font-smoothing: antialiased;
　font-size: 30px;
　color: #a1a1a1;
}
.demo > ul > li:nth-child(1) > a:after {
　content: "\2c";
}
.demo > ul > li:nth-child(2) > a:after {
　content: "\21";
}
.demo > ul > li:nth-child(3) > a:after {
　content: "\2f";
}
.demo > ul > li div {
　position: relative;
　margin-left: -40px;
　width: 180px;
　height: 0px;
　overflow: hidden;
　-webkit-transition: height 0.4s linear;
　-moz-transition: height 0.4s linear;
　-o-transition: height 0.4s linear;
  -ms-transition: height 0.4s linear;
　transition: height 0.4s linear;
}
.demo > ul > li:hover div {
　height: 180px;
　z-index: 2;
}
.demo > ul > li ul {
　position: absolute;
　margin-top: 10px;
　font-size: 16px;
　text-shadow: 0 1px 1px rgba(0,0,0,.4);
　text-align: left;
　width: 140px;
　line-height: 30px;
　padding: 10px 0;
　border-radius: 3px;
}
.demo > ul > li:nth-child(1) ul {
　box-shadow: 0 1px 0 #db7777 inset,0 0 1px #c70000;
　background: -webkit-linear-gradient(top,#d80000 10%,#8b0000);
　background: -moz-linear-gradient(top,#d80000 10%,#8b0000);
  background: -o-linear-gradient(top,#d80000 10%,#8b0000);
  background: -ms-linear-gradient(top,#d80000 10%,#8b0000);
　background: linear-gradient(top,#d80000 10%,#8b0000);
}
.demo > ul > li:nth-child(2) ul {
  box-shadow: 0 1px 0 #85ff7c inset,0 0 1px #4bd940 inset;
  background: -webkit-linear-gradient(top,#31db17 10%,#0b9200);
  background: -moz-linear-gradient(top,#31db17 10%,#0b9200);
  background: -o-linear-gradient(top,#31db17 10%,#0b9200);
  background: -ms-linear-gradient(top,#31db17 10%,#0b9200);
  background: linear-gradient(top,#31db17 10%,#0b9200);
}
.demo > ul > li:nth-child(3) ul {
  box-shadow: 0 1px 0 #77d4da inset,0 0 1px #0077b0 inset;
  background: -webkit-linear-gradient(top,#00c3db 10%,#005e91);
  background: -moz-linear-gradient(top,#00c3db 10%,#005e91);
  background: -ms-linear-gradient(top,#00c3db 10%,#005e91);
  background: -o-linear-gradient(top,#00c3db 10%,#005e91);
  background: linear-gradient(top,#00c3db 10%,#005e91);

}
.demo > ul > li ul li a {
  position: relative;
  padding: 0 20px;
}
.demo > ul > li:nth-child(1) ul li a:hover {
  text-decoration: none;
  background-color: #800000;
}
.demo > ul > li:nth-child(2) ul li a:hover {
  text-decoration: none;
  background-color: #0a6602;
}
.demo > ul > li:nth-child(3) ul li a:hover {
  text-decoration: none;
  background-color: #0a5278;
}
.demo > ul > li:nth-child(1) ul li a {
  border-bottom: 1px solid #d33030;
}
.demo > ul > li:nth-child(2) ul li a {
  border-bottom: 1px solid #60dd57;
}
.demo > ul > li:nth-child(3) ul li a {
  border-bottom: 1px solid #30bcd6;
}
.demo > ul > li ul li:first-child a:first-child:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 1px;
  border: 5px solid transparent;
  left: 50%;
  top: -20px;
  margin-left: -5px;
  z-index: 99;
}
.demo > ul > li:nth-child(1) ul li a:first-child:before {
  border-bottom-color: #d80000;
}
.demo > ul > li:nth-child(2) ul li a:first-child:before {
  border-bottom-color: #25ec17;
}
.demo > ul > li:nth-child(3) ul li a:first-child:before {
  border-bottom-color: #00c3db;
}
 
@font-face {
　font-family: 'icomoon';
　src:url('fonts/icomoon.eot');
　src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
　　url('fonts/icomoon.svg#icomoon') format('svg'),
　　url('fonts/icomoon.woff') format('woff'),
　　url('fonts/icomoon.ttf') format('truetype');
　font-weight: normal;
　font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-dropdown-menu-2.html

这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果，在整个效果制作过程中没有过多的技术难题，主要一点是使用什么方法来实现下拉列表的隐藏与显示效果，在本例中还是通过max-height来实现的，至于其他的效果，我想大家要是一路跟着藤藤走下来了的话都非常熟悉了，如果你没有跟着练习也不用害怕，这些效果无外呼包括了gradient制作渐变、box-shadow制作阴影，@font-face实现icon等等。

demodownload

HTML CODE

<ul class="clearfix">
  <li>
    <a href="#" class="cart"><em>2</em></a>
      <div class="item">
        <ul>
          <li>
             Your Products (2 items)<a href="#" class="checkout">Checkout</a>
          </li>
          <li>
            <a class="items">
              <div class="items_img"><img src="img/mac.png"></div>
              <div class="items_text"><span>MacBook Pro 13-inch<span><em>$1,199</em></div>
            </a>
          </li>
          <li>
            <a class="items">
              <div class="items_img"><img src="img/iphone.png"></div>
              <div class="items_text"><span>MacBook Pro 13-inch</span><em>$1,199</em></div>
            </a>
          </li>
        </ul>
      </div>
   </li>
</ul>

CSS CODE

body {
 background-color:#282828;
}
.demo {
 margin:40px auto 0;
 width: 680px;
 height: 400px;
 background-color:#f2f2f2;
}
.demo > ul:nth-child(1){
 position: relative;
 height: 60px;
 box-shadow: 0 1px 3px rgba(0,0,0,.4);
 background: -webkit-linear-gradient(top,#ddeef0,#c3e1e5);
 background: -moz-linear-gradient(top,#ddeef0,#c3e1e5);
 background: -o-linear-gradient(top,#ddeef0,#c3e1e5);
 background: -ms-linear-gradient(top,#ddeef0,#c3e1e5);
 background: linear-gradient(top,#ddeef0,#c3e1e5);
}
.demo > ul:nth-child(1):after {
 position: absolute;
 content: "";
 bottom: 3px;
 display: block;
 width: 100%;
 height: 1px;
 border-bottom: 1px dashed #fff;
}
.cart {
 position: absolute;
 left:50%;
 top:15px;
 display: block;
 width: 36px;
 height: 30px;
 text-align: center;
 color: #728f93;
 border: 1px solid #a7bdc0;
 border-radius: 3px;
 box-shadow: 0 1px 0 #e6f3f4 inset,0 1px 0 #ddeef0;
}
.cart em {
 position: absolute;
 top:-5px;
 right:-5px;
 font-style: normal;
 display: inline-block;
 width: 14px;
 height: 14px;
 border-radius: 7px;
 border: 1px solid #856045;
 background-color: #bb815c;
 content: "2";
 color: #fff;
 line-height: 14px;
 font-size: 10px;
}
.cart:after {
 display: inline-block;
 font-size: 20px;
 font-family: 'broccolidry';
 font-style: normal;
 font-weight: normal;
 speak: none;
 -webkit-font-smoothing: antialiased;
 content: "\21";
 text-shadow: 0 1px 0 #d6eaec;
 line-height: 30px;
}
.item {
 position: absolute;
 left: 85px;
 top: 50px;
 width: 320px;
 z-index: 100;
 max-height: 0px;
 overflow: hidden;
 -webkit-transition: max-height 0.4s linear;
 -moz-transition: max-height 0.4s linear;
 -o-transition: max-height 0.4s linear;
 -ms-transition: max-height 0.4s linear;
 transition: max-height 0.4s linear;
}
.demo > ul > li:hover .item {
 max-height: 220px;
}
.item ul {
 margin-top: 5px;
 text-shadow: 0 1px 0 #fff;
 border: 1px solid #a8b1b6;
 box-shadow: 0 0 7px rgba(0,0,0,.3),0 1px 0 #ced3d6,0 2px 0 #9ba4a8,0 3px 0 #cbd0d4,0 4px #9aa3a8,0 5px 5px #cfd0d0;
 border-radius: 5px 5px  0 0;
 background-color: #eaeff3;
}
.item ul li {
 line-height: 60px;
 max-height: 60px;
 border-top: 1px solid #a8b0b6;
 box-shadow: 0 1px 0 #fff inset;
}
.item li:nth-child(1) {
 color: #fff;
 font-size: 16px;
 text-shadow: 0 1px 0 rgba(0,0,0,.4);
 padding: 0 5px;
 box-shadow: none;
 border-radius: 3px 3px 0 0;
 border: 1px solid #667078;
 background: -webkit-linear-gradient(top,#7f8d97,#6e7c87);
 background: -moz-linear-gradient(top,#7f8d97,#6e7c87);
 background: -o-linear-gradient(top,#7f8d97,#6e7c87);
 background: -mslinear-gradient(top,#7f8d97,#6e7c87);
 background: linear-gradient(top,#7f8d97,#6e7c87);
}
.item li:nth-child(1):before {
 position: absolute;
 content: '';
 width: 1px;
 height: 1px;
 right: 40px;
 top: -5px;
 margin-left: -5px;
 border: 6px solid transparent;
 border-bottom-color: #7f8d97;
 z-index: 99;
}
.item li:nth-child(1):after {
 position:relative;
 display: block;
 bottom: 3px;
 content: "";
 width: 100%;
 height: 1px;
 border-bottom: 1px dashed #fff;
}
.item li:nth-child(1) .checkout {
 float: right;
 color: #fff;
 text-shadow:0 1px 0 #8e4524;
 padding: 0 5px;
 height: 28px;
 line-height: 28px;
 margin-top: 14px;
 border-radius: 5px;
 border :1px solid #81634d;
 box-shadow: 0 0 3px #a16844 inset,0 1px 0 #8d99a1;
 background-color: #c58f6a;
}
.item li .checkout:hover {
 text-decoration: none;
 box-shadow: 0 0 3px #a76f4b inset,0 1px 0 #949fa6;
 background-color: #cb9876;
}
.items {
 display: block;
 color: #78838a;
 padding: 0 5px;
}
.items:hover {
 color: #78838a;
 text-decoration: none;
 background-color: #fff;
}
.items .items_img {
 float: left;
 width: 60px;
 height: 60px;
}
.items .items_img img {
 width: 58px;
 height: 58px;
 vertical-align: middle;
}
.items_text {
 margin-left: 30px;
 overflow: hidden;
}
.items_text em {
 font-weight: bold;
 color: #82593c;
 float: right;
}
@font-face {
 font-family: 'broccolidry';
 src:url('fonts/broccolidry.eot');
 src:url('fonts/broccolidry.eot?#iefix') format('embedded-opentype'),
     url('fonts/broccolidry.svg#broccolidry') format('svg'),
     url('fonts/broccolidry.woff') format('woff'),
     url('fonts/broccolidry.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/cart-dropdown-list.html

css3的text-shadow属性能帮助我们设计很多有特效的文字效果，特别是运用在英文字体上。早前在《CSS3的文字阴影—text-shadow》和《CSS3 制作文字特效》两篇文章中有介绍过一些使用css3的text-shadow制作的特效，今天老调重谈，我使用css3的text-shadow写了十个文字效果，希望大家喜欢。

demodownload

HTML CODE

<div class="text-wrap box1">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box2">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box3">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box4">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box5">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box6">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box7">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box8">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box9">W3cplus | Pure CSS3 Text Shadow Effects</div>
<div class="text-wrap box10">W3cplus | Pure CSS3 Text Shadow Effects</div>

CSS CODE

.text-wrap {
  width: 600px;
  min-height: 100px;
  margin: 20px auto;
  padding: 30px 0;
  border: 5px solid white;
  position: relative;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.80);
  clear: both;
  font-family: 'Aclonica', serif;
  font-size: 50px;
  text-align: center;
}
.box1 {
  background-color: rgb(51, 51, 51);
  color: #222;
  text-shadow: 0px 1px 1px #4d4d4d;
}
.box2 {
  background-color: rgb(0, 102, 102);
  color: #066;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.box3 {
  background-color: rgb(51, 51, 51);
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
  letter-spacing: 5px;
}
.box4 {
  background-color: rgb(51, 51, 51);
  color: #fff;
  text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
}
.box5 {
  background-color: rgb(204, 204, 204);
  color: #fff;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

.box6 {
  background-color: rgb(64, 64, 64);
  color:#00ff0f;
  text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;
}
.box7 {
  background-color: rgb(243, 243, 243);
  color: rgba(0, 174, 239, 0.2);
  text-shadow: rgba(0, 0, 30, 0.08) 0px 5px 2px;
}
.box8 {
  background-color: rgb(204, 204, 204);
  color: transparent;
  text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;
}
.box9{
  background-color: rgb(243, 243, 243);
  color: rgba(0, 168, 255, 0.5);
  text-shadow: 3px 3px 0 rgba(255, 0, 180, 0.5);
}
.box10{
  background-color: rgb(102, 102, 102);
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
}

注：例子中使用的是google font api,所以在使用例子中字体时，需要先在头部加上

<link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" >

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/10-css3-text-effects.html

这个效果是一个类似于彩带的导航菜单效果，整个效果之中，使用的方法都比较简单，关键之处就是如何实现导航菜单两边折角的效果。常用的方法就是“:after”和“:before”生成折角部分，如果你以前从没接触过这种彩带效果制作，不仿先看看《Pure CSS3 Ribbons》以及《CSS3 Ribbons》、《CSS制作图形速查表》、《纯CSS制作的图形效果》几篇教程，能更好的帮助你学习这个案例的制作原理与方法。不过本案例中有一个最不好的地方，就是定死了菜单项的宽度，不能做到收缩自如，所以您要是有兴趣可以在此基础上进行改良。与我们分享。

demodownload

HTML Code

<nav id="nav">
  <ul class="clearfix">
    <li> </li>
    <li><a href="#" class="active">W3cplus</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">Demo</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">Rnippet</a></li>
    <li><a href="#">Tutorial</a></li>
    <li><a href="#">Blog</a></li>
    <li> </li>
  </ul>
</nav>

CSS CODE

body {
  background-color: #8e949f;
}

#nav {
  width: 780px;
  height: 85px;
  padding-top: 50px;
  margin: 40px auto;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.2),0 0 10px rgba(0,0,0,.1) inset;
  background-color: #eeeeee;
}
#nav ul {
  position: relative;
  width: 800px;
  height: 40px;
  line-height: 40px;
  padding: 1px;
  margin-left: -10px;
  border-radius: 3px;
  background-color: #26211a;
}
#nav ul:before,
#nav ul:after {
  display: inline-block;
  position: absolute;
  border-style: solid;
  border-width: 6px;
  z-index: -1;
}
#nav ul:before {
  top: -10px;
  left: 0px;
  border-color: transparent #221712 #221712 transparent;
}
#nav ul:after {
  top: -8px;
  right: 0;
  border-color: transparent transparent #221712 #221712;
}
#nav li {
  float: left;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  text-align: center;
  width: 104px;
  margin-right: 1px;
  box-shadow: 0 0 0 1px rgba(97,97,97,1) inset;
  background-image: -webkit-linear-gradient(top,#4b4b4b,#262626);
  background-image: -moz-linear-gradient(top,#4b4b4b,#262626);
  background-image: -o-linear-gradient(top,#4b4b4b,#262626);
  background-image: -ms-linear-gradient(top,#4b4b4b,#262626);
  background-image: linear-gradient(top,#4b4b4b,#262626);
}
#nav li:first-child {
  position: relative;
  width: 54px;
  border-radius: 3px 0 0 3px;
}
#nav li:first-child:after {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -10px;
  display: block;
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  content: "\22";
  color: #121212;
  text-shadow: 0 -1px 0 #0e0e0e,0 1px 0 #3a3a3a;
  font-size: 16px;
}
#nav li:last-child {
  width: 10px;
  margin-right: 0;
  border-radius: 0 3px 3px 0;
}
#nav li a {
  color: #fff;
  display: block;
}
#nav li a:hover {
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(200,125,25,1) inset;
  background-image: -webkit-linear-gradient(top,#a65a12,#7e3106);
  background-image: -moz-linear-gradient(top,#a65a12,#7e3106);
  background-image: -o-linear-gradient(top,#a65a12,#7e3106);
  background-image: -ms-linear-gradient(top,#a65a12,#7e3106);
  background-image: linear-gradient(top,#a65a12,#7e3106);
}
#nav li a:active,
#nav li a.active {
  color: #e6c35c;
  box-shadow: 0 0 0 1px rgba(92,92,92,.8) inset;
  background-image: -webkit-linear-gradient(top,#070707,#252525);
  background-image: -moz-linear-gradient(top,#070707,#252525);
  background-image: -o-linear-gradient(top,#070707,#252525);
  background-image: -ms-linear-gradient(top,#070707,#252525);
  background-image: linear-gradient(top,#070707,#252525);
}
@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
 	url('fonts/icomoon.svg#icomoon') format('svg'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-ribbon-menu.html

Twitter BootStrap是一款优秀的前端的框架，称得上是前端的一个框架利器。Web前端开发者每天都在与HTML、CSS、JavaScript打交道，然而不少人都是在周而复始的写模板、样式和交互效果，前没有想过如何将这些重复的工作整合在一起。Twitter推出的BootStrap能够帮助Web前端开发者摆脱这种重复的劳动。

最近在各群讨论BootStrap相关的话题也明显增多，有很多Web前端人员在开始或者已接触、并在使用BootStrap。为了能帮助大家更好的学习和使用Bootstrap这个优秀框架，我今天整理了一份我收藏的相关资源，这篇文章可以说是学习BootStrap的一个最好最全的资源，其中包含了八个BootStrap代码生成器、九个BootStrap工具、四个优秀的BootStrap主题、十一个BootStrap自带的JavaScript库和11篇优秀的BootStrap教程。希望这些资源大家会喜欢。

BootStrap主题生成器

1、Bootstrap Custom Build

Bootstrap提供了自定义模块组，你可以在Bootstrap官网中自定义需要的组件（无需将整个bootstrap下载下来），这样可以减去你不需要的bootstrap组件代码。同时可以根据自己的设计需求，自定义bootstrap中的变量参数，比如说色系、Grids系统等。

2、StyleBootstrap.info

与Bootstrap自带自定义组件工具相比，这个工具更简单，通过界面化的操作，可以让你自己定义一套适合自己设计需求的主题功能，比如说“Navbar”、“body”、“typography”、“button”、“forms”、“miscellaneous”等。

3、Beautiful Buttons for Twitter Bootstrappers

这是一个简单的小工具,只做一件事:帮助您设计漂亮的按钮使用Twitter的引导。它不会彻底改变你的使用引导方式，但它是很有趣的。

4、Bootstrap Generator

基于Bootstrap主题的引导，通过这个简单的工具，定制你自己需要的设计风格，并且可以轻松的导出你需要的CSS代码。

5、BootTheme

BootTheme是一款强大的在线制作Bootstrap主题的工具，可以自己Bootstrap中的各类参数，而且还能实时的观测你设置参数和变量对主题的影响和效果，最后还可以直接下载你定制好的Bootstrap主题代码。

6、Twitter Bootstrap Button Generator

这是一款小工具，主要功能是用来定制Bootstrap的Buttons效果，如果你需要使用Bootstrap的Button效果，这个工具能给你带来很大的方便。简单易用。

7、BootSwatch

BootSwatch是一款可视化在线编辑BootStrap主题的工具。

8、Bootstrap ThemeRoller

一个方便和直观的应用程序，他提供了一个直观的界面，用来帮助你定制你最喜欢的Bootstrap主题设计效果。

Bootstrap工具

1、jQuery UI Bootstrap

收集了一些美丽的BootStrap UI插件

2、Font Awesome

BootStrap的ICON库

3、Bootboxjs

Bootboxjs是一个简单的js库，简单快捷帮你制作一个Bootstrap的弹出框效果。

4、Colorpicker and Datepicker

Pretty straight forward, it's a colorpicker and datepicker that matches the bootstrap style.

5、jQuery Mobile Boostrap

一个基于BootStrap的jQuery Mobile主题。

6、Sass Twitter Bootstrap

Bootstrap一个强大的CSS预处理器。

7、Bootstrap PSD

Bootstrap一些UI效果扩展，你完全可以根据设计图配合一定的生成器。定制你需要的Bootstrap。

8、Bootstrap Fireworks

使用在Fireworks制作工作是的一个bootstrap扩展插件。

9、jQuery Bootstrap

jQuery Bootstrap不仅仅是另一个CSS框架，他还可以让你改变你的样式。

BootStrap主题

1、DarkStrap

一个黑色系的BootStrap主题

2、FB Boostrap

一个Facebook色系的BootStrap主题

3、Kickstrap

完整版的BootStrap主题，而且在其基础上进行过扩展，还有其他更大的优势。

4、BootMetro

BootStrap与Metro UI结合的一个主题。

BootStrap JavaScript Library

1、Modals bootstrap-modal.js

BootStrap制作弹出框的插件库。

2、Dropdowns bootstrap-dropdown.js

BootStrap制作下拉菜单的库。

3、ScrollSpy bootstrap-scrollspy.js

BootStrap制作滚动条位置配合菜单项的插件库。

4、Togglable tabs bootstrap-tab.js

BootStrap制作tabs菜单的库。

5、Tooltips bootstrap-tooltip.js

BootStrap制作tip提示框的插件库。

6、Popovers bootstrap-popover.js

BootStrap制作Popovers提示框的插件库。

7、Alert messages bootstrap-alert.js

BootStrap制作信息栏的插件库。

8、Buttons bootstrap-button.js

BootStrap制作按钮的插件库。

9、Collapse bootstrap-collapse.js

BootStrap制作手风琴的插件库。

10、Carousel bootstrap-carousel.js

BootStrap制作slidershow的插件库。

11、Typeahead bootstrap-typeahead.js

BootStrap制作文本自动补全的插件库。

BootStrap Tutorials

1、CSS——Bootstrap From Twitter

2、Twitter Bootstrap:前端框架利器

3、Building Twitter Bootstrap

4、Twitter Bootstrap 101: Introduction

5、Sample App with Backbone.js and Twitter Bootstrap

6、Twitter Bootstrap tutorial

7、Adding Twitter's Bootstrap CSS to your Rails app

8、5 Incredibly Useful Tools Built Into Twitter Bootstrap

9、Twitter Bootstrap 2: Bootstrap Goes Responsive

10、Bootstrap Your Application Using Twitter Bootstrap

11、Bootstrap Tutorial for Blog Design.

特别声明：上述资源如有碰到打不开站点，请开启您的VPN设置，因为大多数资源都是外文，有可能会在国内打不开。

如需转载，烦请注明出处：http://www.w3cplus.com/source/the-best-bootStrap-resources.html

这是一个很简单的案例，不过效果很有创意，一个标题“w3cplus”，默认只显示一个字母“w”，但当你的鼠标悬浮到这个标题上时，整个“w3cplus”会动态的给你展开，其实这个效果很类似于Letteringjs的效果，整个效果中letter-spacing属性的运用非常关键，然后配上CSS3的transition和opacity属性。

demodownload

HTML CODE

<h1><a href="http://www.w3cplus.com" class="home"><b>W</b><span>3cplus</span></a></h1>

CSS Code

h1{
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  font-size: 4em;
	margin: 20px;
}
h1 a {
  display: inline-block;
  text-decoration: none;
  font-family: 'Jim Nightshade', cursive;
  text-decoration: none;
  }
h1 a::after,
h1 a::before {
  font-size: 2.375em;
  position: relative;
  top: 0.10em;
  letter-spacing: 0.2em;
  left:0.13em;
}
h1 a::after {
  content: ">";
}
h1 a::before {
  content: "<";
}

h1 a b,
h1 a span {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: -0.44em;
  font-size: 2em;
}
h1 a span {
  opacity: 0;
}
h1 a b {
  letter-spacing:-0.16em;
}
h1 a:hover span {
  opacity: 1;
}
h1 a:hover b,
h1 a:hover span {
  letter-spacing:0;
  text-decoration:none;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-letter.html

Web前端开发者每天都与HTML、CSS、JavaScript打交道，然而不少人都是周而复始地写模板、样式和交互效果，并没有想过如何将这些重复的工作整合在一起。Twitter推出的Bootstrap能够帮助Web前端开发者摆脱这种重复劳动。

Bootstrap的历史

为了应对复杂的需求，早期的Twitter前端工程师在开发网站时几乎采用了所有自己熟悉的前端库。造成了网站维护困难、扩展性不强、开发成本高等问题。此时BootStrap被提上了日程。Twitter要求前端工程师完全依靠这一单一框架进行前端开发。

Twitter 在2011年8月将其开源，并在2012年2月3日发布了2.0版。在GitHub上，这个项目已有拥超过2万位关注者和4000个分支。 Bootstrap的设计者、著名前端工程师Mark Otto这样写道：“Bootstrap是我和Jacob Thornton编写的一个前端工具箱，目的是为了帮助设计师和Web前端开发人员快速有效地创建一个结构简单、性能优良、页面精致的Web应用。它使用 了最新的浏览器技术，可以提供精致的网页排版方式以及表单、按钮、表格、网格栅格化、导航等诸多元素。”Bootstrap的内置样式继承了Mark Otto简洁亮丽的设计风格，任何开发团队都能使用它提供的HTML模板、CSS样式和jQuery组件来布署或者重建一个外观漂亮的页面应用。

BootStrap 2的新特性

BootStrap 2在原有特性的基础上着重改进了用户的体验和交互性，比如新增加的媒体展示功能，适用于智能手机上多钟屏幕规格的响应式布局，另外新增了12款jQuery插件，可以满足Web页面常用的用户体验和交互功能。

BootStrap 2的运用

Bootstrap的文件结构

读 者可以直接从GitHub下载到Bootstrap源码，本地解压后可以看到这样的目录结构：docs、img、jquery-ui- bootstrap、js和less。其中最为重要的是“docs”下的CSS样式文件，“less”中的编译文件和“js”下的jQuery插件。

Bootstrap的安装

关于如何应用提取出来的文件大致有两步：第一是如何安装Bootstrap的基本样式，第二是如何调用Bootstrap的jQuery插件，我们首先来看样式的安装。

样式的安装有多种方法，图1展示的是一种常用的调用样式方法“link”。

这 里有两个关键点，其中“bootstrap.css”是Bootstrap中的基本样式文件，只要使用Bootstrap就必须调用这个文件。而 “bootstrap-responsive.css”则可以根据你的爱好来选择，如果想让项目具有响应式布局的效果，就必须要调用这个样式文件，而且调 用必须遵循先后顺序，“bootstrap-responsive.css”必须放置在“bootstrap.css”之后，否则便不具有响应式布局功 能。而最后的“style.css”是项目中的自定义样式，用来覆盖Bootstrap中的一些默认设置，便于开发者定制。

“CSS”样式安装完后，就可以进入“js”的调用，方法很简单，只需把想要的jQuery插件按照与上一步相似的方式加入到代码中。

Bootstrap 2的模块

BootStrap 2的模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的Less几个部分。与第1版相比，Bootstrap 2增加了多个新模块，比如布局框架中的“响应式布局”，页面排版中的“ICON”，基本组件中的“进度条”，而jQuery插件从以前的5个效果增加到 12个，完全可以满足项目常用的交互效果。下面来简单了解一下Bootstrap 2中各模块的功能。

页面布局

布局在每个项 目中都必不可少，Bootstrap在960gs的基础上扩展了一套优秀的Grids布局，而在“响应式布局”中有更强大的功能，能让网格布局适应各种设 备。使用也相当简单，只需要按照HTML模板应用，就能轻松地构建你所需的布局效果。此外，改变模板中的类名，就能实现不同的布局风格。比如常见的“固定 布局”，只需要在HTML中添加“container”类名；而要实现“流体布局”，只需要在HTML中添加“container-fluid”类名。 Bootstrap还为开发者设计了“Responsive”， 令布局框架更为出色。开发者可以在此基础上进行任何样式的覆盖，从而实现理想中的响应式设计。

页面排版

页面排版的好坏直接影 响产品风格，说直白点就是好不好看。在Bootstrap中，页面的排版都是从全局的概念上出发，定制了主体文本、段落文本、强调文本、标题、Code风 格、按钮、表单、表格等格式。而Bootstrap 2中又添加了几个新亮点。其一是“Code”使用了“Google Prettify”插件，增强了代码的阅读体验；其二在“按钮”中增加了组合、下拉、图标等效果，如图2所示。

第三就是“Icon”的使用，Bootstrap在“Icon”部分采用了“Sprites”技术，为大家准备了上百种常用的“Icon”图标应用。

说 起Icon，这里有必要在向读者推荐一个从BootStrap扩展出来的Font Awesome项目。它是Dave Gandy在Bootstrap的基础上扩展出来的一个Icon主题，最大的特点在于，整套图标中没有运用任何图片。大家可能会觉得奇怪，没有图片如何制 作Icon？难道是通过纯CSS编写的吗？是的，Font Awesome项目中主要运用了CSS3的“@font-face”和“伪元素”一起实现。

要使用Font Awesome，首先需要在服务器上安装“fontawesome-webfont”字体，接着在样式中通过“@font-face”来启用这些字体：

具备了上面的条件后，就只要样式中调用“FontAwesome”字体，并在“伪类元素”中使用对应的“字符编码”：

这样一来，就不采用任何图片实现Icon效果，一起来看一个效果图吧。

基本组件

基 本组件是Bootstrap 2的精华之一，里面都是开发者平时需要的交互组件。比如“网站导航”、“Tabs”、“工具条”、“面包屑”、“分页栏”、“提示标签”、“产品展示”、 “提示信息块”和“进度条”等。这些组件都配有“jQuery”插件，运用它们可以大幅度提高用户的交互体验，使产品不再那么呆板无吸引力。说了这么多种 组件，具体该如何使用？下面我以常见的“Tabs”组件为例，向大家展示使用方法。

要想使用BootStrap基本组件，必须满足三点：第一，最基本的HTML结构要对号；第二，需要Bootstrap中的“jQuery”插件提供相应功能；第三，在项目中对应的“Tabs”元素上启用“Tabs”功能。

1. HTML Markup

2. 调用jQuery插件

3. 开启“Tab”功能

对于其他组件，使用方法相近，在此不做赘述。

jQuery插件

Bootstrap中的jQuery插件主要用来帮助开发者实现与用户交互的功能，在第1版中，Bootstrap就为大家提供了6种常见的插件。

1. 弹出框（Modals）：在JavaScript模板基础上自定义的一款流线型、灵活性极强的弹出蒙板效果的插件；
2. 下拉框（Dropdowns）：Bootstrap中一款轻巧实用的插件，可能帮助你制作具有下拉功能，比如下拉菜单、下拉按钮、下拉工具条等效果；
3. 滚动条（Scrollspy）：实现滚动条位置的效果，比如在导航中有多个标签，用户点击其中一个标签，滚动条会自己动定位到导航中标签对应的文本位置；
4. Tabs：这个插件能够快速实现本地内容的转换，动态切换标签对应的本地内容；
5. 提示工具（Tooltips）：是一款优秀的jQuery插件，无需加载任何图片，采用CSS3新技术，动态显示“data-attributes”存储的标题信息；
6. 提示面板（Popover）：在Tooltips的插件上扩展，用来显示一些叠加内容的提示效果，此插件需要配合Tooltips一起使用。

Bootstrap 2在前面6种插件的基础上又新增加了6种jQuery插件：

1. 警报信息（Alert）：用来关闭警报信息块；
2. 按钮（Button）：用来控制按钮的状态或更多组件功能，比如“复选框”、“单选按钮”以及“载入状态条”等；
3. 手风琴（Collapse）：一款轻巧实用的手风琴插件，可以用来制作折叠面板或菜单等效果；
4. 幻灯片（Carouse）：实现图片播放功能的插件；
5. 补全文本（Typeahead）：可以记住文本框输入的文本，下次输入时可以自动补全；
6. 动画效果（Transitions）：BootStrap使用这个插件，为一些动效果增加了过渡性，使动画效果更细腻、生动。

上面简单介绍了Bootstrap 2中的jQuery插件，至于如何使用，还需要根据Bootstrap所提供的文档，以及各插件的参数，具体问题具体分析。因为只有充分了解，才能灵活运用。

变量编译Less

Less 是一个动态CSS语言框架，基于自己的JS引擎或者服务器端对传统的CSS进行了动态的扩展，使得Less具有更强大的功能和灵活性。基于Less，我们 编辑CSS就可以像使用编程语言一样，定义变量、嵌入声明、混合模式、运算等。Bootstrap中有一套编辑好的Less框架，开发者可以将其应用到自 己的项目，也可以通过less.js、Less.app或Node.js等方法来转译Less文件。Less文件一旦编译，Bootstrap框架就仅包 含CSS样式，这意味着没有多余的图片、Flash之类元素。Less好处是利于编写，但缺点是只适合用于开发一些简洁的CSS样式。举个简单的例子，如 果你想为多个样式设置同一个颜色，可以这样写。

编译后的CSS如下所示：

以上代码只是最简的Less应用示范。除了变量，还可以在CSS中进行数学运算、传参、文件相互引用、规则嵌套等。可以想象，这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性还是可维护性上，Less都让CSS开发效率有了大幅提升。

Bootstrap的jQuery UI

Bootstrap的jQuery UI其实是从框架中衍生出来的一个jQuery UI主题，受到Twitter项目的启发，Addy Osmani也在Bootstrap的基础上整理出一个jQuery UI Bootstrap主题。

jQuery UI Bootstrap除了包含Bootstrap各个方面功能之外，还在其基础上补充了以下特性：动态添加Tabs、日期范围选择组件、自定义文件载入框、滑动块、日期控件。

BootStrap 2案例

通过前面的介绍，你可能已经体会到Bootstrap的强大，但能否运用到生产项目中，可能还存有疑问。

目 前使用Bootstrap的著名案例有NASA和MSNBC的Breaking News。此外很多CMS也在运用Bootstrap框架，比如大家熟悉的WordPress、Drupal等。如果你还想了解更多Bootstrap案 例，可以参考Wrapbootstrap.com。

BootStrap 2的优势和缺点

如今的Bootstrap已包括了几十个组件，每个组件都自然地结合了设计与开发，具有完整的实例文档，定义了真正的组件和模板。无论处在何种技术水平的开发者，也无论处在哪个工作流程中，都可以使用Bootstrap快速、方便地构建开发者喜欢的应用。

难能可贵的是，Bootstrap依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题，不断完善自己，吸引更多人选择Bootstrap应用于自己的项目中。

然 而古人云“万物相生相克”，有好就有坏，Bootstrap也是一样。对于在国内的开发者来说，最可怕的就是IE兼容问题。目前Bootstrap对 IE6到IE8的支持都不友好。另一个缺点是，采用Bootstrap的模板，网站结构时常会显得臃肿。此外，覆盖一些样式时会造成代码冗余。但与其他前 端框架相比，我个人觉得Bootstrap的缺点仅此而以，至于其他方面希望有机会与大家一起探讨和学习。

总结

Bootstrap是一套前端开发利器。它可以帮助我们加速项目开发，让我们身处在一个完备的系统中，拥有一致的设计和实现方法。不需要在外观上花费过多时间，使开发者能将精力集中于更重要的功能。

Bootstrap将改变我们的合作方式与开发进程，任何人都可以基于Bootstrap建立可扩展的前端工具包，或者在它的基础上启动属于自己的框架。

最 后在次感谢《程序员》责任编辑——卢鸫翔老师，如果大家对这个感谢兴趣可以到这里下载PDF文档。

如需转载，烦请注明出处：http://www.w3cplus.com/css/twitter-bootstrap.html

大家好久没有看到藤藤的每日一练了吧，会不会觉得少了什么？难道藤藤同学不写案例了吗？不是的，因为最近我和藤藤一起在整理ICON　UI的库，希望这些UI的库能帮助大家解决一些ICON的制作时间，做到拿来就可以用。这些ICON　UI我们都是使用字体来制作的，用到的就是ＣＳＳ３的＠font-face属性，制作方法简单。只是类名和实体符的对应，大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature　Symbols，希望大家喜欢。

demodownload

HTML CODE

<a href="#" class="icon file">
　<span>
　　<em>file</em>
　　<em>&amp#xe048;</em>
　</span>
</a>

特别声明：由于例中制作了两百多个ICON，受限于篇幅问题，在这里不将所有的html结构展示出来，详细的可以点击DEMO按钮查看源码，或者直接下载源码查看。

CSS CODE

body {
　background-color: #fdfdfd;
}
.demo {
　width: 900px;
　text-align: left;
　margin: auto;
}
.control_buttons li {
　display: inline-block;
　margin-right: 10px;
}
.icon {
　position: relative;
　display: inline-block;
　color: #545454;
　width: 40px;
　height: 30px;
　line-height: 30px;
　text-align: center;
　margin-bottom: 20px;
　box-shadow: 0 1px 0 #f4f4f4 inset;
　border: 1px solid #7d7d7d;
　border-radius: 3px;
　background: -webkit-linear-gradient(top,#ececec,#bfbfbf);
　background: -moz-linear-gradient(top,#ececec,#bfbfbf);
　background: linear-gradient(top,#ececec,#bfbfbf);
}
.icon:hover {
　color: #545454;
　text-decoration:none;
　background: -webkit-linear-gradient(top,#f7f5f5,#c9c7c7);
　background: -moz-linear-gradient(top,#f7f5f5,#c9c7c7);
　background: linear-gradient(top,#f7f5f5,#c9c7c7);
}
.icon:hover span {
　max-height: 72px;
}
.icon span {
　position: absolute;
　left: -32px;
　top: 30px;
　display: block;
　overflow: hidden;
　max-height: 0;
　text-align: center;
　-webkit-transition: max-height .3s linear;
  -moz-transition: max-height .3s linear;
　transition: max-height .3s linear;
　z-index: 2;
}
.icon span em {
　display: block;
　width: 100px;
　line-height: 26px;
　font-style: normal;
　color: #fff;
　text-shadow:0 0 0 #fff;
　margin-top: 10px;
　border-radius: 2px 2px 0 0;
　background-color:#363636;
　z-index: 3;
}
.icon span em + em {
　margin-top: 0;
　border-radius: 0 0 2px 2px;
　background-color:#313131;
}
.icon span em:hover {
　background-color:#444;
}
.icon span em:after {
　position: absolute;
　left: 50%;
　top: 0;
　content: '';
　width: 1px;
　height: 1px;
　border: 5px solid transparent;
　border-bottom-color: #363636;
　margin-left: -5px;
}
.icon:after {
  font-family: 'LigatureSymbols';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
  font-size: 26px;
}
.file:after {
　content:"file";
}
.print:after {
　content:"print";
}
.delete:after {
　content:"delete";
}
.clear:after {
　content:"clear";
}
.save:after {
　content:"save";
}
.upload:after {
　content:"upload";
}
.cloud:after {
　content:"cloud";
}
.folder:after {
　content:"folder";
}
.camera:after {
　content:"camera";
}
.photo:after {
　content:"photo";
}
.image:after {
　content:"image";
}
.barcode:after {
　content:"barcode";
}
.phone:after {
　content:"phone";
}
.music:after {
　content:"music";
}
.video:after {
　content:"video";
}
.playmedia:after {
　content:"playmedia";
}
.record:after {
　content:"record";
}
.play:after {
　content:"play";
}
.pause:after {
　content:"pause";
}
.stop:after {
　content:"stop";
}
.eject:after {
　content:"eject";
}
.bell:after {
　content:"bell";
}
.volumeup:after {
　content:"volumeup";
}
.volumedown:after {
　content:"volumedown";
}
.volume:after {
　content:"volume";
}
.off:after {
　content:"off";
}
.light:after {
　content:"light";
}
.dark:after {
　content:"dark";
}
.lock:after {
　content:"lock";
}
.unlock:after {
　content:"unlock";
}
.flag:after {
　content:"flag";
}
.wifi:after {
　content:"wifi";
}
.time:after {
　content:"time";
}
.map:after {
　content:"map";
}
.geo:after {
　content:"wifi";
}
.location:after {
　content:"location";
}
.pin:after {
　content:"pin";
}
.walking:after {
　content:"walking";
}
.bicycle:after {
　content:"bicycle";
}
.car:after {
　content:"car";
}
.bus:after {
　content:"bus";
}
.plane:after {
　content:"plane";
}
.compass:after {
　content:"compass";
}
.arrowup:after {
　content:"arrowup";
}
.arrowright:after {
　content:"arrowright";
}
.arrowdown:after {
　content:"arrowdown";
}
.arrowleft:after {
　content:"arrowleft";
}
.up:after {
　content:"up";
}
.right:after {
　content:"right";
}
.down:after {
　content:"down";
}
.left:after {
　content:"left";
}
.back:after {
　content:"back";
}
.next:after {
　content:"next";
}
.dropdown:after {
　content:"dropdown";
}
.sort:after {
　content:"sort";
}
.good:after {
　content:"good";
}
.bad:after {
　content:"bad";
}
.full:after {
　content:"full";
}
.small:after {
　content:"small";
}
.move:after {
　content:"move";
}
.undo:after {
　content:"undo";
}
.forward:after {
　content:"forward";
}
.reply:after {
　content:"reply";
}
.share:after {
　content:"share";
}
.login:after {
　content:"login";
}
.logout:after {
　content:"logout";
}
.exchange:after {
　content:"exchange";
}
.shuffle:after {
　content:"shuffle";
}
.repeat:after {
　content:"repeat";
}
.refresh:after {
　content:"refresh";
}
.sync:after {
　content:"sync";
}
.external:after {
　content:"external";
}
.addstar:after {
　content:"addstar";
}
.star:after {
　content:"star";
}
.starempty:after {
　content:"starempty";
}
.heart:after {
　content:"heart";
}
.share:after {
　content:"share";
}
.heartempty:after {
　content:"heartempty";
}
.view:after {
　content:"view";
}
.comment:after {
　content:"comment";
}
.comments:after {
　content:"comments";
}
.plus:after {
　content:"plus";
}
.minus:after {
　content:"minus";
}
.zoomin:after {
　content:"zoomin";
}
.zoomout:after {
　content:"zoomout";
}
.search:after {
　content:"search";
}
.menu:after {
　content:"menu";
}
.tilemenu:after {
　content:"tilemenu";
}
.list:after {
　content:"list";
}
.tile:after {
　content:"tile";
}
.table:after {
　content:"table";
}
.copy:after {
　content:"copy";
}
.cut:after {
　content:"cut";
}
.backspace:after {
　content:"backspace";
}
.alignleft:after {
　content:"alignleft";
}
.aligncenter:after {
　content:"aligncenter";
}
.alignright:after {
　content:"alignright";
}
.alignadjust:after {
　content:"alignadjust";
}
.italic:after {
　content:"italic";
}
.bold:after {
　content:"bold";
}
.underline:after {
　content:"underline";
}
.strike:after {
　content:"strike";
}
.emphasis:after {
　content:"emphasis";
}
.code:after {
　content:"code";
}
.link:after {
　content:"link";
}
.quote:after {
　content:"quote";
}
.graph:after {
　content:"graph";
}
.magic:after {
　content:"magic";
}
.brush:after {
　content:"brush";
}
.color:after {
　content:"color";
}
.contrast:after {
　content:"contrast";
}
.ink:after {
　content:"ink";
}
.gradation:after {
　content:"gradation";
}
.sepia:after {
　content:"sepia";
}
.invert:after {
　content:"invert";
}
.paint:after {
　content:"paint";
}
.paramater:after {
　content:"paramater";
}
.crop:after {
　content:"crop";
}
.check:after {
　content:"check";
}
.checkbox:after {
　content:"checkbox";
}
.checkboxempty:after {
　content:"checkboxempty";
}
.pc:after {
　content:"pc";
}
.keyboard:after {
　content:"keyboard";
}
.mobile:after {
　content:"mobile";
}
.horizontal:after {
　content:"horizontal";
}
.vertical:after {
　content:"vertical";
}
.web:after {
　content:"web";
}
.mail:after {
　content:"mail";
}
.shopping:after {
　content:"shopping";
}
.dashboard:after {
　content:"dashboard";
}
.key:after {
　content:"key";
}
.sns:after {
　content:"sns";
}
.calender:after {
　content:"calender";
}
.dailycalender:after {
　content:"dailycalender";
}
.ban:after {
　content:"ban";
}
.remove:after {
　content:"remove";
}
.pen:after {
　content:"pen";
}
.eraser:after {
　content:"eraser";
}
.edit:after {
　content:"edit";
}
.tabs:after {
　content:"tabs";
}
.tag:after {
　content:"tag";
}
.setup:after {
　content:"setup";
}
.setting:after {
　content:"setting";
}
.etc:after {
　content:"etc";
}
.clip:after {
　content:"clip";
}
.bookmark:after {
　content:"bookmark";
}
.book:after {
　content:"book";
}
.album:after {
　content:"album";
}
.user:after {
　content:"user";
}
.friend:after {
　content:"friend";
}
.group:after {
　content:"group";
}
.frustrate:after {
　content:"frustrate";
}
.laugh:after {
　content:"laugh";
}
.wink:after {
　content:"wink";
}
.smile:after {
　content:"smile";
}
.surprise:after {
　content:"surprise";
}
.trouble:after {
　content:"trouble";
}
.game:after {
　content:"game";
}
.globe:after {
　content:"globe";
}
.home:after {
　content:"home";
}
.building:after {
　content:"building";
}
.rss:after {
　content:"rss";
}
.app:after {
　content:"app";
}
.memo:after {
　content:"memo";
}
.meal:after {
　content:"meal";
}
.coffee:after {
　content:"coffee";
}
.present:after {
　content:"present";
}
.twinkle:after {
　content:"twinkle";
}
.crown:after {
　content:"crown";
}
.category:after {
　content:"category";
}
.circle:after {
　content:"circle";
}
.info:after {
　content:"info";
}
.help:after {
　content:"help";
}
.refreshbutton:after {
　content:"refreshbutton";
}
.notify:after {
　content:"notify";
}
/*--logos--*/
.apple:after {
　content:"apple";
}
.android:after {
　content:"android";
}
.windows:after {
　content:"windows";
}
.amazon:after {
　content:"amazon";
}
.facebook:after {
　content:"facebook";
}
.twitter:after {
　content:"twitter";
}
.google:after {
　content:"google";
}
.hatena:after {
　content:"hatena";
}
.linkedin:after {
　content:"linkedin";
}
.mixi:after {
　content:"mixi";
}
.line:after {
　content:"line";
}
.mobage:after {
　content:"mobage";
}
.gree:after {
　content:"gree";
}
.skype:after {
　content:"skype";
}
.foursquare:after {
　content:"foursquare";
}
.pinterest:after {
　content:"pinterest";
}
.flickr:after {
　content:"flickr";
}
.tumblr:after {
　content:"tumblr";
}
.evernote:after {
　content:"evernote";
}
.github:after {
　content:"github";
}
.dribbble:after {
　content:"dribbble";
}
.cookpad:after {
　content:"cookpad";
}
.instapaper:after {
　content:"instapaper";
}
.readability:after {
　content:"readability";
}
.gumroad:after {
　content:"gumroad";
}
.picasa:after {
　content:"picasa";
}
.instagram:after {
　content:"instagram";
}
.delicious:after {
　content:"delicious";
}
.youtube:after {
　content:"youtube";
}
.chrome:after {
　content:"chrome";
}
.safari:after {
　content:"safari";
}
.sleipnir:after {
　content:"sleipnir";
}
.firefox:after {
　content:"firefox";
}
.opera:after {
　content:"opera";
}
.ie:after {
　content:"ie";
}
@font-face {
  font-family: 'LigatureSymbols';
  src: url('font/LigatureSymbols-2.05.eot');
  src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
       url('font/LigatureSymbols-2.05.woff') format('woff'),
       url('font/LigatureSymbols-2.05.ttf') format('truetype'),
       url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
  font-weight: normal;
  font-style: normal;
}	

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/ligature-icon-ui.html

CSS3制作秒表效果，以前想都不敢想，但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果，让我们想都不敢想象，曾经需要javaScript的效果，如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示，本例中每个数定的宽度和高度都定死了，其动画实现主要逻辑是通过对数字进行绝对定位，依靠改变数字的“top”属性值来实现时间数字的变更，当关还需要大家计算好他们之间转换的速率。所以说这个例子绝对是一个练习CSS3的animation属性的好例子，你要是掌握了这个例子，我想你对animation会有一个质的认识，希望大家喜欢（^_^）。

demodownload

HTML CODE

<div class="container">
  <!-- time to add the controls -->
  <input id="start" name="controls" type="radio" />
  <input id="stop" name="controls" type="radio" />
  <input id="reset" name="controls" type="radio" />
  <div class="timer">
    <div class="cell">
      <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
      <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
      <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
    </div>
    <div class="cell">
      <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
      <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
    </div>
    <div class="cell">
      <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
      <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
      <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
      <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
  </div>
  <!-- Lables for the controls -->
  <div id="timer_controls">
  <label for="start">Start</label>
  <label for="stop">Stop</label>
  <label for="reset">Reset</label>
</div>

CSS CODE

body{
 background: url('wood_pattern.png') repeat;
}
.container {
 padding: 50px;
 text-align: center;
}

.timer {
 padding: 10px;
 background: -webkit-linear-gradient(top, #222, #444);
 background: -moz-linear-gradient(top, #222, #444);
 background: -ms-linear-gradient(top, #222, #444);
 background: -o-linear-gradient(top, #222, #444);
 background: linear-gradient(top, #222, #444);
 overflow: hidden;
 display: inline-block;
 border: 7px solid #efefef;
 border-radius: 5px;
 position: relative;	
 box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
 /*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/
 width: 0.60em;
 height: 40px;
 font-size: 50px;
 overflow: hidden;
 position: relative;
 float: left;
}
.numbers {
 width: 0.6em;
 line-height: 40px;
 font-family: digital, arial, verdana;
 text-align: center;
 color: #fff;
 position: absolute;
 top: 0;
 left: 0;
 /*数字发光效果*/
 text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
/*秒表控制器样式*/
#timer_controls {
 margin-top: -5px;
}
#timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

/*Control code*/
/*秒表暂停运转*/
#stop:checked~.timer .numbers {
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
/*秒表开始运转*/
#start:checked~.timer .numbers {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;
}
/*重置秒表*/
#reset:checked~.timer .numbers {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}

.moveten {
 /*使用分步骤来移动数字，10个数字等于10步*/
 -webkit-animation: moveten 1s steps(10, end) infinite;
 -moz-animation: moveten 1s steps(10, end) infinite;
 -o-animation: moveten 1s steps(10, end) infinite;
 -ms-animation: moveten 1s steps(10, end) infinite;
 animation: moveten 1s steps(10, end) infinite;
 /*默认情况下动画是停止不动的*/
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
.movesix {
 -webkit-animation: movesix 1s steps(6, end) infinite;
 -moz-animation: movesix 1s steps(6, end) infinite;
 -o-animation: movesix 1s steps(6, end) infinite;
 -ms-animation: movesix 1s steps(6, end) infinite;
 animation: movesix 1s steps(6, end) infinite;
}

/*同步时间的速率*/
/*每秒十个数字，因此也需要十步*/
.second {
 -webkit-animation-duration: 10s;
 -moz-animation-duration: 10s;
 -o-animation-duration: 10s;
 -ms-animation-duration: 10s;
 animation-duration: 10s;
}
.tensecond {
  /*60 times .second*/
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
  -o-animation-duration: 60s;
  -ms-animation-duration: 60s;
  animation-duration: 60s;
} 

.milisecond {
  /*1/10th of .second*/
  -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 -ms-animation-duration: 1s;
 animation-duration: 1s;
} 
.tenmilisecond {
  -webkit-animation-duration: 0.1s;
  -moz-animation-duration: 0.1s;
  -ms-animation-duration: 0.1s;
  -o-animation-duration: 0.1s;
  animation-duration: 0.1s;
}
.hundredmilisecond {
  -webkit-animation-duration: 0.01s;
  -moz-animation-duration: 0.01s;
  -o-animation-duration: 0.01s;
  -ms-animation-duration: 0.01s;
  animation-duration: 0.01s;
}

.minute {
  /*60 times .second*/
  -webkit-animation-duration: 600s;
 -moz-animation-duration: 600s;
 -o-animation-duration: 600s;
 -ms-animation-duration: 600s;
 animation-duration: 600s;
} 
.tenminute {
  /*60 times .minute*/
  -webkit-animation-duration: 3600s;
 -moz-animation-duration: 3600s;
 -ms-animation-duration: 3600s;
 -o-animation-duration: 3600s;
 animation-duration: 3600s;
} 

.hour {
  /*60 times .minute*/
  -webkit-animation-duration: 36000s;
 -moz-animation-duration: 36000s;
 -ms-animation-duration: 36000s;
 -o-animation-duration: 36000s;
 animation-duration: 36000s;
} 
.tenhour {
  /*10 times .hour*/
  -webkit-animation-duration: 360000s;
 -moz-animation-duration: 360000s;
 -o-animation-duration: 360000s;
 -ms-animation-duration: 360000s;
 animation-duration: 360000s;
} 

/*------------------------------------------------------------*\
1、动画的逻辑就是给数字使用了绝对定位，改变“top”的属性值；
2、分 和 秒 应该是 '60'而不是 '100'，因此需要创建两个动画；
3、十步十个数字
4、六步六个数字
\*-------------------------------------------------------------*/
@-webkit-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-webkit-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-moz-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-moz-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@-o-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}
@-o-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@-ms-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-ms-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
/*Lets use a better font for the numbers*/
@font-face {
 font-family: 'digital';
 src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');
}	

demodownload

此案例代码来自于thecodeplayer.com，并做过相应的代码处理。

如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-create-a-stopwatch.html