今天这个案例不单单是一个CSS3的练习案例，他还是一个按钮库，在这个基础上你可以演变更多的按钮效果。说得在大一点，这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻，藤藤花了很多心思，正如她所说，在制作这些按钮时，学到很多新的东西，CSS3的属性运用就不多说了，还学到了如何组织代码，如何供用共性的东西等等，如果你感兴趣不仿跟藤藤一起做一下这个案例，我想你会有所收获的。

demodownload

HTML结构

<button type="button" class="button gray">BUY NOW</button>
<button type="button" class="button black">BUY NOW</button>
<button type="button" class="button red">BUY NOW</button>
<button type="button" class="button yellow">BUY NOW</button>
<button type="button" class="button green">BUY NOW</button>
<button type="button" class="button blue">BUY NOW</button>

<button type="button" class="button gray round">DOWNLOAD</button>
<button type="button" class="button black round">DOWNLOAD</button>
<button type="button" class="button red round">DOWNLOAD</button>
<button type="button" class="button yellow round">DOWNLOAD</button>
<button type="button" class="button green round">DOWNLOAD</button>
<button type="button" class="button blue round">DOWNLOAD</button>

<button type="button" class="button gray side">DOWNLOAD</button>
<button type="button" class="button black side">DOWNLOAD</button>
<button type="button" class="button red side">DOWNLOAD</button>
<button type="button" class="button yellow side">DOWNLOAD</button>
<button type="button" class="button green side">DOWNLOAD</button>
<button type="button" class="button blue side">DOWNLOAD</button>

<button type="button" class="button gray tags">SIGN UP</button>
<button type="button" class="button black tags">SIGN UP</button>
<button type="button" class="button red tags">SIGN UP</button>
<button type="button" class="button yellow tags">SIGN UP</button>
<button type="button" class="button green tags">SIGN UP</button>
<button type="button" class="button blue tags">SIGN UP</button>

<button type="button" class="button gray rarrow">LEARN MORE</button>
<button type="button" class="button black rarrow">LEARN MORE</button>
<button type="button" class="button red rarrow">LEARN MORE</button>
<button type="button" class="button yellow rarrow">LEARN MORE</button>
<button type="button" class="button green rarrow">LEARN MORE</button>
<button type="button" class="button blue rarrow">LEARN MORE</button>

<button type="button" class="button gray larrow">GO BACK</button>
<button type="button" class="button black larrow">GO BACK</button>
<button type="button" class="button red larrow">GO BACK</button>
<button type="button" class="button yellow larrow">GO BACK</button>
<button type="button" class="button green larrow">GO BACK</button>
<button type="button" class="button blue larrow">GO BACK</button>

请注明上面结构中的类名运用。

CSS 代码

body{ 
  background: #f5faff;
}
.demo_con{
  width: 960px;
  margin:40px auto 0;
}
.button{
  width: 140px;
  line-height: 38px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-shadow:1px 1px 1px #333;
  border-radius: 5px;
  margin:0 20px 20px 0;
  position: relative;
  overflow: hidden;
}
.button:nth-child(6n){
  margin-right: 0;
}
.button.gray{
  color: #8c96a0;
  text-shadow:1px 1px 1px #fff;
  border:1px solid #dce1e6;
  box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
  background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
  background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
  background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{
  border:1px solid #333;
  box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
  background: -webkit-linear-gradient(top,#656565,#4c4c4c);
  background: -moz-linear-gradient(top,#656565,#4a4a4a);
  background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{
  border:1px solid #b42323;
  box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
  background: -webkit-linear-gradient(top,#d53939,#b92929);
  background: -moz-linear-gradient(top,#d53939,#b92929);
  background: linear-gradient(top,#d53939,#b92929);
}
.button.yellow{
  border:1px solid #d2a000;
  box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
  background: -webkit-linear-gradient(top,#fece34,#d8a605);
  background: -moz-linear-gradient(top,#fece34,#d8a605);
  background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{
  border:1px solid #64c878;
  box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
  background: -webkit-linear-gradient(top,#90dfa2,#84d494);
  background: -moz-linear-gradient(top,#90dfa2,#84d494);
  background: linear-gradient(top,#90dfa2,#84d494);
}
.button.blue{
  border:1px solid #1e7db9;
  box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
  background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
  background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
  background: linear-gradient(top,#42a4e0,#2e88c0);
}
.round,
.side,
.tags{
  padding-right: 30px;
}
.round:after{
  position: absolute;
  display: inline-block;
  content: "\003c";
  top:50%;
  right:10px;
  margin-top: -10px;
  width: 17px;
  height: 20px;
  padding-left: 3px;
  line-height:18px;
  font-size: 10px;
  font-weight: normal;
  border-radius: 10px;
  text-shadow:-2px 0 1px #333;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg); 
  transform:rotate(-90deg);
}
.gray.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
  background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
  background:linear-gradient(top,#dce1e6,#dde2e7);
  text-shadow:-2px 0 1px #fff;
}
.black.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9);
  background:-webkit-linear-gradient(top,#333,#454545);
  background:-moz-linear-gradient(top,#333,#454545);
  background:linear-gradient(top,#333,#454545);
}
.red.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9);
  background:-webkit-linear-gradient(top,#b12222,#b42323);
  background:-moz-linear-gradient(top,#b12222,#b42323);
  background:linear-gradient(top,#b12222,#b42323);
}
.yellow.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
  background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
  background:-moz-linear-gradient(top,#cf9d00,#d2a000);
  background:linear-gradient(top,#cf9d00,#d2a000);                         
}
.green.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
  background:-webkit-linear-gradient(top,#64c878,#6dcb80);
  background:-moz-linear-gradient(top,#64c878,#6dcb80);
  background:linear-gradient(top,#64c878,#6dcb80);                         
}
.blue.round:after{
  box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9);
  background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);
  background:-moz-linear-gradient(top,#1e7db9,#2b85bd);
  background:linear-gradient(top,#1e7db9,#2b85bd);                         
}
.side:after{
  position: absolute;
  display: inline-block;
  content: "\00bb";
  top:3px;
  right:-4px;
  width: 38px;
  height:30px;
  font-weight: normal;
  line-height: 26px;
  border-radius:0 0 5px 5px;
  text-shadow:-2px 0 1px #333;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  transform:rotate(-90deg);
}
.gray.side:after{
  text-shadow:-2px 0 1px #fff;
  border-top: 1px solid #d4d4d4;
  box-shadow:-2px 0 1px #eceef1 inset;
  background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
  background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
  background:linear-gradient(right,#e1e6ea,#f2f2f6 60%); 
}
.black.side:after{
  border-top: 1px solid #222;
  box-shadow:-2px 0 1px #606060 inset;
  background:-webkit-linear-gradient(right,#373737,#555 60%);
  background:-moz-linear-gradient(right,#373737,#555 60%);
  background:linear-gradient(right,#373737,#555 60%); 
}
.red.side:after{
  border-top: 1px solid #aa1e1e;
  box-shadow:-2px 0 1px #c75959 inset;
  background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
  background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
  background:linear-gradient(top,#b82929,#d73f3f 60%); 
}
.yellow.side:after{
  border-top: 1px solid #ba8f06;
  box-shadow:-2px 0 1px #deb842 inset;
  background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
  background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
  background:linear-gradient(right,#d5a406,#fdc40b 60%); 
}
.green.side:after{
  border-top: 1px solid #53b567;
  box-shadow:-2px 0 1px #8ad599 inset;
  background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
  background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
  background:linear-gradient(right,#69ca7c,#91e5a5 60%); 
}
.blue.side:after{
  border-top: 1px solid #1971a8;
  box-shadow:-2px 0 1px #559dca inset;
  background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
  background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
  background:linear-gradient(right,#2482bd,#3fa2e0 60%); 
}
.tags:after{
  font-weight: normal;
  position: absolute;
  display: inline-block;
  content: "FREE";
  top:-3px;
  right: -33px;
  color: #fff;
  text-shadow:none;
  width: 85px;
  height:25px;
  line-height: 28px;
  -webkit-transform:rotate(45deg) scale(.7,.7);
  -moz-transform:rotate(45deg) scale(.7,.7);
  transform:rotate(45deg) scale(.7,.7);
}
.gray.tags:after{
  background: #8c96a0;
  border:2px solid #fff;	
}
.black.tags:after{
  background: #333;
  border:2px solid #777;	
}
.red.tags:after{
  background: #b42323;
  border:2px solid #df4141;	
}
.yellow.tags:after{
  background: #d2a000;
  border:2px solid #fcc100;	
}
.green.tags:after{
  background: #64c878;
  border:2px solid #9bebac;	
}
.blue.tags:after{
  background: #1e7db9;
  border:2px solid #54b1e9;	
}
.button.rarrow,
.button.larrow{
  overflow:visible;
}
.rarrow:after,	
.rarrow:before,
.larrow:after,	
.larrow:before{
  position:absolute;
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
}
.rarrow:before{
  width: 27px;
  height: 27px;
  top: 6px;
  right: -13px;
  clip: rect(auto auto 26px 2px);
}
.rarrow:after{
  top: 6px;
  right: -12px;
  clip: rect(auto auto 26px 2px);
}
.gray.rarrow:before{
  background: #d6dbe0;
}
.gray.rarrow:after{
  box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
  background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
  background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
  background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.rarrow:before{
  background: #333;
}
.black.rarrow:after{
  box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
  background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
  background:-moz-linear-gradient(top left,#656565,#4C4C4C);
  background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.rarrow:before{
  background: #B42323;
}
.red.rarrow:after{
  box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
  background:-webkit-linear-gradient(top left,#D53939,#B92929);
  background:-moz-linear-gradient(top left,#D53939,#B92929);
  background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.rarrow:before{
  background: #D2A000;
}
.yellow.rarrow:after{
  box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
  background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
  background:-moz-linear-gradient(top left,#FECE34,#D8A605);
  background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.rarrow:before{
  background: #64C878;
}
.green.rarrow:after{
  box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
  background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
  background:-moz-linear-gradient(top left,#90DFA2,#84D494);
  background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.rarrow:before{
  background: #1E7DB9;
}
.blue.rarrow:after{
  box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
  background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
  background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
  background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.larrow:before{
  top: 6px;
  left: -13px;
  width: 27px;
  height: 27px;
  clip: rect(2px 26px auto auto);
}
.larrow:after{
  top: 6px;
  left: -12px;
  clip: rect(2px 26px auto auto);
}
.gray.larrow:before{
  background: #d6dbe0;
}
.gray.larrow:after{
  box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
  background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
  background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
  background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.larrow:before{
  background: #333;
}
.black.larrow:after{
  box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
  background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
  background:-moz-linear-gradient(top left,#656565,#4C4C4C);
  background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.larrow:before{
  background: #B42323;
}
.red.larrow:after{
  box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
  background:-webkit-linear-gradient(top left,#D53939,#B92929);
  background:-moz-linear-gradient(top left,#D53939,#B92929);
  background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.larrow:before{
  background: #D2A000;
}
.yellow.larrow:after{
  box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
  background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
  background:-moz-linear-gradient(top left,#FECE34,#D8A605);
  background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.larrow:before{
  background: #64C878;
}
.green.larrow:after{
  box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
  background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
  background:-moz-linear-gradient(top left,#90DFA2,#84D494);
  background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.larrow:before{
  background: #1E7DB9;
}
.blue.larrow:after{
  box-shadow: 0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
  background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
  background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
  background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.gray:hover{
  background: -webkit-linear-gradient(top,#fefefe,#ebeced);
  background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
  background: linear-gradient(top,#f2f3f7,#ebeced);
}
.black:hover{
  background: -webkit-linear-gradient(top,#818181,#575757);
  background: -moz-linear-gradient(top,#818181,#575757);
  background: linear-gradient(top,#818181,#575757);
}
.red:hover{
  background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
  background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
  background: linear-gradient(top,#eb6f6f,#c83c3c);
}
.yellow:hover{
  background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
  background: -moz-linear-gradient(top,#ffd859,#e3bb38);
  background: linear-gradient(top,#ffd859,#e3bb38);
}
.green:hover{
  background: -webkit-linear-gradient(top,#aaebb9,#82d392);
  background: -moz-linear-gradient(top,#aaebb9,#82d392);
  background: linear-gradient(top,#aaebb9,#82d392);
}
.blue:hover{
  background: -webkit-linear-gradient(top,#70bfef,#4097ce);
  background: -moz-linear-gradient(top,#70bfef,#4097ce);
  background: linear-gradient(top,#70bfef,#4097ce);
}
.gray:active{
  top:1px;
  box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
  background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
  background: linear-gradient(top,#e4e8ec,#e4e8ec);
}
.black:active{
  top:1px;
  box-shadow: 0 1px 3px #111 inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#424242,#575757);
  background: -moz-linear-gradient(top,#424242,#575757);
  background: linear-gradient(top,#424242,#575757);
}
.red:active{
  top:1px;
  box-shadow: 0 1px 3px #5b0505 inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
  background: -moz-linear-gradient(top,#b11a1a,#bf2626);
  background: linear-gradient(top,#b11a1a,#bf2626);
}
.yellow:active{
  top:1px;
  box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#d3a203,#dba907);
  background: -moz-linear-gradient(top,#d3a203,#dba907);
  background: linear-gradient(top,#d3a203,#dba907);
}
.green:active{
  top:1px;
  box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
  background: -moz-linear-gradient(top,#5eac6e,#72b37e);
  background: linear-gradient(top,#5eac6e,#72b37e);
}
.blue:active{
  top:1px;
  box-shadow: 0 1px 3px #114566 inset,0 3px 0 #fff;
  background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
  background: -moz-linear-gradient(top,#1a71a8,#1976b1);
  background: linear-gradient(top,#1a71a8,#1976b1);
}
.gray.side:hover:after{
  background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
  background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
  background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
}
.black.side:hover:after{
  background:-webkit-linear-gradient(right,#555,#6f6f6f 60%);
  background:-moz-linear-gradient(right,#555,#6f6f6f 60%);
  background:linear-gradient(right,#555,#6f6f6f 60%); 
}
.red.side:hover:after{
  background:-webkit-linear-gradient(right,#c43333,#dc4949 60%);
  background:-moz-linear-gradient(right,#c43333,#dc4949 60%);
  background:linear-gradient(right,#c43333,#dc4949 60%); 
}
.yellow.side:hover:after{
  background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
  background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
  background:linear-gradient(right,#e1b21a,#fbc71d 60%); 
}
.green.side:hover:after{
  background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
  background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
  background:linear-gradient(right,#85da95,#94e0a5 60%); 
}
.blue.side:hover:after{
  background:-webkit-linear-gradient(right,#338fc8,#56b2eb 60%);
  background:-moz-linear-gradient(right,#338fc8,#56b2eb 60%);
  background:linear-gradient(right,#338fc8,#56b2eb 60%); 
}
.gray.side:active:after{
  top:4px;
  border-top: 1px solid #9fa6ab;
  box-shadow:-1px 0 1px #a8abae inset;
  background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
  background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
  background:linear-gradient(right,#e4e8ec,#e4e8ec 60%); 
}
.black.side:active:after{
  box-shadow:-1px 0 1px #111 inset;
  background:-webkit-linear-gradient(right,#414040,#4d4c4c 60%);
  background:-moz-linear-gradient(right,#414040,#4d4c4c 60%);
  background:linear-gradient(right,#414040,#4d4c4c 60%); 
}
.red.side:active:after{
  box-shadow:-1px 0 1px #4b0707 inset;
  background:-webkit-linear-gradient(right,#b11a1a,#b11a1a 60%);
  background:-moz-linear-gradient(right,#b11a1a,#b11a1a 60%);
  background:linear-gradient(right,#b11a1a,#b11a1a 60%); 
}
.yellow.side:active:after{
  box-shadow:-1px 0 1px #816b1f inset;
  background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
  background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
  background:linear-gradient(right,#d3a203,#dba907 60%); 
}
.green.side:active:after{
  box-shadow:-1px 0 1px #33663d inset;
  background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
  background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
  background:linear-gradient(right,#63a870,#72b37e 60%); 
}
.blue.side:active:after{
  box-shadow:-1px 0 1px #114566 inset;
  background:-webkit-linear-gradient(right,#1a71a8,#1976b1 60%);
  background:-moz-linear-gradient(right,#1a71a8,#1976b1 60%);
  background:linear-gradient(right,#1a71a8,#1976b1 60%); 
}
.gray.rarrow:hover:after,
.gray.rarrow:hover:after{
  background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
  background:-moz-linear-gradient(top left,#fefefe,#ebeced);
  background:linear-gradient(top left,#fefefe,#ebeced);
}
.black.rarrow:hover:after,
.black.larrow:hover:after{
  background:-webkit-linear-gradient(top left,#818181,#575757);
  background:-moz-linear-gradient(top left,#818181,#575757);
  background:linear-gradient(top left,#818181,#575757);
}
.red.rarrow:hover:after,
.red.larrow:hover:after{
  background:-webkit-linear-gradient(top left,#eb6f6f,#c83c3c);
  background:-moz-linear-gradient(top left,#eb6f6f,#c83c3c);
  background:linear-gradient(top left,#eb6f6f,#c83c3c);
}
.yellow.rarrow:hover:after,
.yellow.larrow:hover:after{
  background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
  background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
  background:linear-gradient(top left,#ffd859,#e3bb38);
}
.green.rarrow:hover:after,
.green.larrow:hover:after{
  background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
  background:-moz-linear-gradient(top left,#aaebb9,#82d392);
  background:linear-gradient(top left,#aaebb9,#82d392);
}
.blue.rarrow:hover:after,
.blue.larrow:hover:after{
  background:-webkit-linear-gradient(top left,#70bfef,#4097ce);
  background:-moz-linear-gradient(top left,#70bfef,#4097ce);
  background:linear-gradient(top left,#70bfef,#4097ce);
}
.gray.rarrow:active:after,
.gray.larrow:active:after{
  background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
  background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
  background:linear-gradient(top left,#e4e8ec,#e4e8ec);
}
.black.rarrow:active:after,
.black.larrow:active:after{
  background:-webkit-linear-gradient(top left,#424242,#575757);
  background:-moz-linear-gradient(top left,#424242,#575757);
  background:linear-gradient(top left,#424242,#575757);
}
.red.rarrow:active:after,
.red.larrow:active:after{
  background:-webkit-linear-gradient(top left,#b11a1a,#bf2626);
  background:-moz-linear-gradient(top left,#b11a1a,#bf2626);
  background:linear-gradient(top left,#b11a1a,#bf2626);
}
.yellow.rarrow:active:after,
.yellow.larrow:active:after{
  background:-webkit-linear-gradient(top left,#d3a203,#dba907);
  background:-moz-linear-gradient(top left,#d3a203,#dba907);
  background:linear-gradient(top left,#d3a203,#dba907);
}
.green.rarrow:active:after,
.green.larrow:active:after{
  background:-webkit-linear-gradient(top left,#63a870,#72b37e);
  background:-moz-linear-gradient(top left,#63a870,#72b37e);
  background:linear-gradient(top left,#63a870,#72b37e);
}
.blue.rarrow:active:after,
.blue.larrow:active:after{
  background:-webkit-linear-gradient(top left,#1a71a8,#1976b1);
  background:-moz-linear-gradient(top left,#1a71a8,#1976b1);
  background:linear-gradient(top left,#1a71a8,#1976b1);
}
.gray.rarrow:active:after{
  box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
}
.gray.larrow:active:after{
  box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
}
.black.rarrow:active:after{
  box-shadow: 0 1px 0 #333 inset,-1px 0 0 #333 inset;
}
.black.larrow:active:after{
  box-shadow: 0 -1px 0 #333 inset,1px 0 0 #333 inset;
}
.red.rarrow:active:after{
  box-shadow: 0 1px 0 #640909 inset,-1px 0 0 #640909 inset;
}
.red.larrow:active:after{
  box-shadow: 0 -1px 0 #640909 inset,1px 0 0 #640909 inset;
}
.yellow.rarrow:active:after{
  box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
}
.yellow.larrow:active:after{
  box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
}
.green.rarrow:active:after{
  box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
}
.green.larrow:active:after{
  box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
}
.blue.rarrow:active:after{
  box-shadow: 0 1px 0 #114566 inset,-1px 0 0 #114566 inset;
}
.blue.larrow:active:after{
  box-shadow: 0 -1px 0 #114566 inset,1px 0 0 #114566 inset;
}

注：上面的样式只适合于webkit和ff内核下的浏览器，如果需要兼容其他浏览器请加上相应的前缀“-o-”和“-ms-”

demodownload

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

响应式Web设计的运用越来越更加广泛。因此，做为一名Web开发人员和前端设计师，我们有必要了解更多的有关于响应式设计的工具和资源，使其更容易为我们创建响应式的Web站点。前面本站为大家推荐了《16个优秀的Responsive CSS框架》,今天在为在家推荐8款实用的响应式设计的CSS框架。希望这些工具能帮你更快速的创建一个响应式Web站点。

1、Titan Framework

Titan Framework是一个用于响应式设计的CSS框架。

2、Responsive Grid System

流体网格CSS框架,用于快速、直观的开发响应性网站。可以使用12列,16列和24列响应式网格设计。

3、Ingrid

Ingrid是一个轻量级和流体的布局系统,其主要目标是减少使用类。Ingrid也必须是一个可扩展的系统,容易定制你自己的需要。

4、Gumby

Gumby是一个新的960网格布局系统，其具有响应式布局功能。

5、Susy: Responsive grids for Compass

响应式设计具有超强的用户体验，你需要定制几套不同的样式。Susy是一个流体网格布局，而且具有响应式布局功能，而且你可以随时根据自己所需定制适合自己的一套需求。

6、Responsive Grid System

这个响应网格系统不是一个框架。这也不是一个样板。这是一个快速、简单和灵活的方式来创建一个响应的web站点系统。

7、Foundation 3

最先进的响应前端框架。

Less + Framework

是一个跨平台的响应式框架系统

特别声明：以上信息由Henry Jones提供，英文网址：8 Useful Responsive CSS Frameworks

扩展阅读：

w3cplus上Responsive相关教程与资源：

1. 15个Responsive设计的测试工具
2. 12个优秀的Responsive LightBox特效
3. 20款Responsive Menu教程
4. CSS3 Media Queries
5. Responsive设计的关键三步
6. 了解Responsive网页设计的三个特性
7. 手机上网站导航的制作
8. CSS3 Media Queries模板
9. Responsive设计和CSS3 Media Queries的结合
10. CSS3 Media Queries案例——A List Apart
11. CSS3 Media Queries案例——Hicksdesign
12. CSS3 Media Queries案例——Tee Gallery
13. 37个极具创意的响应式布局网站

如需转载，烦请注明出处：http://www.w3cplus.com/source/8-useful-responsive-css-frameworks.html

网站制作总是离不开布局，固定布局、流体布局、弹性布局这几种是大家常见的布局方式，以及现在越来越多的Responsive布局。布局方法很多，但有没有想过用最简单的方法让你随时能做到应付自如呢？其实有的，很多人都在使用网格布局系统，使用一套成熟的网络系统，让自己一劳永逸。常见的网络布局有：Blueprint: A CSS Grid Framework、960 CSS Grid System、Tripoli Framework、YAML – Yet Another Multicolumn Layout、YUI Grid CSS等，而且现在网格上也为这些网格布局提供了很多工具，比如说： Grid Designer 2.6b、YUI CSS Grid Builder、YAML Builder、Gridnator、Variable Grid System等等。其实除了这些之处，还有很多很多优秀的网格布局系统，今天我向大推荐30款网络布局系统，这些网格系统有固定布局的，有流体布局的，也有响应式布局的。如果你喜欢，花点时间了解一下吧。

1、Fluid Grids

download

2、Gridset

download

3、Responsive Calculator

download

4、Gridpak

download

5、Semantic Grid System

download

6、Columnal CSS Grid System

download

7、Simple Grid

download

8、Golden Grid System

download

9、Foldy960

download

10、SUSY

download

11、A Better Photoshop Grid for RWD

download

12、1140PX CSS Grid

download

13、Responsive Grid System

download

14、960 Grid System

download

15、Frameless

download

16、Responsive Grid System

download

17、Skeleton

download

18、Zen Grids

download

19、Responsify

download

20、Gridiculo.us

download

21、Fluid Baseline Grid System

download

22、Twitter Bootstrap

download

23、978 Grid Sistem

download

24、Flurid

download

25、Tiny Fluid Grid

download

26、The 1KB CSS Grid.

download

27、Grid calculator and generator

download

28、The Heads-Up Grid

download

29、Fluid Baseline Grid

download

30、BluCSS

download

如需转载，烦请注明出处：http://www.w3cplus.com/source/30-css-grid-system.html

前面99在W3cplus上发表了两篇有关于CSS3质感的分析《CSS3质感分析——表面线性渐变》和《CSS3质感分析——牌匾与盒子》，今天继续为大家介绍一篇有关于CSS3的纹理制作教程。说起CSS3纹理制作，主要是通过gradient和background-size两个属性来实现，前段时间在《Web页面的纹理背景设计与资源》提供了各种纹理制作的资源，其中最有吸引力的是CSS3制作的纹理效果，说细的点击《37个CSS3 Patterns Gallery》。可能有很多同学不太清楚，这37个效果是怎么来得？那么今天由99为大家详细介绍一下其制作原理，如果你对这个感兴趣，那就继续往下阅读吧。

今天我将从原理到实现的来讲解 css3纹理背景的制作方法。我们将制作出几个碉堡了的效果~

当然更多效果可以狠狠点这里。

为了准备今天的讲解，首先要温习两个知识点

1、线性渐变：

详细的介绍点击《CSS3 Gradient》。

2、填充效果

虽然今天讲的是css3，但如果没有photoshop帮助理解，我相信大部分人会听不懂。

首先我们打开ps，新建一个4px*4px的小格子 （无视那张截图。。。写错了。。）

打开后，我们选择 铅笔工具，选择1px 画笔大小，按我的示意图画个斜线（画之前按住alt键放大！！）

之后我们选择 编辑- 定义图案，点击确定。

之后我们再新建一个 1000*1000的画布，选择编辑-填充，选择使用图案 ，选择自定义图案，之后会发现我们刚才定义的那个图片赫然出现了，点击确定，结果。。。。

为什么要先讲解这个例子呢?古人云。。。不积跬步，无以至千里。。。。。。。。。。我们制作这一类渐变的核心，就是要制作出 “跬步”来，之后利用背景平铺技术，配合背景大小技术，在整个页面进行平铺。

我们的跬步代码

-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px; /* 控制条纹的大小 */  

表示一个10px的“跬步”

思路1 线性渐变叠加

这份渐变图表达了我们绘制渐变的另一个思想。

从透明开始，到50% 突然突变为 50%透明度，同时带上色。如下图所示：

大家发现了么，同样的颜色，在50%透明度部分产生了渐变的叠加，这就是我们的核心思路。

background-image: -webkit-linear-gradient(top, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%),
-webkit-linear-gradient(left, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);

解释一下，我们利用top left来控制渐变的方向。利用rgb 0 来控制透明度，利用百分比来控制进度，从左到右与从上到下的图案叠加后，即完成我们的效果。之后，加上“跬步”

body{
  background-color:white;
  background-image: -webkit-linear-gradient(top, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%),
  -webkit-linear-gradient(left, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px; /* 控制条纹的大小 */
}

效果如下：

 第一个效果ok

思路2 斜方向渐变法

我们首先来看一张图片

注意渐变的起点，当渐变起点设置为 left top时，渐变从左上角一直到右下角，以此类推，利用这种技巧我们可以制作出斜向的渐变

-webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);
-webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%)

这样的透明50%渐变来完成效果。之后我们观察

发现了没，我们可以用刚才的 left top方法，只需要让空白部分多一点，就可以用四个小三角形组成了！ 我们把断点设置为 75%，之后利用四个渐变叠加：

left top ;left bottom;right top;right,bottom 略微调整下颜色让他有点立体感

  background-color:white;
  background-image: -webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 75%  ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%),
  -webkit-linear-gradient(right top, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%),
  -webkit-linear-gradient(right bottom, rgba(200, 0, 0, 0) 75% ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%),
  -webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%);
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  background-size: 16px 16px; /* 控制条纹的大小 */

接下来看径向渐变的几个效果：

径向渐变的参数其实非常复杂，但是实际我们只需要了解一部分就可以。具体可以查阅径向渐变的api.

radial-gradient(circle,#f00,#ff0,#080);
radial-gradient(center,circle,#f00,#ff0,#080);
radial-gradient(50%,circle,#f00,#ff0,#080);
radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);
radial-gradient(circle cover,#f00,#ff0,#080);

以上的代码均可以制作出上述效果。

径向渐变其实有两个要点：

1. 渐变的中心
2. 渐变的颜色断点。

上述写法大家可以看到有三个断点

#f00 0%,#ff0 50%,#080 100%

在实际应用中，径向渐变一般由圆心出发，经过断点的渐变，扩展到整个背景。我们先做两个简单的例子。

div{
  background-color:white;
  background-image: -webkit-radial-gradient(#f00 0%,#ff0 50%,#080 100%);
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  background-size: 16px 16px; /* 控制条纹的大小 */
}

以上例子配合background-size 使径向渐变的效果均匀的平铺在画布上。同样，径向渐变背景也有叠加的功效，甚至可以跟线性渐变一起叠加

首先观察这张图，很明显看到中心是径向渐变，外层两个三角是线性渐变。

div{
  background-color:white;
  background-image: -webkit-radial-gradient(white 7%, #111 30%, transparent 40%),
  -webkit-linear-gradient(left top, black 5%, #111 20%, transparent 20%, transparent 80%, black 80%);
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  background-size: 16px 16px; /* 控制条纹的大小 */
}

这个效果是线性渐变跟径向渐变的叠加效果

前面说明了 三角形的做法是用 渐变起始位置+颜色突变组成，而球体效果，可以用 高光部分（white）+ 阴影轮廓（由灰到黑）+透明外圈的组合。之后我们考虑以下效果

在之前的质感文章分析中，我们分析过这一类的质感，他其实是由box-shadow 1px Y 轴的偏移来制作而成的。而渐变怎样用box-shadow呢？

答案很简单，我们可以利用渐变叠加，配合background-position来控制。

1、我们绘制出一个“点”。常用的写法即单色突变到透明色，不必写0%与100%。

background-image:-webkit-radial-gradient(black 15%, transparent 16%)

2、我们利用浅一点的颜色来做“微光”

background-image:-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);

如图所示

之后就是渐变叠加效果了。background-position同样拥有操纵x,y轴坐标的威力，只需要对每个图像分别调整即可~让背景偏离1px，即可达到我们想要的效果。

background-position: 8px 8px, 8px 9px;

完整代码:

div{
  background-color:#282828;
  background-image:-webkit-radial-gradient(black 15%, transparent 16%),
  -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
  background-position: 8px 8px, 8px 9px;
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  background-size: 16px 16px; /* 控制条纹的大小 */
}

以上我们可以看出，transparent颜色在径向渐变中是非常的常见的，再举个例子

-webkit-radial-gradient(black 70%, white 100%, white)

中心black 之后渐变到白色，在区域内这个样子我们可以想象一下，应该是一个黑色点外层发光的效果。但配合背景重复，又可以组合成新的。

div{
  background-image: -webkit-radial-gradient(black 70%, white 100%, white);
  -webkit-background-size: 16px 16px;
  background-size: 16px 16px; /* 控制条纹的大小 */
}

是不是非常神奇。。。接下来看两个demo的制作方法：

根据前面介绍的知识点，只需要起点黄色-到达黄色边界-起点绿色-到达绿色边界-透明的写法即可。

background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));

下面我们调整圆心X轴到100%，很容易理解，图形的圆心会跑到最右边，Y轴不变

background-image: -webkit-radial-gradient(50% 100% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))

大家注意，这里有个非常重要的现象，下面残缺了一部分，出现了一个半圆。这就是半圆的画法，再次记住，下面是 残缺的 我们同样可以尝试 Y轴到100% x轴也到100% 那么现象应该是图形在右下角的1/4圆;

注意 background-position 只改变的是图案整体的位置！不会破坏图案本身，最多会出现 “穿透”的现象，注意，这与圆心变化是截然不同的

div{
  width:100px;
  height:100px;
  margin-top:10px;
  border:1px solid #ddd;
}
div{
  background-color: #63773F; 
  background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
  background-position:50px 0px;
  background-size: 100px 100px;
}

大家注意，仍然是在中心的渐变，但是向右平移了50px，图案从左边穿透出来了！ 一定不要跟圆心变化混淆！ 3 渐变叠加性。我们可以尝试

div{
  width:100px;
  height:100px;
  margin-top:10px;
  border:1px solid #ddd;
}
div{
  background-color: #63773F;
  background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
  -webkit-radial-gradient(50% 60% , circle , red 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
  background-position:50px 0px;
  background-size: 100px 100px;
}

注意上面的把下面的黑色圈子遮住了！！！ 即，渐变写在上面的会遮住下面的 3个重要的原则了解完毕后，我们开始做一个非常牛逼的效果。 第一次看到这图，很多人都有种 “吓尿了”的感觉。。其实我也是。。

为了降低难度，我们先分析一个“跬步” 在进行渐变重复。

根据渐变的叠加性，拆分一下

其实怎么拆分都可以，这只是我个人理解而已、 我们配合上面的文章分析一下图片的位置 1号图 中心渐变Y轴略靠下（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半） 2号图 中心渐变Y轴略靠上（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半） 上两张position最右最左都是一样的。 3号图 这张图可以有两个理解，一是position Y在最下面，圆心在边缘，之后圆心调整位置，Y轴略增大，靠下 或者是 直接position定位到最上面也可以。 4号图类似 5号跟六号我们已经讲过了，一个半圆，所以不需要调整background-position 只需要圆心X轴 100% 或0即可 7号跟八号也很明显，一个半圆，圆心X轴100%或者0 ，跟5号6号类似，之后用background-position X轴，Y轴各调整50px即可。 我们记录下刚才的分析，然后把顺序排列好，注意小圆写在大圆前面即可~

background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//1号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//2号
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//3号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//4号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),//5号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),//6号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), //7号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);   //8号

之后写好位置（1-8）

background-position: 50px 0px,50px 0px,0 50px,0 50px,0 0%, 0 0%,50px 50px,50px 50px;

之后配好“跬步” 大小

background-size: 100px 100px;

完整代码

div{
  width:300px;
  height:300px;
  margin-top:10px;
  border:1px solid #ddd;
}
div{
  background-color: #63773F;
  background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
  -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
  -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
  -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
  -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
  -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),
  -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
  -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);
  background-position: 50px 0px,50px 0px,0 50px,0 50px,0 0%, 0 0%,50px 50px,50px 50px;
  background-size: 100px 100px;
}

最复杂的过去了，我们分析几个简单的例子~

我们一眼就可以看出来 重复的图像是

根据我们的分析，他有四个重复的1/4圆，这个时候先不要考虑渐变叠加1/4圆，虽然我们也可以很容易的写出来，但是代码较多 这明显是背景一个大圆+ 一个大圆，上移一个半径，左移一个半径，之后上面跟左边都冲开了背景而已。 因此我们的核心代码只有两句 background-position: 0 0px, 0px 40px; background-size: 80px 80px; 至于渐变的写法，就不用说了。。。一个圆而已。。 另一个技巧 画线。这个还是蛮常用的，写法很简单 透明起点（像素）+ 线1px +透明 即可

background-image: -webkit-radial-gradient(50% 50%, circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px)

效果：

配合我们讲解的渐变叠加，大家可以考虑一下动手做做这37个效果：

最后希望这篇文章能帮你更好的理解渐变如何制作纹理。同时非常感谢99的整理。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/surface-linear-gradient-with-css3-part3.html

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果，在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie)，使用gradient制作的径向渐变效果，并且使用box-shadow实现立体效果，用text-shadow制作的icon发光效果，详细的可以看代码。

demodownload

HTML 结构

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

CSS代码

body{
  background-color: #d97398;
}
.controls_button{
  width: 400px;
  margin:40px auto;
}
.button{
  width: 70px;
  height: 70px;
  margin-right: 90px;
  border-radius: 35px;
  border:none;
  box-shadow: 0 1px 5px rgba(255,255,255,.5) inset,0 -2px 5px rgba(0,0,0,.3) inset,0 3px 8px rgba(0,0,0,.8);
  background: -webkit-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -moz-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -ms-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -o-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
}
.button:nth-child(3){
  margin-right: 0;
}
.button:after{
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  content: "\21";
  color: #dd5183;
  text-shadow:0 3px 10px #f1a2c1,0 -3px 10px #f1a2c1;
}
.button:nth-child(2):after{
  content: "\22";
}
.button:nth-child(3):after{
  content: "\23";
}
.button:hover:after{
  color: #fff;
  text-shadow:0 1px 20px #fccdda, 1px 0 14px #fccdda;
}
.button:active{
  box-shadow: 0 2px 7px rgba(0,0,0,.5) inset,0 -3px 10px rgba(0,0,0,.1) inset,0 1px 3px rgba(255,255,255,.5);
  background: -webkit-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -moz-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -ms-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -o-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
}
@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-button-pink.html

这个案例是将Button UI Kit的设计图转换成CSS3的DEMO，效果简单，制作的方法也相对简单，说名实话用来用去的属性也就是那么几个，渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来，属性简单，制作方法简单，但对渐变色的配置，阴影效果的拿捏还是要一定的技术，不信，你试试，反正我是信了。（^_^）

demodownload

HTML 结构

<button type="button" class="button round"></button>
<button type="button" class="button round"></button>
<button type="button" class="button round"></button>

<button type="button" class="button square"></button>
<button type="button" class="button square"></button>
<button type="button" class="button square"></button>

<button type="button" class="button round"></button>
<button type="button" class="button round"></button>
<button type="button" class="button round"></button>

<button type="button" class="button square"></button>
<button type="button" class="button square"></button>
<button type="button" class="button square"></button>

<button type="button" class="button roundbig">Button</button>
<button type="button" class="button roundbig">Button</button>
<button type="button" class="button roundbig">Button</button>

<button type="button" class="button squarebig">Button</button>
<button type="button" class="button squarebig">Button</button>
<button type="button" class="button squarebig">Button</button>

CSS代码

body{
  background: #35393d;
}
.controls_ui{ 
  width: 300px; 
  margin: 40px auto;
}
.button{
  color: #0f1214;
  text-shadow:0 1px 0 #484f58;
  margin-bottom: 20px;
  margin-right: 5px;
  border:1px solid #202124;
  box-shadow: 0 1px 0 #616a74 inset,0 1px 5px #212528;
  background: -webkit-linear-gradient(top,#474d54,#2f363d);
  background: -moz-linear-gradient(top,#474d54,#2f363d);
  background: -ms-linear-gradient(top,#474d54,#2f363d);
  background: -o-linear-gradient(top,#474d54,#2f363d);
  background: linear-gradient(top,#474d54,#2f363d);
}
.button:nth-child(3n){
  margin-right: 35px;
}
.button:hover{
  background: -webkit-linear-gradient(top,#5b6167,#30373e);
  background: -moz-linear-gradient(top,#5b6167,#30373e);
  background: -ms-linear-gradient(top,#5b6167,#30373e);
  background: -o-linear-gradient(top,#5b6167,#30373e);
  background: linear-gradient(top,#5b6167,#30373e);
}
.button:active{
  box-shadow: 0 1px #484c50;
  background: -webkit-linear-gradient(top,#232930,#3c4249);
  background: -moz-linear-gradient(top,#232930,#3c4249);
  background: -ms-linear-gradient(top,#232930,#3c4249);
  background: -o-linear-gradient(top,#232930,#3c4249);
  background: linear-gradient(top,#232930,#3c4249);	
}
.round,
.square{
  width: 30px;
  height: 30px;
}
.round,
.roundbig{
  border-radius:15px;
}
.square,
.squarebig{
  border-radius:5px;
}
.button:after{
  display: block;
}
.round:nth-of-type(1):after,
.square:nth-of-type(4):after{
  content: "\2716";
}
.round:nth-of-type(2):after,
.square:nth-of-type(5):after{
  content: "\2714";
}
.round:nth-of-type(3):after,
.square:nth-of-type(6):after{
  content: "\271a";
}
.round:nth-of-type(7):after,
.square:nth-of-type(10):after{
  content: "\2717";
}
.round:nth-of-type(8):after,
.square:nth-of-type(11):after{
  content: "\2713";
}
.round:nth-of-type(9):after,
.square:nth-of-type(12):after{
  content: "\271d";
}
.roundbig,
.squarebig{
  width: 80px;
  height: 30px;
}

demodownload

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

这个案例效果很像lightbox的效果，鼠标悬浮在图片上时，会将图片放大，并且移至页面中心位置。这个效果的实现并没有使用太多的技术，最关键的就是使用了CSS3 transform中的scale和translate，其中使用scale()来放大图片，而translate()用来改变其位置，另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性，让整个图片放大效果看起来更圆润，详细的效果看代码吧，更有说服力。

demodownload

HTML结构

<div class="thumb-wrap">
  <ul class="thumb">
   <li><img src="1.jpg" alt="beautiful-thumbnail-hover-effect-01"></li>
   <li><img src="2.jpg" alt="beautiful-thumbnail-hover-effect-02"></li>    
   <li><img src="3.jpg" alt="beautiful-thumbnail-hover-effect-03"></li>
   <li><img src="4.jpg" alt="beautiful-thumbnail-hover-effect-04"></li>
   <li><img src="5.jpg" alt="beautiful-thumbnail-hover-effect-05"></li>
   <li><img src="6.jpg" alt="beautiful-thumbnail-hover-effect-06"></li>
  </ul>
</div>

CSS代码

body { 
  background:url(black-bg.png) repeat 0 0;
} 
.thumb-wrap {
  width:60%;
  min-width:300px;
  margin:0 auto;
  font-size:100%;
  text-align: center;
}

.thumb-wrap:after {
  content:"";
  display:block;
  clear:both;
  height:50px;
}  
.thumb {
  width:100%;
  list-style:none;
  float:left;
  padding:0 0 2.5% 0;
  margin-top:5px;
}

.thumb li {
  width:30%;
  float:left;
  margin:2.5% 0 0 2.5%;
  position:relative;
}

.thumb li img {
  max-width:100%;
  float:left;
  border:8px solid #fff;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

.thumb li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
}

.thumb li:hover {
  -moz-transform:scale(2.6) translate(100px, 38px);
  -webkit-transform:scale(2.6) translate(100px, 38px);
  -o-transform:scale(2.6) translate(100px, 38px);
  -ms-transform:scale(2.6) translate(100px, 38px);
  transform:scale(2.6) translate(100px, 38px);
  z-index:2;
}

.thumb li:nth-of-type(2):hover {
  -moz-transform:scale(2.6) translate(0, 38px);
  -webkit-transform:scale(2.6) translate(0, 38px);
  -o-transform:scale(2.6) translate(0, 38px);
  -ms-transform:scale(2.6) translate(0, 38px);
  transform:scale(2.6) translate(0, 38px);
}

.thumb li:nth-of-type(3):hover {
  -moz-transform:scale(2.6) translate(-100px, 38px);
  -webkit-transform:scale(2.6) translate(-100px, 38px);
  -o-transform:scale(2.6) translate(-100px, 38px);
  -ms-transform:scale(2.6) translate(-100px, 38px);
  transform:scale(2.6) translate(-100px, 38px);
}

.thumb li:nth-of-type(4):hover {
  -moz-transform:scale(2.6) translate(100px, -38px);
  -webkit-transform:scale(2.6) translate(100px, -38px);
  -o-transform:scale(2.6) translate(100px, -38px);
  -ms-transform:scale(2.6) translate(100px, -38px);
  transform:scale(2.6) translate(100px, -38px);
}

.thumb li:nth-of-type(5):hover {
  -moz-transform:scale(2.6) translate(0, -38px);
  -webkit-transform:scale(2.6) translate(0, -38px);
  -o-transform:scale(2.6) translate(0, -22px);
  -ms-transform:scale(2.6) translate(0, -38px);
  transform:scale(2.6) translate(0, -38px);
}

.thumb li:nth-of-type(6):hover {
  -moz-transform:scale(2.6) translate(-100px, -38px);
  -webkit-transform:scale(2.6) translate(-100px, -38px);
  -o-transform:scale(2.6) translate(-100px, -38px);
  -ms-transform:scale(2.6) translate(-100px, -38px);
  transform:scale(2.6) translate(-100px, -38px);
} 

demodownload

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

今天仿制了Twitter的登录表单，除了大背景是使用的img，其他都是纯CSS3代码实现。整个效果使用了Bootstrap的表单风格，并且运用box-sizing改变了元素默认的box module风格，同时使用了CSS3的gradient、box-shadow和text-shadow制作了其他效果。具体请查看相关代码。

demodownload

HTML 结构

<form class="form">
  <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
  <p class="float">
    <label for="login"><i class="icon-user"></i>Username</label>
    <input type="text" name="login" placeholder="Username or email">
  </p>
  <p class="float">
    <label for="password"><i class="icon-lock"></i>Password</label>
    <input type="password" name="password" placeholder="Password" class="showpassword">
  </p>
  <p class="opt">
    <input type="checkbox" class="showpasswordcheckbox" id="showPassword">
    <label for="showPassword">Show password</label>
  </p>
  <p class="clearfix">
    <a href="#" class="log-twitter">Log in with Twitter</a>    
    <input type="submit" name="submit" value="Log in">
  </p>
</form>​​

CSS 代码

*, ::after, ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: #E1C192 url(wood_pattern.jpg);
}
.form {
  width: 340px;
  margin: 60px auto 30px;
  padding: 15px;
  position: relative;
  background: #fffaf6;
  border-radius: 4px;
  color: #7e7975;
  box-shadow:0 2px 2px rgba(0,0,0,0.2),0 1px 5px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.4); 
}

.form h1 {
  font-size: 15px;
  line-height:1;
  font-weight: bold;
  color: #bdb5aa;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBE6E2;
  text-shadow: 0 2px 0 rgba(255,255,255,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form h1 .log-in,
.form h1 .sign-up {
  display: inline-block;
  text-transform: uppercase;
}

.form h1 .log-in {
  color: #6c6763;
  padding-right: 2px;
}

.form h1 .sign-up {
  color: #ffb347;
  padding-left: 2px;
}

.form .float {
  width: 50%;
  float: left;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,1);
}

.form .float:first-of-type {
  padding-right: 5px;
}

.form .float:last-of-type {
  padding-left: 5px;
}

.form label {
  display: block;
  padding: 0 0 5px 2px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  font-size: 11px;
}

.form label i {
  margin-right: 5px; /* Gap between icon and text */
  display: inline-block;
  width: 10px;
}

.form input[type=text],
.form input[type=password] {
  font: 400 13px 'Lato', Calibri, Arial, sans-serif;
  display: block;
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border: 3px solid #ebe6e2;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.form input[type=text]:hover,
.form input[type=password]:hover {
  border-color: #CCC;
}

.form label:hover ~ input {
  border-color: #CCC;
}

.form input[type=text]:focus,
.form input[type=password]:focus {
  border-color: #BBB;
  outline: none; /* Remove Chrome's outline */
}

.form input[type=submit],
.form .log-twitter {
  width: 49%;
  height: 38px;
  float: left;
  position: relative;
  box-shadow: inset 0 1px rgba(255,255,255,0.3);
  border-radius: 3px;
  cursor: pointer;
  font:bold 14px/38px 'Lato', Calibri, Arial, sans-serif ;
  text-align: center;
}

.form input[type=submit] {
  margin-left: 1%;
  background: #fbd568; /* Fallback */
  background: -moz-linear-gradient(#fbd568, #ffb347);
  background: -ms-linear-gradient(#fbd568, #ffb347);
  background: -o-linear-gradient(#fbd568, #ffb347);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbd568), to(#ffb347));
  background: -webkit-linear-gradient(#fbd568, #ffb347);
  background: linear-gradient(#fbd568, #ffb347);
  border: 1px solid #f4ab4c;
  color: #996319;
  text-shadow: 0 1px rgba(255,255,255,0.3);
}

.form .log-twitter {
  margin-right: 1%;
  background: #34a5cf; /* Fallback */
  background: -moz-linear-gradient(#34a5cf, #2a8ac4);
  background: -ms-linear-gradient(#34a5cf, #2a8ac4);
  background: -o-linear-gradient(#34a5cf, #2a8ac4);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
  background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
  background: linear-gradient(#34a5cf, #2a8ac4);
  border: 1px solid #2b8bc7;
  color: #ffffff;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  text-decoration: none;
}

.form input[type=submit]:hover,
.form .log-twitter:hover {
  box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 20px 40px rgba(255,255,255,0.15);
}

.form input[type=submit]:active,
.form .log-twitter:active{
  top: 1px;
}

/* Fallback fro broswers that don't support box shadows */
.no-boxshadow .form input[type=submit]:hover {
  background: #ffb347;
}

.no-boxshadow .form .log-twitter:hover {
  background: #2a8ac4;
}

.form p:last-of-type {
  clear: both;    
}

.form .opt {
  text-align: right;
  margin-right: 3px;
}

.form label[for=showPassword] {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 400;
  text-transform: capitalize;
}

.form input[type=checkbox] {
  vertical-align: middle;
  margin: -1px 5px 0 1px;
}

注：效果中的icon是调用了bootstrap的icon制作：

<link rel="stylesheet" href="font-awesome.css" />

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/twitter-login-or-signup-form-with-css3.html

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果，配合@font-face制作向右的箭头效果，同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。

demodownload

HTML 结构

ul class="buttons_list">
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
</ul>

CSS代码

body{
  background: #d9dadc;
}
.buttons_list{
  width: 300px;
  margin: 40px auto 0;
}
.buttons_list li{
  position: relative;
  height: 70px;
}
.buttons_list li:after{
  position:absolute;
  top:8px;
  left: -50px;
  content: "1";
  font-weight: bold;
  text-shadow:0 -1px 0 #fff;
  display: inline-block;
  width: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  box-shadow: 0 1px 0 rgba(0,0,0,.4),0 0 0 3px rgba(0,0,0,.1);
  background: #ecedee;
}
.buttons_list li:nth-child(2):after{
  content: "2";
}
.buttons_list li:nth-child(3):after{
  content: "3";
}
.buttons_list li:nth-child(4):after{
  content: "4";
}
.buttons_list .button{
  position: relative;
  height: 46px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  text-shadow:0 -1px 0 #72a22a;
}
.buttons_list li:nth-child(1) .button{
  border:1px solid #264402;
  border-radius: 5px;
  box-shadow: 0 1px 0 #a3e24e inset,0 1px 0 rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top,#81b33d,#4a7119);
  background:-moz-linear-gradient(top,#81b33d,#4a7119);
  background:-ms-linear-gradient(top,#81b33d,#4a7119);
  background:-o-linear-gradient(top,#81b33d,#4a7119);
  background:linear-gradient(top,#81b33d,#4a7119);
}
.buttons_list li:nth-child(2) .button{
  border:1px solid #7ea430;
  border-radius: 5px;
  box-shadow:0 -3px 0 #7fa532 inset,0 -3px 0 1px #aad667 inset,0 1px 2px rgba(0,0,0,1);
  background:-webkit-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-moz-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-ms-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-o-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
}
.buttons_list li:nth-child(3) .button{
  font-size: 14px;
  padding-left:25px;
  margin-left:5px;
  border:1px solid #7ea430;
  border-radius: 24px;
  box-shadow:0 -1px 0 #4e6c1e inset,0 -4px 0 #54830e inset,0 0 4px 1px rgba(0,0,0,.2),0 0 0 6px rgba(0,0,0,.085),0 0 0 7px rgba(255,255,255,.2);
  background:-webkit-linear-gradient(top,#99d838,#72b016);
  background:-moz-linear-gradient(top,#99d838,#72b016);
  background:-ms-linear-gradient(top,#99d838,#72b016);
  background:-o-linear-gradient(top,#99d838,#72b016);
  background:linear-gradient(top,#99d838,#72b016);
}
.buttons_list li:nth-child(4) .button{
  border:none;
  border-radius: 5px;
  box-shadow:0 1px 0 #33400f,0 -1px 0 #5f7827 inset,0 -2px 0 #7fa532 inset,0 -3px  0 #b0df2f inset;
  background:-webkit-linear-gradient(top,#3b6512,#90b639);
  background:-moz-linear-gradient(top,#3b6512,#90b639);
  background:-ms-linear-gradient(top,#3b6512,#90b639);
  background:-o-linear-gradient(top,#3b6512,#90b639);
  background:linear-gradient(top,#3b6512,#90b639);
}
.buttons_list li:nth-child(2n) .button{
  font-size: 16px;
}
.buttons_list li .button:after{
  display: inline-block;
  font-size: 18px;
  color: #80b23c;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-shadow:1px 2px 2px rgba(0,0,0,.3);
  border-radius: 12px;
  box-shadow: 0 1px 2px #43641a inset,0 2px 5px #819d5d;
  background: #51791f;
  margin-top: -2px;
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  content: '\e800';
}
.buttons_list li:nth-child(1) .button:after{
  margin-left:10px;
}
.buttons_list li:nth-child(2) .button:after{
  margin-left:25px;
}
.buttons_list li:nth-child(3) .button:after{
  margin-left:20px;
}
.buttons_list li:nth-child(4) .button:after{
  margin-left:20px;
  margin-top: 0;
  color: #fff;
}
.buttons_list li:not(:last-child) .button:before{
  position: absolute;
  top:5px;
  right: 6px;
  display: inline-block;
  content: "";
  border:1px solid #5f8628;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.buttons_list li:nth-child(1) .button:hover{
  background:-webkit-linear-gradient(top,#95c556,#628c2e);
  background:-moz-linear-gradient(top,#95c556,#628c2e);
  background:-ms-linear-gradient(top,#95c556,#628c2e);
  background:-o-linear-gradient(top,#95c556,#628c2e);
  background:linear-gradient(top,#95c556,#628c2e);
}
.buttons_list li:nth-child(2) .button:hover{
  background:-webkit-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-moz-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-ms-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-o-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
}
.buttons_list li:nth-child(3) .button:hover{
  background:-webkit-linear-gradient(top,#b0ea58,#7fbe22);
  background:-moz-linear-gradient(top,#b0ea58,#7fbe22);
  background:-ms-linear-gradient(top,#b0ea58,#7fbe22);
  background:-o-linear-gradient(top,#b0ea58,#7fbe22);
  background:linear-gradient(top,#b0ea58,#7fbe22);
}
.buttons_list li:nth-child(4) .button:hover{
  background:-webkit-linear-gradient(top,#4f7e21,#9fc44b);
  background:-moz-linear-gradient(top,#4f7e21,#9fc44b);
  background:-ms-linear-gradient(top,#4f7e21,#9fc44b);
  background:-o-linear-gradient(top,#4f7e21,#9fc44b);
  background:linear-gradient(top,#4f7e21,#9fc44b);
} 
.buttons_list li:nth-child(1) .button:active{
  top:1px;
  box-shadow:0 1px 2px #496f1c inset,0 1px 0 rgba(0,0,0,0);
  background:-webkit-linear-gradient(top,#628c2e,#628c2e);
  background:-moz-linear-gradient(top,#628c2e,#628c2e);
  background:-ms-linear-gradient(top,#628c2e,#628c2e);
  background:-o-linear-gradient(top,#628c2e,#628c2e);
  background:linear-gradient(top,#628c2e,#628c2e);
}
.buttons_list li:nth-child(2) .button:active{
  box-shadow:0 1px 2px rgba(0,0,0,.3) inset,0 1px 2px rgba(0,0,0,0);
  background:-webkit-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-moz-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-ms-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-o-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
}
.buttons_list li:nth-child(3) .button:active{
   box-shadow:0 1px 2px rgba(0,0,0,.3) inset,0 0 0 6px rgba(0,0,0,.085)，0 0 0 7px rgba(255,255,255,.2);
  background:-webkit-linear-gradient(top,#77b618,#7fbe22);
  background:-moz-linear-gradient(top,#77b618,#7fbe22);
  background:-ms-linear-gradient(top,#77b618,#7fbe22);
  background:-o-linear-gradient(top,#77b618,#7fbe22);
  background:linear-gradient(top,#77b618,#7fbe22);
}
.buttons_list li:nth-child(4) .button:active{
  box-shadow:0 1px 2px rgba(0,0,0,.3) inset;
  background:-webkit-linear-gradient(top,#4f7e21,#9fc44b);
  background:-moz-linear-gradient(top,#4f7e21,#9fc44b);
  background:-ms-linear-gradient(top,#4f7e21,#9fc44b); 
  background:-o-linear-gradient(top,#4f7e21,#9fc44b);
  background:linear-gradient(top,#4f7e21,#9fc44b);
} 
.buttons_list li:not(:first-child) .button:active{
  top:3px;
}
@font-face {
  font-family: 'fontello';
  src: url("font/fontello.eot");
  src: url("font/fontello.eot?#iefix") format('embedded-opentype'), 
	 url("font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'),
	 url("font/fontello.svg#fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}

demodownload

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

如果您想给你的Web元素上添加自定义的滚动条，这是一件非常头痛的事情，因为浏览器默认的滚动条修改是件很烦人的事情，各大浏览器解析并不一样，但为了让你的Web渲染一样，我们往往需要使用别的方法来实现。今天为大家搜集了20多个自定义滚动条的插件和javascript脚本。希望这些信息对你工作有所帮助。

1. jScrollPane – custom cross-browser scrollbars

demodownload

2. Tiny Scrollbar – A lightweight jQuery plugin

demodownload

3. jQuery Custom Content Scroller

demodownload

4. jQuery Scrollbar replacements

demodownload

5. Scrollbar Paper

demodownload

6. ShortScroll – A jQuery UI Google Wave style scroll bar

demodownload

7. jQuery Scroll

demodownload

8. Vertical scrollbar using jQuery UI slider

demodownload

9. NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices

demodownload

10. nanoScroller a Lion-styled jQuery scrollbars

demodownload

11. Scrollbar Visibility with jScrollPane

demodownload

12. iScroll 4 : Scrolling Features for Mobile Webkit

demodownload

13. jScrollbar : Scrollbar for scrolling contents with jQuery UI

demodownload

14. jQuery plugin to style scrollbars (cross-browser compatible)

demodownload

15. Gmail style Scrollbar Using jQuery and CSS

demodownload

16. Facebook/Twitter style Scrollbar Using jQuery and CSS

demodownload

17. Scrollbars V2

demodownload

18. Scrollable Div

demodownload

19. Scrollbar

demodownload

20. Demonstrating Scrolling Divs

demodownload

21. JS Scrolling

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/source/21-best-custom-scrollbar-plus.html

这个案例制作了两个效果，一个是CSS制作的导航效果，这个导航效果配一点js代码实现active状态下改变当前项的效果（从文字转变为icon），导航其他效果都是使用css3的常用属性制作的，具体什么属性我就不多说了，大家一看就知道。第二种效果使用纯css3制作了一个twitter的分享按钮，而且这个按钮还带有Tip的提示效果，详细的请看下面的实现代码：

demodownload

HTML结构

<ul class="uiTabs" id="uiTabs">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<ul class="uiButton">
  <li><a href="#"><span>Share</span></a></li>
</ul>

CSS代码

body{
background:#844f48;
}
.demo{
width:600px; 
margin:40px auto 0;
}
.uiTabs{
display:table;	
font-weight:bold;
text-shadow:0 2px 0 rgba(0,0,0,.8);
border:1px solid #272b43;
border-radius:5px;
box-shadow:0 1px 0 #ad847f,0 1px 0 rgba(255,255,255,.5) inset;
background:-webkit-linear-gradient(top,#5b6289,#30385c);
background:-moz-linear-gradient(top,#5b6289,#30385c);
background:-ms-linear-gradient(top,#5b6289,#30385c);
background:-o-linear-gradient(top,#5b6289,#30385c);
background:linear-gradient(top,#5b6289,#30385c);
}
.uiTabs li{
display:inline-block;
font-size:24px;
}
.uiTabs a{
display:block;
color:#fff;
padding:0 15px;
margin:0 5px;
height:70px;
line-height:70px;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
.uiTabs a:hover{
color:#fff;
text-decoration:none;
margin:10 0px;
height:52px;
line-height:52px;
border-radius:5px;
border:1px solid #262a42;
box-shadow:0 1px 0 #4d5373,0 1px 3px #151724 inset;
background: -webkit-linear-gradient(top,#313654,#2f3451);
background: -moz-linear-gradient(top,#313654,#2f3451);
background: -ms-linear-gradient(top,#313654,#2f3451);
background: -o-linear-gradient(top,#313654,#2f3451);
background: linear-gradient(top,#313654,#2f3451);
}
.uiTabs li a.active,.uiTabs li a.active:hover{
font-family: 'icomoon';
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
color:#313654;
text-shadow:0 -1px 0 #312c3a,0 1px 0 #af8580;
margin:0;
height:72px;
line-height:72px;
padding: 0 40px;
border:none;
border-radius:0;
border-left:1px solid #292d46;
border-right:1px solid #292d46;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
background:-webkit-linear-gradient(top,#ac827b,#955e57);
background:-moz-linear-gradient(top,#ac827b,#955e57);
background:-ms-linear-gradient(top,#ac827b,#955e57);
background:-o-linear-gradient(top,#ac827b,#955e57);
background:linear-gradient(top,#ac827b,#955e57);
}
.uiTabs li:first-child a.active{
border-radius:5px 0 0 5px;
border-left:none;
}
.uiTabs li:last-child a.active{
border-radius:0 5px 5px 0;
border-right:none;
}
.uiButton li{
margin:50px 0 0 30px;
letter-spacing:0;
word-spacing:0;
font-size:24px;
position: relative;
display:inline-block;
font-size:24px;
line-height:40px;
margin-left:120px;
border-radius:5px;
border:1px solid #272b43;
box-shadow:0 1px 0 #878ca7 inset,0 1px 0 #8c6a65;
background:-webkit-linear-gradient(top,#575e83,#2f3659);
background:-moz-linear-gradient(top,#575e83,#2f3659);
background:-ms-linear-gradient(top,#575e83,#2f3659);
background:-o-linear-gradient(top,#575e83,#2f3659);
background:linear-gradient(top,#575e83,#2f3659);
}
.uiButton li:after{
display:inline-block;
font-family: 'icomoon';
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
content:"\22";
color:#313654;
text-shadow:0 -1px 0 #1f2335,0 1px 0 #5d6384;
padding:0 40px;
}
.uiButton li:hover{
background:-webkit-linear-gradient(top,#7c84a4,#383f64);
background:-moz-linear-gradient(top,#7c84a4,#383f64);
background:-ms-linear-gradient(top,#7c84a4,#383f64);
background:-o-linear-gradient(top,#7c84a4,#383f64);
background:linear-gradient(top,#7c84a4,#383f64);
}
.uiButton li:active{
border:1px solid #1b1d2b;
box-shadow:0 1px 3px #1c1f31 inset;
background:-webkit-linear-gradient(top,#2d314c,#303553);
background:-moz-linear-gradient(top,#2d314c,#303553);
background:-ms-linear-gradient(top,#2d314c,#303553);
background:-o-linear-gradient(top,#2d314c,#303553);
background:linear-gradient(top,#2d314c,#303553);
}
.uiButton li:active:after{
color:#464f79;
text-shadow:0 -1px 0 #767c98,0 3px 5px #24293e;
}
.uiButton li span{
display: none;
position: absolute;
top:-5px;
left:-70%;
padding: 0 15px;
line-height: 50px;
color: #fff;
text-shadow:0 3px 0 rgba(0,0,0,.8);
border-radius:5px;
border:1px solid #272b43;
box-shadow:0 1px 0 #878ca7 inset,0 1px 0 #8c6a65;
background:-webkit-linear-gradient(top,#575e83,#2f3659);
background:-moz-linear-gradient(top,#575e83,#2f3659);
background:-ms-linear-gradient(top,#575e83,#2f3659);
background:-o-linear-gradient(top,#575e83,#2f3659);
background:linear-gradient(top,#575e83,#2f3659);
}
.uiButton li:hover span{
display: block;
}
.uiButton li span:after{
display: block;
content:'';
position: absolute;
top:50%;
margin-top: -5px;
right:-5px;
width: 10px;
height: 10px;
box-shadow: 0 1px 0 #272b43,1px 0 0 #272b43;
background:-webkit-linear-gradient(top left,#484f74,#3e4568);
background:-moz-linear-gradient(top left,#484f74,#3e4568);
background:-ms-linear-gradient(top left,#484f74,#3e4568);
background:-o-linear-gradient(top left,#484f74,#3e4568);
background:linear-gradient(top left,#484f74,#3e4568);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
@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;
}

Javascript代码

window.onload=function(){
  var oUlTabs=document.getElementById('uiTabs');
  var aA=oUlTabs.getElementsByTagName('a');
  var aConent_icon=new Array('!',''','&','('); 	
  var aConent_letter=new Array('Home','About','Services','Contact');
	
  for(var i=0;i<aA.length;i++){
    var content = window.getComputedStyle(aA[i], ":after").getPropertyValue("content");
        aA[i].innerHTML='';
	aA[0].innerHTML=(content=aConent_icon[0]);
	content=aConent_letter[i];
	aA[i].innerHTML=content;
	aA[i].index=i;
	aA[i].onclick=function(){
	  for(var i=0;i<aA.length;i++){
		aA[i].className='';
	        content=aConent_letter[i];
	        aA[i].innerHTML=content;
	  }
	this.className='active';
	aA[this.index].innerHTML=(content=aConent_icon[this.index]);
		
	}
   }
}

demodownload

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

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现，今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现，这种制作方法最关键的地方是结构的配合，以及label的for属性与元素的id属性配合一致，并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

demodownload

HTML结构

<ul class="lightbox">
  <li>
    <label for="lightbox01"><img src="1s.jpg" alt=""></label>
    <input type="radio" id="lightbox01" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="1.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox02"><img src="2s.jpg" alt=""></label>
    <input type="radio" id="lightbox02" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="2.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox03"><img src="3s.jpg" alt=""></label>
    <input type="radio" id="lightbox03" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="3.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox04"><img src="4s.jpg" alt=""></label>
    <input type="radio" id="lightbox04" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="4.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox05"><img src="5s.jpg"  alt=""></label>
    <input type="radio" id="lightbox05" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="5.jpg" alt=""></label>
    </div>
  </li>
</ul>
<input type="radio" id="close" name="gallery">

CSS代码：

body {
  background: url(black-bg.png) repeat 0 0;
}
.lightbox{
  text-align: center;
  margin:20px 0;
}
.lightbox li{
  display: inline-block;
  list-style: none;
  margin: 0 10px 0 0;
  border: 3px solid #ccc;
  border-radius: 3px;
}
.lightbox li:hover { 
  border: 3px solid #1E528C; 
}
	
ul li img, 
ul li label 	{ 
 display: block; 
 cursor: pointer; 
}
		
ul li input { 
  display: none; 
}
ul li input:checked + .overlay { 
  display: table; 
}

.overlay{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0; 
  left: 0; 
  display: none; 
  z-index: 999;
  background: rgba(0,0,0,0.7);
}
.overlay label{
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}
.overlay img		{
  display: inline;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
}
#close {opacity: 0;}

demodownload

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

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现，这个效果初看有些许复杂，一开始不太清楚其实现原理，但仔细看看代码，还是能整明白的。功能主要依赖于css的选择器，以及配合锚点定位来实现。其中很关键一步是HTML的结构，特别是图片的点击播放效果，顺序不能搞错，不然效果无法实现。不过这个效果有一个致命的缺点，那就是对图片的大小有所限制，无法实现图片的自应大小，如果你够有信心的话，可以尝试一下不限制宽度，能否实现这个效果。另外一点，CSS实现的效果，当然没有js实现的效果那么流畅，不过当作挑战性的学习，还是不错的，你不仿一试。

demodownload

HTML Code:

<a href="#url" class="clickbox"><img src="1.jpg" alt="pic1"><span>Click Here</span></a>
<b class="lightbox">
  <b class="light"></b>
  <b class="box">
    <div id="gallery">
      <div id="fullsize">
	<div id="pic1" class="hz">
	  <a class="left" href="#pic10"></a>
	  <img src="1.jpg" alt="pic1">
	  <a class="right" href="#pic2"></a>
	  <p>Some descriptive text</p>
	</div>
	<div id="pic2" class="vt">
	  <a class="left" href="#pic1"></a>
	  <img src="2.jpg" alt="pic2">
	  <a class="right" href="#pic3"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic3" class="vt">
	  <a class="left" href="#pic2"></a>
	  <img src="3.jpg" alt="pic3">
	  <a class="right" href="#pic4"></a>
	  <p>Another line of descriptive text</p>
	</div>
	<div id="pic4" class="hz">
	  <a class="left" href="#pic3"></a>
	  <img src="4.jpg" alt="pic4">
	  <a class="right" href="#pic5"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic5" class="vt">
	  <a class="left" href="#pic4"></a>
	  <img src="5.jpg" alt="pic5">
	  <a class="right" href="#pic6"></a>
	  <p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p>
	</div>
	<div id="pic6" class="vt">
	  <a class="left" href="#pic5"></a>
	  <img src="6.jpg" alt="pic7">
	  <a class="right" href="#pic7"></a>
	  <p>Further descriptive text</p>
	</div>
	<div id="pic7" class="hz">
	  <a class="left" href="#pic6"></a>
	  <img src="7.jpg" alt="pic7">
	  <a class="right" href="#pic8"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic8" class="hz">
	  <a class="left" href="#pic7"></a>
	  <img src="8.jpg" alt="pic8">
	  <a class="right" href="#pic9"></a>
	  <p>Yet more descriptive text</p>
	</div>
	<div id="pic9" class="hz">
	  <a class="left" href="#pic8"></a>
	  <img src="9.jpg" alt="pic9">
	  <a class="right" href="#pic10"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic10" class="vt">
	  <a class="left" href="#pic9"></a>
	  <img src="10.jpg" alt="pic10">
	  <a class="right" href="#pic1"></a>
	  <p>Some more descriptive text</p>
	</div>
      </div>
    </div>
    <i>CLOSE</i>
  </b>
</b>

CSS CODE

body {
  background: url(black-bg.png) repeat 0 0;
}
.clickbox,
.clickbox:visited,
.clickbox:hover {
  text-decoration: none;
  font:bold 20px/40px georgia, sans-serif;
  color: #00c;
}
.clickbox:hover {
  text-decoration: underline;
}

.clickbox img {
  display:block;
  border: 0;
}
.clickbox + b {
  display: block;
}
.clickbox {
  border: 5px solid #fff;
  border-radius: 5px;
  margin: 50px auto;
  background: #fff;
  display: block;
  width: 360px;
}

.clickbox img,
.clickbox span {
  display:block;
  text-align: center;
}

.clickbox + .lightbox {
  position:absolute; 
  left:-99999px; 
  top:0; 
  cursor:default; 
  z-index:500;
}


.clickbox + .lightbox .light {
  position:absolute; 
  left:0; 
  top:0; 
  width:100%;
}
.clickbox + .lightbox .box {
  position:absolute; 
  left:0; 
  width:100%; 
  text-align:center; 
  height:300px; 
  top:20px;
}

.clickbox:active, 
.clickbox:focus {
  color:red
}

.clickbox:active + .lightbox {
  left:0; 
  width:100%; 
  height:100%;
}
.clickbox + .lightbox:hover,
.clickbox:focus + .lightbox {
  position:fixed; 
  left:0; 
  width:100%; 
  height:100%;
}

.clickbox + .lightbox:hover .light,
.clickbox:active + .lightbox .light,
.clickbox:focus + .lightbox .light {
  background:#000; 
  width:100%; 
  height:100%; 
  filter: alpha(opacity=75);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); 
  opacity:0.75;
}

.clickbox + .lightbox i {
  display:block; 
  width:100px; 
  height:20px; 
  position:fixed; 
  right:-100px; 
  top:0; 
  z-index:500; 
  color:#000; 
  font:normal normal 14px/20px arial, sans-serif; 
  text-align:center; 
  background:#fff;
  border-radius: 6px;
}

.clickbox + .lightbox:hover i,
.clickbox:active + .lightbox i,
.clickbox:focus + .lightbox i {
  right:50%; 
  margin-right:-50px; 
  top:5px;
}

.clickbox + .lightbox + #close {
  display:block; 
  position:fixed; 
  width:100px; 
  height:20px; 
  overflow:hidden; 
  right:-100px; 
  top:10px; 
  z-index:1000; 
  background:url(trans.gif); 
  cursor:pointer;
}

.clickbox + .lightbox:hover + #close,
.clickbox:active + .lightbox + #close,
.clickbox:focus + .lightbox + #close {
  right:50%; 
  margin-right:-50px; 
  top:5px;
}

#gallery {
  display:inline-block;
  position:relative;
  overflow:hidden;
}
#gallery #fullsize {
  width:480px;
  height:480px;
  overflow:scroll;
  overflow-y:hidden;
  margin-bottom:-18px;
}
#gallery #fullsize div {
  width:480px; 
  height:480px; 
  position:relative;
}
#gallery #fullsize div img {
  display:block; 
  margin:0 auto; 
  border:0; 
  padding:10px 10px 0 10px; 
  background:#fff; 
  border:1px solid #000; 
  border-width:1px 1px 0 1px;
}
#gallery #fullsize div a {
  display:block; 
  top:20px; 
  position:absolute; 
  outline:0; 
  z-index:500; 
  background:url(trans.gif);
}
#gallery #fullsize div.vt a.left {
  height:360px; 
  width:135px; 
  position:absolute; 
  left:105px;
}
#gallery #fullsize div.vt a.right {
  height:360px; 
  width:135px; 
  position:absolute; 
  left:240px;
}
#gallery #fullsize div.hz a.left {
  height:270px; 
  width:180px; 
  position:absolute; 
  left:60px;
}
#gallery #fullsize div.hz a.right {
  height:270px; 
  width:180px; 
  position:absolute; 
  left:240px;
}

#gallery #fullsize div a.left:hover {
  background:url(prev.png) no-repeat left 20px;
}
#gallery #fullsize div a.right:hover {
  background:url(next.png) no-repeat right 20px;
}

#gallery #fullsize div p {
  background:#fff; 
  margin:0 auto; 
  padding:10px; 
  border:1px solid #000; 
  border-width:0 1px 1px 1px; 
  font-weight:normal; 
  color:#444;
}

#gallery #fullsize div.vt p {
  width:270px;
}
#gallery #fullsize div.hz p {
  width:360px;
}

demodownload

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

现在Web站点上的动画效果可谓是越用越牛，千奇百怪，同时也增强了用户的交互体验，另一方面使你的网站在效果上显得更炫。目前在Web动画效果有多种多样，同时实现的方法也有多种多样，简单点的是纯CSS3制作的简单动画效果、有JavaScript脚本实现的动画，也有JavaScript其他库实现的动画，另外就是还有很多帮助你实现动画效果的jQuery插件等。今天我向大家搜集了一下这方面的资源，希望对您的工作和学习有所帮助。

1、Raphaël—JavaScript Library

demodownload

2、prepareTransition

demodownload

3、rekapi

demodownload

4、GFX

demodownload

5、CAAT

demodownload

6、three.js

demodownload

7、tQuery API

demodownload

8、EasyTransform

demodownload

9、jCS Media Library

demodownload

10、jQuery Transit

demodownload

11、Morf.js

demodownload

12、Paper.js

demodownload

13、Move.js

demodownload

14、GX

demodownload

15、Animatable

demodownload

16、Animate.css

demodownload

17、$fx

demodownload

18、Scripty2

demodownload

19、Processing.js

demodownload

20、script.aculo.us

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/source/20-animation-scripts-library-plugin.html

这个Lightbox效果实现原理很简单，就是点击图片或者使用tab键，当图片得到焦点（:focus）时，图片会在当前位置被放大，同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption，包含图片以及图片标题，同时在figure相邻位置设置一个span标签，通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单，利用border-radius制作了图片边框的圆角效果，使用box-shadow制作了图片的阴影效果，最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。

demodownload

HTML CODE:

<section id="slideshow" class="clearfix">
  <figure tabindex="0">
    <img src="http://www.w3cplus.com/demo/css3/CSS3HoverEffects/5.jpg" alt="Lightbox effect with Tabindex and CSS3" />
    <figcaption>W3cplus Demo</figcaption>  
  </figure>  
  <span></span>  
  <figure tabindex="0">  
    <img src="http://www.w3cplus.com/demo/css3/CSS3HoverEffects/6.jpg" alt="Lightbox effect with Tabindex and CSS3" />
    <figcaption>Lightbox Effect</figcaption>  
  </figure>  
  <span></span>  
  <figure tabindex="0"> 
    <img src="http://www.w3cplus.com/demo/css3/CSS3HoverEffects/3.jpg" alt="Lightbox effect with Tabindex and CSS3" />
    <figcaption>A simple idea...</figcaption>  
  </figure>  
  <span></span>  
</section>	

CSS CODE:

body {
  background: url(http://www.w3cplus.com/demo/css3/CSS3HoverEffects/black-bg.png) repeat;
}
#slideshow {
  text-align:center;
  width:886px;
  margin: 50px auto;
}
#slideshow figure {  
  position: relative;  
  float: left;  
  margin: 20px 37px;  
  z-index: 100;  
  width: 200px;  
  background: #fff;  
  border: 10px solid #fff;  
  border-radius: 8px;  
  box-shadow: 0 3px 10px #ccc;  
  -webkit-transition: all 0.7s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease; 
}  
#slideshow figure img {  
  width: 100%;  
}  
#slideshow figcaption {  
  font-family: verdana, arial, sans-serif;  
  font-size: 1.1em;  
  text-align: center;  
  color: #5d7885;  
  background: #fff;  
}  

#slideshow figure:focus {  
  outline: none;  
  z-index: 200;  
  -webkit-transform: scale(2.8) translateY(50px);  
  -moz-transform: scale(2.8) translateY(50px);  
  -o-transform: scale(2.8) translateY(50px);  
  -ms-transform: scale(2.8) translateY(50px);   
  transform: scale(2.8) translateY(50px);  
  box-shadow: 0 3px 10px #333;  
}  
#slideshow figure:focus+span {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background: rgba(0,0,0,0.6);  
  z-index: 150;  
} 

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/lightbox-effect-with-tabindex-and-css3.html

这个Lightbox效果也是一个纯CSS3写的效果，这个效果的制作方法也不算复杂，相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏，而且配用了ansition属性来制作了动画效果，而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

demodownload

HTML CODE

<div class="img-wrap clearfix">
  <a href="#img1" class="lbLink"><img src="1s.jpg" alt="" /></a>
  <a href="#img2" class="lbLink"><img src="2s.jpg" alt="" /></a>
  <a href="#img3" class="lbLink"><img src="3s.jpg" alt="" /></a>
  <a href="#img4" class="lbLink"><img src="4s.jpg" alt="" /></a>
  <a href="#img5" class="lbLink"><img src="5s.jpg" alt="" /></a>
  <a href="#img6" class="lbLink"><img src="6s.jpg" alt="" /></a>
  <a href="#img7" class="lbLink"><img src="7s.jpg" alt="" /></a>
  <a href="#img8" class="lbLink"><img src="8s.jpg" alt="" /></a>
</div>
<div class="lightbox-wrap">
  <div class="lb" id="img1">
    <a href="#close"><img src="1.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img2">
    <a href="#close"><img src="2.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img3">
    <a href="#close"><img src="3.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img4">
    <a href="#close"><img src="4.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img5">
    <a href="#close"><img src="5.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img6">
    <a href="#close"><img src="6.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img7">
    <a href="#close"><img src="7.jpg" alt="" /></a>
  </div>
  <div class="lb" id="img8">
    <a href="#close"><img src="8.jpg" alt="" /></a>
  </div>
</div>

CSS CODE

@-webkit-keyfames fade {
  from {opacity:0;}
  to{opacity:1}
}
@-moz-keyfames fade {
  from {opacity:0;}
  to{opacity:1}
}
@-ms-keyfames fade {
  from {opacity:0;}
  to{opacity:1}
}
@-o-keyfames fade {
  from {opacity:0;}
  to{opacity:1}
}
@keyfames fade {
  from {opacity:0;}
  to{opacity:1;}
}
@-webkit-keyfames grow {
  from{height:0px;}
  to {height:300px;}
}
@-moz-keyfames grow {
  from{height:0px;}
  to {height:300px;}
}
@-ms-keyfames grow {
  from{height:0px;}
  to {height:300px;}
}
@-o-keyfames grow {
  from{height:0px;}
  to {height:300px;}
}
@keyfames grow {
  from{height:0px;}
  to {height:300px;}
}
body {
  background: url(http://www.w3cplus.com/demo/css3/CSS3HoverEffects/black-bg.png) repeat;
}
.img-wrap {
  width: 930px;
  margin: 20px auto;
}
.lbLink {
  display:block;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(255,255,255,0.3);
  border: 5px solid #fff;
  float: left;
  margin: 10px;		
}
.lb {
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  background: rgba(0,0,0,0.65);
  -webkit-animation-duration: 1s;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -moz-animation-duration: 1s;
  -moz-animation-name: fade;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -o-animation-duration: 1s;
  -o-animation-name: fade;
  -o-animation-iteration-count: 1;
  -o-animation-direction: normal;
  -ms-animation-duration: 1s;
  -ms-animation-name: fade;
  -ms-animation-iteration-count: 1;
  -ms-animation-direction: normal;
  animation-duration: 1s;
  animation-name: fade;
  animation-iteration-count: 1;
  animation-direction: normal;
}
.lb a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.lb img {
  border: 8px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: grow;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: grow;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-timing-function: ease-in;
  -o-animation-duration: 0.5s;
  -o-animation-name: grow;
  -o-animation-iteration-count: 1;
  -o-animation-direction: normal;
  -o-animation-timing-function: ease-in;
  -ms-animation-duration: 0.5s;
  -ms-animation-name: grow;
  -ms-animation-iteration-count: 1;
  -ms-animation-direction: normal;
  -ms-animation-timing-function: ease-in;
  animation-duration: 0.5s;
  animation-name: grow;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-in;
}
.lb:target {
  display: table;
  height: 100%;
}

demodownload

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

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良，修改的最显示的地方就是添加了一个假的关闭按钮，其实给Lightbox的全屏图片显示时添加了一个动画效果，有０.９放大到１，而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

demodownload

HTML　CODE：

<ul class="link-img clearfix">
  <li><a href="#pic1"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/8s.jpg" alt="Picture 1"></a></li>
  <li><a href="#pic2"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/6s.jpg" alt="Picture 2"></a></li>
  <li><a href="#pic3"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/4s.jpg" alt="Picture 3"></a></li>
  <li><a href="#pic4"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/2s.jpg" alt="Picture 4"></a></li>
  <li><a href="#pic5"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/1s.jpg" alt="Picture 5"></a></li>
  <li><a href="#pic6"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/3s.jpg" alt="Picture 3"></a></li>
  <li><a href="#pic7"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/5s.jpg" alt="Picture 4"></a></li>
  <li><a href="#pic8"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/7s.jpg" alt="Picture 5"></a></li>
</ul>
<ul class="full-img">
  <li id="pic1"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/8.jpg" alt=""></a></li>
  <li id="pic2"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/6.jpg" alt=""></a></li>
  <li id="pic3"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/4.jpg" alt=""></a></li>
  <li id="pic4"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/2.jpg" alt=""></a></li>
  <li id="pic5"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/1.jpg" alt=""></a></li>
  <li id="pic6"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/3.jpg" alt=""></a></li>
  <li id="pic7"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/5.jpg" alt=""></a></li>
  <li id="pic8"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/7.jpg" alt=""></a></li>
</ul>

CSS3 CODE

@-webkit-keyframes supersize {
  from {-webkit-transform: scale(0.9);}
  to {-webkit-transform: scale(1);}
}
@-moz-keyframes supersize {
  from {-moz-transform: scale(0.9);}
  to {-moz-transform: scale(1);}
}
@-o-keyframes supersize {
  from {-o-transform: scale(0.9);}
  to {-o-transform: scale(1);}
}
@-ms-keyframes supersize {
  from {-ms-transform: scale(0.9);}
  to {-ms-transform: scale(1);}
}
@keyframes supersize {
  from {transform: scale(0.9);}
  to {transform: scale(1);}
}
body{
  background: url(http://www.w3cplus.com/demo/css3/CSS3HoverEffects/black-bg.png) repeat;
}
.link-img,
.full-img {
  margin: 0;
  padding: 0;
  list-style: none outside none;
}
.link-img {
  width: 930px;
  margin: 20px auto;
}
.link-img li {
  float: left;
  display: inline;
}
.link-img a {
  display: block;
  float: left;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  border: 5px solid white;
  margin: 10px;
}
.link-img img {
  vertical-align: top;
　-webkit-transition:opacity .2s linear;
  -moz-transition:opacity .2s linear;
  -o-transition:opacity .2s linear;
  transition:opacity .2s linear;
}
.link-img a:hover img {
  opacity: 0.75;
}
.link-img a:active img {
  margin-top: 1px;
}
li[id] {
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:rgba(0,0,0,.8);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  transition:opacity 1.2s cubic-bezier(0,0,0,1);
}
li[id] a:before {
  content:url(close.png);
  position:absolute;
  margin-top:-15px;
  margin-left:-15px;
  z-index: 9999;
  opacity:0;
}
li[id] a:hover:before {opacity:1;}
li[id]:target {
  width:100%;
  height:100%;
  opacity:1;
  display: table;
  text-align: center;
}
li[id]:target a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
li[id]:target a img {
  border:15px solid #fff;
  box-shadow:0 1px 8px #000;
  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);
  -moz-animation:supersize .8s cubic-bezier(0,0,0,1);
  -o-animation:supersize .8s cubic-bezier(0,0,0,1);
  -ms-animation:supersize .8s cubic-bezier(0,0,0,1);
  animation:supersize .8s cubic-bezier(0,0,0,1);
}

demodownload

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

Codrops CSS3 Lightbox总供有三个效果，今天把第一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对绽放，要是你对这个感兴趣，不仿看看。

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">c
      <a href="#page" class="lb-close">x Close</a>
      <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>
      </div>							
    </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>
      </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>
      </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>
      </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>
      </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>
      </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>
      >/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>
      </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>
      </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>
      </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);
  padding-top:20px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  width: 550px;
  margin: 10px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  -webkit-transition: opacity 0.3s linear 1.3s;
  -moz-transition: opacity 0.3s linear 1.3s;
  -o-transition: opacity 0.3s linear 1.3s;
  -ms-transition: opacity 0.3s linear 1.3s;
  transition: opacity 0.3s linear 1.3s;
}
.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: 20px;
}
.lb-overlay div p{
  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;
  text-decoration: none;
  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);
  -webkit-transition: opacity 0.3s linear 1.2s;
  -moz-transition: opacity 0.3s linear 1.2s;
  -o-transition: opacity 0.3s linear 1.2s;
  -ms-transition: opacity 0.3s linear 1.2s;
  transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
  -webkit-animation: fadeInScale 1.2s ease-in-out;
  -moz-animation: fadeInScale 1.2s ease-in-out;
  -o-animation: fadeInScale 1.2s ease-in-out;
  -ms-animation: fadeInScale 1.2s ease-in-out;
  animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 
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%;
}

特别声明：此案例代码和图片来自于http://tympanus.net/codrops/2011/12/26/css3-lightbox/

demodownload

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

英文网址：CSS3 LIGHTBOX

表单元素向来是前端人员最为头痛的一件事情，众说周知，表单元素的兼容性是最为难处理的，而且想制作一个美丽好看的表单元件，都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器，使用ＣＳＳ３来美化还是可以的，她不需要依赖任何脚本代码，能将表单的元件美化的很靓丽。今天就给大家推荐一个纯ＣＳＳ３美化的表单中的下拉选择框（select）的效果。这个效果很简单，使用渐变制作了表单ｓｅｌｅｃｔ的背景色，同时使用ｌａｂｅｌ标签的伪元素“：ａｆｔｅｒ”来制作向右的三角。其中最为有特色的是，使用渐变制作了一个美丽的背景方格效果，详细的请看代码。

demodownload

HTML CODE

<div class="control">
　　<form>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　　　<div class="control_select">
　　　　　　<label>
　　　　　　　　<select>
　　　　　　　　　　<option>Click it please</option>
　　　　　　　　</select>
　　　　　　</label>
　　　　</div>
　　</form>
</div><!-- /control -->

CSS CODE

body {
　　background-color:#4a6d8d;
　　background-image: -webkit-radial-gradient(rgba(197,241,251,.3), transparent),
　　　-webkit-linear-gradient(#5c80a2 1px, transparent 1px),
　　　-webkit-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
　　　-webkit-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
　　　-webkit-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
　　background-image: -moz-radial-gradient(rgba(197,241,251,.3), transparent),
　　　-moz-linear-gradient(#5c80a2 1px, transparent 1px),
　　　-moz-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
　　　-moz-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
　　　-moz-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
　　background-image: -ms-radial-gradient(rgba(197,241,251,.3), transparent),
　　　-ms-linear-gradient(#5c80a2 1px, transparent 1px),
　　　-ms-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
　　　-ms-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
　　　-ms-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
　　background-image: -o-radial-gradient(rgba(197,241,251,.3), transparent),
　　　-o-linear-gradient(#5c80a2 1px, transparent 1px),
　　　-o-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
　　　-o-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
　　　-o-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);	
　　background-image: radial-gradient(rgba(197,241,251,.3), transparent),
　　　linear-gradient(#5c80a2 1px, transparent 1px),
　　　linear-gradient(0deg, #5c80a2 1px, transparent 1px),
　　　linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
　　　linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);									
　　background-size:100% 100%,100px 100px, 100px 100px, 10px 10px, 10px 10px;
　　background-position:0 0,-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.demo {
　　width: 600px;
　　margin: 80px auto 0;
}
.control_select {
　　margin-bottom: 20px;
　　width: 200px;
　　float: left;
}
select {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  line-height: 1.8em;
  width: 90%;
  padding: 10px 15px 10px 10px;
  border-radius: 3px;
  height: 44px;
  -webkit-appearance: none;
}
label {
　　position: relative;
}

label:after {
　　position:absolute;
　　top: -4px;
　　right: 12px;
　　display: inline-block;
　　content: "\25ba";
　　color: #fff;
　　font-size: 16px;
　　text-align: center;
　　width: 24px;
　　height: 24px;
　　border-radius: 3px;
　　pointer-events: none;
}
.control_select:nth-child(1) label:after {
　　box-shadow: 0 1px 2px #263f57 inset,0 1px 0 #639cc6;
　　background: -webkit-linear-gradient(top,#2f4f6d,#3c5f80);
　　background: -moz-linear-gradient(top,#2f4f6d,#3c5f80);
　　background: -ms-linear-gradient(top,#2f4f6d,#3c5f80);
　　background: -o-linear-gradient(top,#2f4f6d,#3c5f80);
　　background: linear-gradient(top,#2f4f6d,#3c5f80);
}
.control_select:nth-child(1) select{
　　border: 1px solid #304455;
   box-shadow: 0 1px 0 #a3c1de inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#78a4ce,#3e6386);
    background: -moz-linear-gradient(top,#78a4ce,#3e6386);
    background: -ms-linear-gradient(top,#78a4ce,#3e6386);
    background: -o-linear-gradient(top,#78a4ce,#3e6386);
    background: linear-gradient(top,#78a4ce,#3e6386);
}
.control_select:nth-child(1) select:hover {
    background: -webkit-linear-gradient(top,#8fbfe6,#3d668c);
    background: -moz-linear-gradient(top,#8fbfe6,#3d668c);
    background: -ms-linear-gradient(top,#8fbfe6,#3d668c);
    background: -o-linear-gradient(top,#8fbfe6,#3d668c);
    background: linear-gradient(top,#8fbfe6,#3d668c);
}
.control_select:nth-child(1) select:active {
　　box-shadow: 0 2px 5px #324c64 inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#416486,#5680a8);
    background: -moz-linear-gradient(top,#416486,#5680a8);
    background: -ms-linear-gradient(top,#416486,#5680a8);
    background: -o-linear-gradient(top,#416486,#5680a8);
    background: linear-gradient(top,#416486,#5680a8);
}
.control_select:nth-child(2) label:after {
　　box-shadow: 0 1px 2px #572626 inset,0 1px 0 #d177a5;
　　background: -webkit-linear-gradient(top,#6d2f2f,#803c5d);
　　background: -moz-linear-gradient(top,#6d2f2f,#803c5d);
　　background: -ms-linear-gradient(top,#6d2f2f,#803c5d);
　　background: -o-linear-gradient(top,#6d2f2f,#803c5d);
　　background: linear-gradient(top,#6d2f2f,#803c5d);
}
.control_select:nth-child(2) select{
　　border: 1px solid #502b3a;
    box-shadow: 0 1px 0 #e1a6bc inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d17c9d,#89425d);
    background: -moz-linear-gradient(top,#d17c9d,#89425d);
    background: -ms-linear-gradient(top,#d17c9d,#89425d);
    background: -o-linear-gradient(top,#d17c9d,#89425d);
    background: linear-gradient(top,#d17c9d,#89425d);
}
.control_select:nth-child(2) select:hover {
    background: -webkit-linear-gradient(top,#e08db0,#924360);
    background: -moz-linear-gradient(top,#e08db0,#924360);
    background: -ms-linear-gradient(top,#e08db0,#924360);
    background: -o-linear-gradient(top,#e08db0,#924360);
    background: linear-gradient(top,#e08db0,#924360);
}
.control_select:nth-child(2) select:active {
　　box-shadow: 0 2px 5px #522b3b inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7b3b53,#a04e6d);
    background: -moz-linear-gradient(top,#7b3b53,#a04e6d);
    background: -ms-linear-gradient(top,#7b3b53,#a04e6d);
    background: -o-linear-gradient(top,#7b3b53,#a04e6d);
    background: linear-gradient(top,#7b3b53,#a04e6d);
}
.control_select:nth-child(3) label:after {
　　box-shadow: 0 1px 2px #215325 inset,0 1px 0 #6ec98d;
　　background: -webkit-linear-gradient(top,#2a682f,#3c805f);
　　background: -moz-linear-gradient(top,#2a682f,#3c805f);
　　background: -ms-linear-gradient(top,#2a682f,#3c805f);
　　background: -o-linear-gradient(top,#2a682f,#3c805f);
　　background: linear-gradient(top,#2a682f,#3c805f);
}
.control_select:nth-child(3) select{
　　border: 1px solid #2d5237;
    box-shadow: 0 1px 0 #a5e0b6 inset,	0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7dd295,#3d8451);
    background: -moz-linear-gradient(top,#7dd295,#3d8451);
    background: -ms-linear-gradient(top,#7dd295,#3d8451);
    background: -o-linear-gradient(top,#7dd295,#3d8451);
    background: linear-gradient(top,#7dd295,#3d8451);
}
.control_select:nth-child(3) select:hover {
    background: -webkit-linear-gradient(top,#96e8aa,#3d8f55);
    background: -moz-linear-gradient(top,#96e8aa,#3d8f55);
    background: -ms-linear-gradient(top,#96e8aa,#3d8f55);
    background: -o-linear-gradient(top,#96e8aa,#3d8f55);
    background: linear-gradient(top,#96e8aa,#3d8f55);
}
.control_select:nth-child(3) select:active {
　　box-shadow: 0 2px 5px #335a3d inset,	0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#3b7b4d,#56a96e);
    background: -moz-linear-gradient(top,#3b7b4d,#56a96e);
    background: -ms-linear-gradient(top,#3b7b4d,#56a96e);
    background: -o-linear-gradient(top,#3b7b4d,#56a96e);
    background: linear-gradient(top,#3b7b4d,#56a96e);
}
.control_select:nth-child(4) label:after {
　　box-shadow: 0 1px 2px #461b74 inset,0 1px 0 #ac77e2;
　　background: -webkit-linear-gradient(top,#522185,#612c99);
　　background: -moz-linear-gradient(top,#522185,#612c99);
　　background: -ms-linear-gradient(top,#522185,#612c99);
　　background: -o-linear-gradient(top,#522185,#612c99);
　　background: linear-gradient(top,#522185,#612c99);
}
.control_select:nth-child(4) select{
　　border: 1px solid #703b88;
    box-shadow: 0 1px 0 #b474e6 inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#a25de3,#7632bd);
    background: -moz-linear-gradient(top,#a25de3,#7632bd);
    background: -ms-linear-gradient(top,#a25de3,#7632bd);
    background: -o-linear-gradient(top,#a25de3,#7632bd);
    background: linear-gradient(top,#a25de3,#7632bd);
}
.control_select:nth-child(4) select:hover {
    background: -webkit-linear-gradient(top,#b678f2,#7b38c0);
    background: -moz-linear-gradient(top,#b678f2,#7b38c0);
    background: -ms-linear-gradient(top,#b678f2,#7b38c0);
    background: -o-linear-gradient(top,#b678f2,#7b38c0);
    background: linear-gradient(top,#b678f2,#7b38c0);
}
.control_select:nth-child(4) select:active {
　　box-shadow: 0 2px 5px #461b74 inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7332b7,#7c3ac1);
    background: -moz-linear-gradient(top,#7332b7,#7c3ac1);
    background: -ms-linear-gradient(top,#7332b7,#7c3ac1);
    background: -o-linear-gradient(top,#7332b7,#7c3ac1);
    background: linear-gradient(top,#7332b7,#7c3ac1);
}
.control_select:nth-child(5) label:after {
　　box-shadow: 0 1px 2px #777b12 inset,0 1px 0 #e7ea94;
　　background: -webkit-linear-gradient(top,#7b7f17,#a6ab2e);
　　background: -moz-linear-gradient(top,#7b7f17,#a6ab2e);
　　background: -ms-linear-gradient(top,#7b7f17,#a6ab2e);
　　background: -o-linear-gradient(top,#7b7f17,#a6ab2e);
　　background: linear-gradient(top,#7b7f17,#a6ab2e);
}
.control_select:nth-child(5) select{
　　border: 1px solid #4f5004;
   box-shadow: 0 1px 0 #e7ea94 inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d1d744,#959a24);
    background: -moz-linear-gradient(top,#d1d744,#959a24);
    background: -ms-linear-gradient(top,#d1d744,#959a24);
    background: -o-linear-gradient(top,#d1d744,#959a24);
    background: linear-gradient(top,#d1d744,#959a24);
}
.control_select:nth-child(5) select:hover {
    background: -webkit-linear-gradient(top,#e5eb65,#aeb333);
    background: -moz-linear-gradient(top,#e5eb65,#aeb333);
    background: -ms-linear-gradient(top,#e5eb65,#aeb333);
    background: -o-linear-gradient(top,#e5eb65,#aeb333);
    background: linear-gradient(top,#e5eb65,#aeb333);
}
.control_select:nth-child(5) select:active {
　　box-shadow: 0 2px 5px #4f5004 inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#a3a82a,#aeb333);
    background: -moz-linear-gradient(top,#a3a82a,#aeb333);
    background: -ms-linear-gradient(top,#a3a82a,#aeb333);
    background: -o-linear-gradient(top,#a3a82a,#aeb333);
    background: linear-gradient(top,#a3a82a,#aeb333);
}
.control_select:nth-child(6) label:after {
　　box-shadow: 0 1px 2px #741c1c inset,0 1px 0 #e15656;
　　background: -webkit-linear-gradient(top,#992d2d,#ac3d3d);
　　background: -moz-linear-gradient(top,#992d2d,#ac3d3d);
　　background: -ms-linear-gradient(top,#992d2d,#ac3d3d);
　　background: -o-linear-gradient(top,#992d2d,#ac3d3d);
　　background: linear-gradient(top,#992d2d,#ac3d3d);
}
.control_select:nth-child(6) select{
　　border: 1px solid #652525;
    box-shadow: 0 1px 0 #f8aaaa inset,0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d55151,#b03030);
    background: -moz-linear-gradient(top,#d55151,#b03030);
    background: -ms-linear-gradient(top,#d55151,#b03030);
    background: -o-linear-gradient(top,#d55151,#b03030);
    background: linear-gradient(top,#d55151,#b03030);
}
.control_select:nth-child(6) select:hover {
    background: -webkit-linear-gradient(top,#dd5959,#b53333);
    background: -moz-linear-gradient(top,#dd5959,#b53333);
    background: -ms-linear-gradient(top,#dd5959,#b53333);
    background: -o-linear-gradient(top,#dd5959,#b53333);
    background: linear-gradient(top,#dd5959,#b53333);
}
.control_select:nth-child(6) select:active {
　　box-shadow: 0 2px 5px #5d1919 inset,	0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#9e2525,#b53333);
    background: -moz-linear-gradient(top,#9e2525,#b53333);
    background: -ms-linear-gradient(top,#9e2525,#b53333);
    background: -o-linear-gradient(top,#9e2525,#b53333);
    background: linear-gradient(top,#9e2525,#b53333);
}

demodownload

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

Codrops CSS3 Lightbox总供有三个效果，今天把第二个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。这个案例与第一个区别其实很小，只是在对图片缩放做了一下不同效果处理。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对缩放。要是你对这个感兴趣，不仿看看。

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">c
      <a href="#page" class="lb-close">x Close</a>
      <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>
      </div>							
    </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>
      </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>
      </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>
      </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>
      </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>
      </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>
      >/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>
      </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>
      </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>
      </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: right;
  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);
  padding-top: 20px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  width: 550px;
  margin: 10px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  -webkit-transition: opacity 0.3s linear 1.3s;
  -moz-transition: opacity 0.3s linear 1.3s;
  -o-transition: opacity 0.3s linear 1.3s;
  -ms-transition: opacity 0.3s linear 1.3s;
  transition: opacity 0.3s linear 1.3s;
}
.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{
  text-align: left;
  float: left;
  width: 260px;
}
.lb-overlay a.lb-close{
  background: rgba(27,54,81,0.8);
  text-decoration: none;
  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);
  -webkit-transition: opacity 0.3s linear 1.2s;
  -moz-transition: opacity 0.3s linear 1.2s;
  -o-transition: opacity 0.3s linear 1.2s;
  -ms-transition: opacity 0.3s linear 1.2s;
  transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
  -webkit-animation: scaleDown 1.2s ease-in-out;
  -moz-animation: scaleDown 1.2s ease-in-out;
  -o-animation: scaleDown 1.2s ease-in-out;
  -ms-animation: scaleDown 1.2s ease-in-out;
  animation: scaleDown 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes scaleDown {
  0% { -webkit-transform: scale(10,10); opacity: 0; }
  100% { -webkit-transform: scale(1,1); opacity: 1; }
}
@-moz-keyframes scaleDown {
  0% { -moz-transform: scale(10,10); opacity: 0; }
  100% { -moz-transform: scale(1,1); opacity: 1; }
}
@-o-keyframes scaleDown {
  0% { -o-transform: scale(10,10); opacity: 0; }
  100% { -o-transform: scale(1,1); opacity: 1; }
}
@-ms-keyframes scaleDown {
  0% { -ms-transform: scale(10,10); opacity: 0; }
  100% { -ms-transform: scale(1,1); opacity: 1; }
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}
/* 
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-lightbox2.html

英文网址：CSS3 LIGHTBOX