这个效果是没有任何设计图，也没有任何参照样版，藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果，其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性，比如说圆角属性制作了一个圆形，使用opacity控制菜单的动效果效果，最明显的效果是鼠标悬浮时会放大当前菜单项，怎么实现的，你知道？我想你知道的，要是不知道就继续往下看吧。

demodownload

HTML CODE

<nav class="nav">
  <ul>
   <li>
     <a href="#"><span>Home</span></a>
   </li>
   <li>
     <a href="#"><span>Phone</span></a>
   </li>
   <li>
     <a href="#"><span>Wifi</span></a>
   </li>
   <li>
     <a href="#"><span>Setting</span></a>
   </li>
   <li>
     <a href="#"><span>Twitter</span></a>
   </li>
  </ul>
</nav><!--/nav-->

CSS Code

body {
 background-color: #dfdfdf;
 -webkit-backface-visibility: hidden;
}	
.demo {
 margin: 60px auto 0;
 text-align:center;
} 
.nav li	{
 position: relative;
 display: inline-block;
 margin-left: -50px;
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 -ms-transition: all 0.4s linear;
 transition: all 0.4s linear;
}
.nav li a {
 display: inline-block;
 width: 120px;
 height: 120px;
 padding: 30px;
 border-radius: 50%;
 border-width: 8px;
 border-style: solid;
}
.nav li:hover {
 z-index: 11;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
.nav li:hover a {
 text-decoration: none;
}
.nav li:hover span {
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 -ms-transition: all 0.4s linear;
 transition: all 0.4s linear;
 -webkit-animation: moveFromBottom 0.3s ease;
 -moz-animation: moveFromBottom 0.3s ease;
 -o-animation: moveFromBottom 0.3s ease;
 -ms-animation: moveFromBottom 0.3s ease;
 animation: moveFromBottom 0.3s ease;
}
.nav li:nth-child(1) a {
 color: #4d9683;
 text-shadow: 0 1px 0 #9de3cf;
 border-color: #549e89;
 background-color: #51c9a7;
}
.nav li:nth-child(2) a {
 color: #be607e;
 text-shadow: 0 1px 0 #de8ba5;
 border-color: #e499b0;
 background-color: #e67b9c;
}
.nav li:nth-child(3) a {
 color: #5e9eb4;
 text-shadow: 0 1px 0 #adddec;
 border-color: #a2cfde;
 background-color: #7ec9e3;
}
.nav li:nth-child(4) a {
 color: #ba9d5e;
 text-shadow: 0 1px 0 #f5e0ad;
 border-color: #dcc999;
 background-color: #f0cd78;
}
.nav li:nth-child(5) a {
 color: #b468a2;
 text-shadow: 0 1px 0 #e8acd8;
 border-color: #d8abcd;
 background-color: #dd91cb;
}
.nav li:nth-child(1):hover a {
 color: #0f775c;
 text-shadow: 0 1px 0 #81e6c9;
 border-color: #0a8462;
 background-color: #00c18c;
}
.nav li:nth-child(2):hover a {
 color: #b12a55;
 text-shadow: 0 1px 0 #ff95b7;
 border-color: #ba335c;
 background-color: #ea5180;
}
.nav li:nth-child(3):hover a {
 color: #2883a2;
 text-shadow: 0 1px 0 #9cdef2;
 border-color: #4397b3;
 background-color: #55c1e5;
}
.nav li:nth-child(4):hover a {
 color: #ab8228;
 text-shadow: 0 1px 0 #ffe199;
 border-color: #b08f3e;
 background-color: #f8c64d;
}
.nav li:nth-child(5):hover a {
 color: #a33689;
 text-shadow: 0 1px 0 #ec97d6;
 border-color: #b7569f;
 background-color: #dd70c3;
}
.nav span {
 display: block;
 line-height:70px;
 font-size: 30px;
 font-style: normal;
}
.nav span:before {
 display: block;
}
.nav li:nth-child(1) span:before {
 content: "home";
}
.nav li:nth-child(2) span:before {
 content: "phone";
}
.nav li:nth-child(3) span:before {
 content: "wifi";
}
.nav li:nth-child(4) span:before {
 content: "setting";
}
.nav li:nth-child(5) span:before {
 content: "twitter";
}
@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(120%) scale(0.5) ;
    opacity: 0;
  }
 to {
   -webkit-transform: translateY(0%) scale(1);
   opacity: 1;        
 }
}
@-moz-keyframes moveFromBottom {
  from {
    -moz-transform: translateY(120%) scale(0.5) ;
    opacity: 0;
  }
  to {
    -moz-transform: translateY(0%) scale(1);
    opacity: 1;        
  }
}
@-ms-keyframes moveFromBottom {
  from {
    -ms-transform: translateY(120%) scale(0.5) ;
    opacity: 0;
  }
  to {
   -ms-transform: translateY(0%) scale(1);
   opacity: 1;        
 }
}
@-o-keyframes moveFromBottom {
  from {
    -o-transform: translateY(120%) scale(0.5) ;
    opacity: 0;
  }
  to {
   -o-transform: translateY(0%) scale(1);
   opacity: 1;        
 }
}
@keyframes moveFromBottom {
  from {
    transform: translateY(120%) scale(0.5) ;
    opacity: 0;
  }
  to {
   transform: translateY(0%) scale(1);
   opacity: 1;        
 }
}
.nav span:before { 
 font-family: 'LigatureSymbols';
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 -ms-font-smoothing: antialiased;
 -o-font-smoothing: antialiased;
 font-smoothing: antialiased;
 -webkit-font-feature-settings: "liga" 1, "dlig" 1;
 -moz-font-feature-settings: "liga=1, dlig=1";
 -ms-font-feature-settings: "liga" 1, "dlig" 1;
 font-feature-settings: "liga" 1, "dlig" 1;
 font-size: 80px;
}
@font-face {
 font-family: 'LigatureSymbols';
 src: url('font/LigatureSymbols-2.05.eot');
 src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
   url('font/LigatureSymbols-2.05.woff') format('woff'),
   url('font/LigatureSymbols-2.05.ttf') format('truetype'),
   url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
 font-weight: normal;
 font-style: normal;
}

demodownload

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

经过一段时间的整理，Iconmoon Icon UI整理出来了，这个ICON UI总共具有316个不同的图标，所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似，如果你是初次接触，建议你先点击这里，阅读相关的文章。你会懂的。如果你知道是怎么一回事，那就继续往下吧，直接先浏览有什么样的图标，而且所有的图标，我们都配上了类名，使用时类名查询，就OK了。

demodownload

HTML CODE

<a href="#" class="icon icon-libreoffice">
  <span>
    <em> icon-libreoffice</em>
  </span>
</a>

这里仅显示了一个Icon的结构，其他的ICON结构使用相同，特别注意，此处结构添加了一个tip效果，方便大家查询对应的ICON类名，实际使用时，可以将tip中的代码去除。

CSS CODE

body {
 background-color: #f7f7f7;
}	
.demo {
 width: 900px;
 text-align: left;
 margin: 40px auto 0;
}
.control_buttons li {
 display: inline-block;
 margin-right: 6px;
}
.icon {
 position: relative;
 display: inline-block;
 color: #629ea4;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-bottom: 20px;
 border-radius: 3px;
 background-color: #fff;
}
.icon:hover {
 color: #7ac5cc;
 box-shadow: 0 0 2px 1px #7ac5cc;
 text-decoration:none;
}
.icon:hover span {
 max-height: 36px;
}
.icon span {
 position: absolute;
 left: -32px;
 top: 50px;
 display: block;
 overflow: hidden;
 max-height: 0;
 text-align: center;
 -webkit-transition: max-height .3s linear;
 -moz-transition: max-height .3s linear;
 -o-transition: max-height .3s linear;
 transition: max-height .3s linear;
 z-index: 2;
}
.icon span em {
 position: relative;
 display: block;
 width: 110px;
 line-height: 26px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 border-radius: 2px 2px 0 0;
 background-color:#7ac5cc;
 box-shadow: 0 1px 5px rgba(0,0,0,.3);
 z-index: 3;
}
.icon span em:after {
 position: absolute;
 left: 50%;
 top: -10px;
 content: '';
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #7ac5cc;
 margin-left: -6px;
}
.icon:before {
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 18px;
}
.icon-home:before {
 content: "\21";
}
.icon-home-2:before {
 content: "\22";
}
.icon-newspaper:before {
 content: "\23";
}
.icon-pencil:before {
 content: "\24";
}
.icon-pencil-2:before {
 content: "\25";
}
.icon-droplet:before {
 content: "\26";
}
.icon-pictures:before {
  content: "\27";
}
.icon-picture:before {
 content: "\28";
}
.icon-camera:before {
 content: "\29";
}
.icon-music:before {
 content: "\2a";
}
.icon-play:before {
 content: "\2b";
}
.icon-film:before {
 content: "\2c";
}
.icon-camera-2:before {
 content: "\2d";
}
.icon-spades:before {
 content: "\2e";
}
.icon-clubs:before {
 content: "\2f";
}
.icon-diamonds:before {
 content: "\30";
}
.icon-broadcast:before {
 content: "\31";
}
.icon-mic:before {
 content: "\32";
}
.icon-book:before {
 content: "\33";
}
.icon-file:before {
 content: "\34";
}
.icon-file-2:before {
 content: "\35";
}
.icon-new:before {
 content: "\36";
}
.icon-copy:before {
 content: "\37";
}
.icon-folder:before {
 content: "\38";
}
.icon-folder-2:before {
 content: "\39";
}
.icon-tag:before {
 content: "\3a";
}
.icon-cart:before {
 content: "\3b";
}
.icon-basket:before {
 content: "\3c";
}
.icon-calculate:before {
 content: "\3d";
}
.icon-support:before {
 content: "\3e";
}
.icon-phone:before {
 content: "\3f";
}
.icon-mail:before {
 content: "\40";
}
.icon-location:before {
 content: "\41";
}
.icon-compass:before {
 content: "\42";
}
.icon-history:before {
 content: "\43";
}
.icon-clock:before {
 content: "\44";
}
.icon-bell:before {
 content: "\45";
}
.icon-calendar:before {
 content: "\46";
}
.icon-printer:before {
 content: "\47";
}
.icon-mouse:before {
 content: "\48";
}
.icon-comments:before {
 content: "\49";
}
.icon-reply:before {
 content: "\4a";
}
.icon-reply-2:before {
 content: "\4b";
}
.icon-forward:before {
 content: "\4c";
}
.icon-redo:before {
 content: "\4d";
}
.icon-undo:before {
 content: "\4e";
}
.icon-flip:before {
 content: "\4f";
}
.icon-flip-2:before {
 content: "\50";
}
.icon-database:before {
 content: "\51";
}
.icon-upload:before {
 content: "\52";
}
.icon-download:before {
 content: "\53";
}
.icon-box-remove:before {
 content: "\54";
}
.icon-box-add:before {
 content: "\55";
}
.icon-box:before {
 content: "\56";
}
.icon-drawer:before {
 content: "\57";
}
.icon-drawer-2:before {
 content: "\58";
}
.icon-cabinet:before {
 content: "\59";
}
.icon-mobile:before {
 content: "\5a";
}
.icon-laptop:before {
 content: "\5b";
}
.icon-screen:before {
 content: "\5c";
}
.icon-comments-2:before {
 content: "\5d";
}
.icon-pie:before {
 content: "\5e";
}
.icon-bus:before {
 content: "\5f";
}
.icon-cube:before {
 content: "\60";
}
.icon-bars:before {
 content: "\61";
}
.icon-comments-3:before {
 content: "\62";
}
.icon-comments-4:before {
 content: "\63";
}
.icon-stats-up:before {
 content: "\64";
}
.icon-cube-2:before {
 content: "\65";
}
.icon-puzzle:before {
 content: "\66";
}
.icon-gift:before {
 content: "\67";
}
.icon-comments-5:before {
 content: "\68";
}
.icon-user:before {
 content: "\69";
}
.icon-trophy:before {
 content: "\6a";
}
.icon-glasses:before {
 content: "\6b";
}
.icon-glasses-2:before {
 content: "\6c";
}
.icon-diamond:before {
 content: "\6d";
}
.icon-user-2:before {
 content: "\6e";
}
.icon-user-3:before {
 content: "\6f";
}
.icon-coffee:before {
 content: "\70";
}
.icon-accessibility:before {
 content: "\71";
}
.icon-accessibility-2:before {
 content: "\72";
}
.icon-rocket:before {
 content: "\73";
}
.icon-busy:before {
 content: "\74";
}
.icon-loading:before {
 content: "\75";
}
.icon-meter-slow:before {
 content: "\76";
}
.icon-target:before {
 content: "\77";
}
.icon-meter-medium:before {
 content: "\78";
}
.icon-loading-2:before {
 content: "\79";
}
.icon-target-2:before {
 content: "\7a";
}
.icon-lightning:before {
 content: "\7b";
}
.icon-meter-fast:before {
 content: "\7c";
}
.icon-search:before {
 content: "\7d";
}
.icon-zoom-in:before {
 content: "\7e";
}
.icon-dashboard:before {
 content: "\e000";
}
.icon-power:before {
 content: "\e001";
}
.icon-power-2:before {
 content: "\e002";
}
.icon-fire:before {
 content: "\e003";
}
.icon-zoom-out:before {
 content: "\e004";
}
.icon-key:before {
 content: "\e005";
}
.icon-lab:before {
 content: "\e006";
}
.icon-clipboard:before {
 content: "\e007";
}
.icon-clipboard-2:before {
 content: "\e008";
}
.icon-remove:before {
 content: "\e009";
}
.icon-key-2:before {
 content: "\e00a";
}
.icon-locked:before {
 content: "\e00b";
}
.icon-unlocked:before {
 content: "\e00c";
}
.icon-equalizer:before {
 content: "\e00d";
}
.icon-cog:before {
 content: "\e00e";
}
.icon-wrench:before {
 content: "\e00f";
}
.icon-remove-2:before {
 content: "\e010";
}
.icon-remove-3:before {
 content: "\e011";
}
.icon-briefcase:before {
 content: "\e012";
}
.icon-briefcase-2:before {
 content: "\e013";
}
.icon-cars:before {
 content: "\e014";
}
.icon-cloud:before {
 content: "\e015";
}
.icon-cloud-2:before {
 content: "\e016";
}
.icon-tree-view:before {
 content: "\e017";
}
.icon-grid-view:before {
 content: "\e018";
}
.icon-playlist:before {
 content: "\e019";
}
.icon-download-2:before {
 content: "\e01a";
}
.icon-smiley:before {
 content: "\e01b";
}
.icon-arrow-down:before {
 content: "\e01c";
}
.icon-arrow-right:before {
 content: "\e01d";
}
.icon-radio-checked:before {
 content: "\e01e";
}
.icon-google:before {
 content: "\e01f";
}
.icon-flickr:before {
 content: "\e020";
}
.icon-flickr-2:before {
 content: "\e021";
}
.icon-google-plus:before {
 content: "\e022";
}
.icon-radio-unchecked:before {
 content: "\e023";
}
.icon-arrow-down-2:before {
 content: "\e024";
}
.icon-arrow-down-left:before {
 content: "\e025";
}
.icon-neutral:before {
 content: "\e026";
}
.icon-upload-2:before {
 content: "\e027";
}
.icon-upload-3:before {
 content: "\e028";
}
.icon-plus:before {
 content: "\e029";
}
.icon-arrow-left:before {
 content: "\e02a";
}
.icon-arrow-left-2:before {
 content: "\e02b";
}
.icon-font:before {
 content: "\e02c";
}
.icon-google-plus-2:before {
 content: "\e02d";
}
.icon-flickr-3:before {
 content: "\e02e";
}
.icon-picassa:before {
 content: "\e02f";
}
.icon-google-plus-3:before {
 content: "\e030";
}
.icon-paragraph-left:before {
 content: "\e031";
}
.icon-arrow-up:before {
 content: "\e032";
}
.icon-arrow-up-left:before {
 content: "\e033";
}
.icon-minus:before {
 content: "\e034";
}
.icon-link:before {
 content: "\e035";
}
.icon-link-2:before {
 content: "\e036";
}
.icon-help:before {
 content: "\e037";
}
.icon-arrow-up-2:before {
 content: "\e038";
}
.icon-arrow-right-2:before {
 content: "\e039";
}
.icon-paragraph-center:before {
 content: "\e03a";
}
.icon-gplus:before {
 content: "\e03b";
}
.icon-picassa-2:before {
 content: "\e03c";
}
.icon-dribbble:before {
 content: "\e03d";
}
.icon-google-drive:before {
 content: "\e03e";
}
.icon-paragraph-right:before {
 content: "\e03f";
}
.icon-arrow-down-3:before {
 content: "\e040";
}
.icon-arrow-up-right:before {
 content: "\e041";
}
.icon-help-2:before {
 content: "\e042";
}
.icon-flag:before {
 content: "\e043";
}
.icon-flag-2:before {
 content: "\e044";
}
.icon-blocked:before {
 content: "\e045";
}
.icon-arrow-right-3:before {
 content: "\e046";
}
.icon-arrow-left-3:before {
 content: "\e047";
}
.icon-paragraph-justify:before {
 content: "\e048";
}
.icon-facebook:before {
 content: "\e049";
}
.icon-dribbble-2:before {
 content: "\e04a";
}
.icon-dribbble-3:before {
 content: "\e04b";
}
.icon-facebook-2:before {
 content: "\e04c";
}
.icon-left-to-right:before {
 content: "\e04d";
}
.icon-arrow-up-3:before {
 content: "\e04e";
}
.icon-arrow-down-right:before {
 content: "\e04f";
}
.icon-cancel:before {
 content: "\e050";
}
.icon-attachment:before {
 content: "\e051";
}
.icon-eye:before {
 content: "\e052";
}
.icon-eye-2:before {
 content: "\e053";
}
.icon-checkmark:before {
 content: "\e054";
}
.icon-cancel-2:before {
 content: "\e055";
}
.icon-arrow-down-4:before {
 content: "\e056";
}
.icon-arrow-down-left-2:before {
 content: "\e057";
}
.icon-arrow-down-5:before {
 content: "\e058";
}
.icon-arrow-right-4:before {
 content: "\e059";
}
.icon-right-to-left:before {
 content: "\e05a";
}
.icon-share:before {
 content: "\e05b";
}
.icon-instagram:before {
 content: "\e05c";
}
.icon-facebook-3:before {
 content: "\e05d";
}
.icon-forrst:before {
 content: "\e05e";
}
.icon-forrst-2:before {
 content: "\e05f";
}
.icon-deviantart:before {
 content: "\e060";
}
.icon-deviantart-2:before {
 content: "\e061";
}
.icon-github:before {
 content: "\e062";
}
.icon-github-2:before {
 content: "\e063";
}
.icon-github-3:before {
 content: "\e064";
}
.icon-github-4:before {
 content: "\e065";
}
.icon-github-5:before {
 content: "\e066";
}
.icon-github-6:before {
 content: "\e067";
}
.icon-git:before {
 content: "\e068";
}
.icon-github-7:before {
 content: "\e069";
}
.icon-vimeo:before {
 content: "\e06a";
}
.icon-checkbox-partial:before {
 content: "\e06b";
}
.icon-mail-2:before {
 content: "\e06c";
}
.icon-arrow-up-4:before {
 content: "\e06d";
}
.icon-arrow-down-right-2:before {
 content: "\e06e";
}
.icon-happy:before {
 content: "\e06f";
}
.icon-thumbs-down:before {
 content: "\e070";
}
.icon-thumbs-up:before {
 content: "\e071";
}
.icon-arrow-up-right-2:before {
 content: "\e072";
}
.icon-arrow-right-5:before {
 content: "\e073";
}
.icon-arrow-left-4:before {
 content: "\e074";
}
.icon-arrow-down-left-3:before {
 content: "\e075";
}
.icon-checkbox:before {
 content: "\e076";
}
.icon-checkbox-unchecked:before {
 content: "\e077";
}
.icon-mail-3:before {
 content: "\e078";
}
.icon-mail-4:before {
 content: "\e079";
}
.icon-youtube:before {
 content: "\e07a";
}
.icon-vimeo-2:before {
 content: "\e07b";
}
.icon-youtube-2:before {
 content: "\e07c";
}
.icon-feed:before {
 content: "\e07d";
}
.icon-feed-2:before {
 content: "\e07e";
}
.icon-bluetooth:before {
 content: "\e07f";
}
.icon-share-2:before {
 content: "\e080";
}
.icon-share-3:before {
 content: "\e081";
}
.icon-tab:before {
 content: "\e082";
}
.icon-tab-2:before {
 content: "\e083";
}
.icon-backspace:before {
 content: "\e084";
}
.icon-arrow-right-6:before {
 content: "\e085";
}
.icon-arrow-down-right-3:before {
 content: "\e086";
}
.icon-arrow-down-6:before {
 content: "\e087";
}
.icon-arrow-up-5:before {
 content: "\e088";
}
.icon-arrow-up-left-2:before {
 content: "\e089";
}
.icon-loop:before {
 content: "\e08a";
}
.icon-star:before {
 content: "\e08b";
}
.icon-heart:before {
 content: "\e08c";
}
.icon-heart-2:before {
  content: "\e08d";
}
.icon-star-2:before {
 content: "\e08e";
}
.icon-star-3:before {
 content: "\e08f";
}
.icon-bookmark:before {
 content: "\e090";
}
.icon-bookmark-2:before {
 content: "\e091";
}
.icon-minus-2:before {
 content: "\e092";
}
.icon-plus-2:before {
 content: "\e093";
}
.icon-enter:before {
 content: "\e094";
}
.icon-exit:before {
 content: "\e095";
}
.icon-arrow-up-right-3:before {
 content: "\e096";
}
.icon-arrow-up-6:before {
 content: "\e097";
}
.icon-arrow-up-left-3:before {
 content: "\e098";
}
.icon-arrow-left-5:before {
 content: "\e099";
}
.icon-arrow-left-6:before {
 content: "\e09a";
}
.icon-menu:before {
 content: "\e09b";
}
.icon-enter-2:before {
 content: "\e09c";
}
.icon-backspace-2:before {
 content: "\e09d";
}
.icon-code:before {
 content: "\e09e";
}
.icon-embed:before {
 content: "\e09f";
}
.icon-new-tab:before {
 content: "\e0a0";
}
.icon-new-tab-2:before {
 content: "\e0a1";
}
.icon-twitter:before {
 content: "\e0a2";
}
.icon-twitter-2:before {
 content: "\e0a3";
}
.icon-twitter-3:before {
 content: "\e0a4";
}
.icon-feed-3:before {
 content: "\e0a5";
}
.icon-linkedin:before {
 content: "\e0a6";
}
.icon-wordpress:before {
 content: "\e0a7";
}
.icon-file-openoffice:before {
 content: "\e0a8";
}
.icon-file-word:before {
 content: "\e0a9";
}
.icon-linkedin-2:before {
 content: "\e0aa";
}
.icon-wordpress-2:before {
 content: "\e0ab";
}
.icon-joomla:before {
 content: "\e0ac";
}
.icon-lastfm:before {
 content: "\e0ad";
}
.icon-file-excel:before {
 content: "\e0ae";
}
.icon-lastfm-2:before {
 content: "\e0af";
}
.icon-file-powerpoint:before {
 content: "\e0b0";
}
.icon-blogger:before {
 content: "\e0b1";
}
.icon-blogger-2:before {
 content: "\e0b2";
}
.icon-delicious:before {
 content: "\e0b3";
}
.icon-file-zip:before {
 content: "\e0b4";
}
.icon-file-xml:before {
 content: "\e0b5";
}
.icon-stumbleupon:before {
 content: "\e0b6";
}
.icon-tumblr:before {
 content: "\e0b7";
}
.icon-tumblr-2:before {
 content: "\e0b8";
}
.icon-stumbleupon-2:before {
 content: "\e0b9";
}
.icon-file-css:before {
 content: "\e0ba";
}
.icon-html5:before {
 content: "\e0bb";
}
.icon-pinterest:before {
 content: "\e0bc";
}
.icon-yahoo:before {
 content: "\e0bd";
}
.icon-yahoo-2:before {
 content: "\e0be";
}
.icon-pinterest-2:before {
 content: "\e0bf";
}
.icon-html5-2:before {
 content: "\e0c0";
}
.icon-css3:before {
 content: "\e0c1";
}
.icon-xing:before {
 content: "\e0c2";
}
.icon-amazon:before {
 content: "\e0c3";
}
.icon-amazon-2:before {
 content: "\e0c4";
}
.icon-xing-2:before {
 content: "\e0c5";
}
.icon-chrome:before {
 content: "\e0c6";
}
.icon-flattr:before {
 content: "\e0c7";
}
.icon-tux:before {
 content: "\e0c8";
}
.icon-firefox:before {
 content: "\e0c9";
}
.icon-IE:before {
 content: "\e0ca";
}
.icon-foursquare:before {
 content: "\e0cb";
}
.icon-apple:before {
 content: "\e0cc";
}
.icon-finder:before {
 content: "\e0cd";
}
.icon-foursquare-2:before {
 content: "\e0ce";
}
.icon-opera:before {
 content: "\e0cf";
}
.icon-paypal:before {
 content: "\e0d0";
}
.icon-android:before {
 content: "\e0d1";
}
.icon-windows:before {
 content: "\e0d2";
}
.icon-soundcloud:before {
 content: "\e0d3";
}
.icon-soundcloud-2:before {
 content: "\e0d4";
}
.icon-reddit:before {
 content: "\e0d5";
}
.icon-skype:before {
 content: "\e0d6";
}
.icon-file-pdf:before {
 content: "\e0d7";
}
.icon-libreoffice:before {
 content: "\e0d8";
}
.icon-yelp:before {
 content: "\e0d9";
}
.icon-paypal-2:before {
 content: "\e0da";
}
.icon-paypal-3:before {
 content: "\e0db";
}
.icon-IcoMoon:before {
 content: "\e0dc";
}
.icon-safari:before {
 content: "\e0dd";
}

@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

特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。

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

Box-shadow效果是CSS3中很实用的属性之一，现在网站大量的阴影效果都是通过这个属性来制作，今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果，在整个案例中，有些效果使用了CSS3的伪类选择器，以及CSS3的transform等属性，制作了一些特殊的box-shadow效果，感兴趣的往下吧。

demodownload

HTML Code

<div class="box box1"><p>Effect 1</p></div>
<div class="box box2"><p>Effect 2</p></div>
<div class="box box3"><p>Effect 3</p></div>
<div class="box box4"><p>Effect 4</p><div class="shBl"></div><div class="shBr"></div></div>
<div class="box box5"><p>Effect 5</p><div class="shBl"></div><div class="shBlFlod"></div></div>
<div class="box box6"><p>Effect 6</p><div class="cornerLf"></div><div class="cornerRt"></div></div>
<div class="box box7"><p>Effect 7</p></div>
<div class="box box8"><p>Effect 8</p></div>
<div class="box box9"><p>Effect 9</p></div>
<div class="box box10"><p>Effect 10</p></div>
<div class="box box11"><p>Effect 11</p><div class="ribbon"></div></div>
<div class="box box12"><p>Effect 12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div>
<div class="box box13"><p>Effect 13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div>
<div class="box box14"><p>Effect 14</p><div class="ribbon"></div></div>
<div class="box box15"><p>Effect 15</p><div class="ribbon"></div></div>
<div class="box box16"><p>Effect 16</p></div>
<div class="box box17"><p>Effect 17</p></div>
<div class="box box18"><p>Effect 18</p></div>
<div class="box box19"><p>Effect 19</p></div>
<div class="box box20"><p>Effect 20</p></div>
<div class="box box21"><p>Effect 21</p></div>
<div class="box box22"><p>Effect 22</p></div>
<div class="box box23"><p>Effect 23</p></div>

CSS Code

.box {
  width: 300px;
  min-height: 300px;
  margin: 30px;
  display: inline-block;
  background: #fff;
  border: 1px solid #ccc;
  position:relative;
  text-align:center;
}
.box p {
  margin: 30px;
  outline: none;
	font-family: 'Jim Nightshade', cursive;
	font-size:60px;
	font-weight:bold;
	color:rgb(41, 180, 240);
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
/*=========Box1===========*/
.box1{  
  background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
  /*设置Box的阴影效果*/
  box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
  /*制作右下脚折边效果*/
  border-radius: 0 0 6px 0 / 0 0 50px 0;
}
/*使用:before来制作底部阴影，并对阴影进行旋转的扭曲和位移设置*/
.box1:before{
  content: '';
  width: 50px;
  height: 100px;
  position:absolute;
  bottom:0; right:0;
  box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
  z-index:-1;
  -webkit-transform: translate(-35px,-40px)    skew(0deg,30deg) rotate(-25deg);
  -moz-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);
  -o-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
  transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
}
/*使用:after来制作顶部的阴影，并对阴影进行旋转的扭曲和位移设置*/
.box1:after{
  content: '';
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  display: inline-block;
  z-index:-1;
  box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg)    translate(20px,25px) skew(20deg);
  -moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
  -o-transform: rotate(7deg) translate(20px,25px) skew(20deg);    
  transform: rotate(7deg) translate(20px,25px) skew(20deg);      
}
/*==========Box2============*/
.box2{
  padding: 0 0 1px 0;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0 0 60px 0 / 0 0 60px 0;
  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);  
}
.box2:before{
  content:'';    
  width: 25px;
  height: 20px;
  position: absolute;
  bottom:0;
  right:0;
  border-radius: 0 0 30px 0;
  box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
/*这里，我们做出的褶皱阴影*/
.box2:after{
  content: '';
  z-index: -1;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);    
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);       
}
/*==========Box3=========*/
.box3{
  padding: 5px 0 ;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-radius:60px / 5px;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.box3:before{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  display: inline-block;
  z-index:-1;
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);    
  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);      
}
.box3:after{
  content: '';
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  z-index:-1;
  display: inline-block;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);    
  -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);    
  transform: rotate(2deg) translate(20px,25px) skew(20deg);  
}
/*============Box4==============*/
.box4{
  padding: 5px 0 ;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
  background: -webkit-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
  background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
  background: -o-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.box4:before{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  z-index: -1;
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);    
  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.box4:after{
  content: '';
  width: 50px;
  height: 50px;
  top:0; left:0;
  position:absolute;
  z-index:-1;
  display: inline-block;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg);
  -moz-transform: rotate(2deg) translate(12px,25px) skew(20deg);    
  -o-transform: rotate(2deg) translate(12px,25px) skew(20deg);
  transform: rotate(2deg) translate(12px,25px) skew(20deg);
}
/*盒子右下角阴影效果*/
.box4 .shBr{
  width: 100px;
  height: 100px;
  bottom:0; right:0;
  position:absolute;
  z-index: -1;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
  -o-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);    
  transform: rotate(0deg) translate(-20px,-15px) skew(20deg); 
}
/*盒子左下角阴影效果*/
.box4 .shBl{
  width: 100px;
  height: 100px;
  bottom:0; left:0;
  position:absolute;
  z-index: -1;
  box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
  -moz-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
  -o-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
  transform: rotate(0deg) translate(20px,-15px) skew(-20deg);     
}
/*==========Box5==========*/
.box5{
  padding: 0 0 1px 0;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0 0 60px 60px / 0 0 60px 60px;
  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
/*右折效果*/
.box5:before{
  content:'';    
  width: 25px;
  height: 20px;
  background: white;
  position: absolute;
  bottom:0; right:0;
  background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
  background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
  background: -o-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
  border-radius: 0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform: rotate(-20deg) skew(-40deg,-3deg)translate(-13px,-13px);
  -o-transform: rotate(-20deg)skew(-40deg,-3deg) translate(-13px,-13px);    
  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
/*右折的阴影*/
.box5:after{
  content: '';
  z-index: -10;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
 background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);      
}
/*左下角折角*/
.box5 .shBlFlod{
  z-index: -10;
  width: 50px;
  height: 50px;
  position:absolute;
  bottom:0; left:0;
  box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
  -moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
  -o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
  transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
}
/*左下角阴影*/
.box5 .shBl{
  content:'';    
  width: 25px;
  height: 20px;
  background: white;
  position: absolute;
  bottom:0; left:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  border-border-radius:0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
  -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);    
  -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
  transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);    
}
/*=========Box6========*/
.box6{
  padding: 0 0 1px 0;
  background:#fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}
.box6:before{
  content:'';    
  width: 25px;
  height: 20px;
  position: absolute;
  bottom:0;
  right:0;
  border-radius: 0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
  -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
  transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
}
.box6:after{
  content: '';
  z-index: -10;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);    
}
.box6 .cornerLf{
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  z-index:-6;
  display: inline-block;
  box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -moz-transform: rotate(2deg) translate(20px,20px) skew(20deg);
  -o-transform: rotate(2deg) translate(20px,20px) skew(20deg);
  transform: rotate(2deg) translate(20px,20px) skew(20deg);    
}
.box6 .cornerRt{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  display: inline-block;
  z-index:-6;
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
  -o-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
  transform: rotate(2deg) translate(-14px,15px) skew(-20deg);    
}
/*==========Box7=========*/
.box7{
  padding: 0 0 1px 0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
.box7:before{
  content: '';
  position:absolute;
  width: 130px;
  height: 30px;
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
  -moz-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);    
  -o-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);    
  transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);    
}
.box7:after{
  content: '';
  position:absolute;
  right:0;
  bottom:0;
  width: 130px;
  height: 30px;
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
  -moz-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
  -o-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
  transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg)
}
/*==========Box8=========*/
.box8{
  border: 2px solid #ccc;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}
.box8:before{
  content: '';
  width: 110%;
  left: 0; 
  height: 110%;
  z-index:-1;
  position:absolute;
  border: 1px solid #ccc;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
  -webkit-transform: translate(-5%,-5%);
  -moz-transform: translate(-5%, -5%);
  -o-transform: translate(-5%, -5%);
  transform: translate(-5%, -5%);
}
.box8:after{
  content: '';
  width: 100%;
  left: 0; 
  height: 55%;
  z-index:-2;
  background: none;
  position:absolute;
  border-radius: 20px;
  box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}
/*=========Box9=======*/
.box9{
  border: 1px solid rgba(0,0,0,0.1);
  border-radius:20px;
  background: white;
  box-shadow:0px 0px 5px rgba(0,0,0,0.3);
}
 /*底部的透明框效果*/
.box9:before{
  content: '';
  width: 110%;
  left: 0; 
  height: 111%;
  z-index:-1;
  position:absolute;
  border-radius:20px;
  border: 1px solid rgba(0,0,0, 0.1);
  background: rgba(0, 0, 0, 0.0);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -webkit-transform:     translate(-5%,-5%);
  -moz-transform: translate(-5%, -5%);
  -o-transform: translate(-5%, -5%);
  transform: translate(-5%, -5%);
}
/*这是框的顶部部分的粘带效果*/
.box9:after{
  content: '';
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}
/*=========Box10=====*/
.box10{
  padding: 0 0 1px 0;
  background: #fff;
  background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
  border-radius: 0 0 60px 0 / 0 0 5px 0;
}
.box10:before{
  content: '';
  width: 98%;
  z-index:-1;
  height: 100%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  border: 1px solid #ccc;
   box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
  border-radius: 0 0 60px 0 / 0 0 5px 0;
  -webkit-transform: skew(2deg,2deg) translate(3px,8px);
  -moz-transform: skew(2deg,2deg) translate(3px,8px);
  -o-transform: skew(2deg,2deg) translate(3px,8px);
  transform: skew(2deg,2deg) translate(3px,8px);    
}
.box10:after{
  content: '';
  width: 98%;
  z-index:-1;
  height: 98%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
  background: -o-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
  background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
  border: 1px solid #ccc;
  box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
  -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
  -moz-transform: skew(2deg,2deg) translate(-1px,2px)    ;
  -o-transform: skew(2deg,2deg) translate(-1px,2px)    ;
  transform: skew(2deg,2deg) translate(-1px,2px)    ;
}
/*==========Box11========*/
.box11{
  padding: 0 0 1px 0;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-top: 1px solid white;
  border-right: 1px solid #ccc;
  border-radius: 0 0 60px 0;
  box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}
.box11:before{
  content:'';    
  width: 25px;
  height: 20px;
  background: white;
  position: absolute;
  bottom:0; right:0;
  background:#fff;
  background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  border-radius: 0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
.box11:after{
  content: '';
  z-index: -1;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
  -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
  transform: rotate(0deg) translate(-40px,-17px) skew(20deg);    
}
.box11 .ribbon{
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background:#ccc;
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/*========Box 12========*/
.box12{
  padding: 0 0 1px 0;
  background:#f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0  0 60px 60px;
  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
.box12:before{
  content:'';    
  width: 25px;
  height: 20px;
  background: white;
  position: absolute;
  bottom:0; right:0;
  background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  border-radius: 0 0 30px 0;    
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
  -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
.box12:after{
  content: '';
  z-index: -10;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
  -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);    
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
}
.box12 .shBlFlod{
  z-index: -10;
  width: 50px;
  height: 50px;
  position:absolute;
  bottom:0; left:0;
  box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
  -moz-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);
  -o-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);    
  transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
}
.box12 .shBl{
  width: 25px;
  height: 20px;
  z-index:20;
  background: white;
  position: absolute;
  bottom:0; left:0;
  background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
  border-radius: 0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
  -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);    
  -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
  transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
}
.box12 .ribbon{
  content: '';
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background: #ccc;
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/*=======Box 13=====*/
.box13{
  padding: 0 0 1px 0;
  background:#fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}
.box13:before{
  content:'';    
  width: 25px;
  height: 20px;
  position: absolute;
  bottom:0;
  right:0;
  border-radius: 0 0 30px 0;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);      
}
.box13:after{
  content: '';
  z-index: -10;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);    
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
}
.box13 .cornerLf{
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  z-index:-6;
  display: inline-block;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);    
  transform: rotate(2deg) translate(20px,25px) skew(20deg);      
}
.box13 .cornerRt{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  display: inline-block;
  z-index:-6;
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.box13 .ribbon:before{
  content: '';
  position:absolute;
  top:0; left: 0;
  width: 130px;
  height: 40px;
  background:rgba(0,0,0,0.2);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
  -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
  -o-transform: rotate(90deg) skew(0,0) translate(100px,65px);    
  transform: rotate(90deg) skew(0,0) translate(100px,65px);
}
.box13 .ribbon:after{
  content: '';
  position:absolute;
  top:0; right: 0;
  width: 130px;
  height: 40px;
  background:rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}
 /*==========Box14=========*/
.box14{
  padding: 5px 0 ;
  background:#fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -wbkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  border: 1px solid #ccc;
  border-radius: 60px/5px;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.box14:before{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  display: inline-block;
  z-index:-1;
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);    
  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.box14:after{
  content: '';
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  z-index:-1;
  display: inline-block;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);    
  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -moz-transform:  rotate(2deg) translate(20px,25px) skew(20deg);
  -o-transform:  rotate(2deg) translate(20px,25px) skew(20deg);    
  transform:  rotate(2deg) translate(20px,25px) skew(20deg);
}
.box14 .ribbon{
  position:absolute;
  top:0; right: 0;
  width: 130px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
  -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  -moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  -o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}

/*=========BOX15======*/
.box15{
  padding: 0 0 1px 0;
  background:#fff;
  background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
  background: -o-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
  background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
  border-radius: 0 0 60px 0 / 0 0 5px 0;    
}

.box15:before{
  content: '';
  width: 98%;
  z-index:-1;
  height: 100%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  border: 1px solid #ccc;
  box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
  border-radius: 0 0 60px 0 / 0 0 5px 0;
  -webkit-transform: skew(2deg,2deg) translate(3px,8px);
  -moz-transform: skew(2deg,2deg) translate(3px,8px);
  -o-transform: skew(2deg,2deg) translate(3px,8px);    
  transform: skew(2deg,2deg) translate(3px,8px);
}
.box15:after{
  content: '';
  width: 98%;
  z-index:-1;
  height: 98%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
  background: -o-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
  background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
  border: 1px solid #ccc;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
  -moz-transform: skew(2deg,2deg) translate(-1px,2px);
  -o-transform: skew(2deg,2deg) translate(-1px,2px);    
  transform: skew(2deg,2deg) translate(-1px,2px);
}

.box15 .ribbon{
  position:absolute;
  top:0; left: 0;
  width: 130px;
  height: 40px;
  background:rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
  -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
  -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
  -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
  transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}
/*============box16==========*/
.box16{
	box-shadow: 0 10px 6px -6px #777;
}

/*========box17================*/
.box17:before, 
.box17:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box17:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==========box18=======================*/
.box18:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*========box19===================*/
.box19:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}  

/*=============box20=====================*/
.box20:before, 
.box20:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777; 
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box20:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*=============box21===============*/
.box21{
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box21:before, 
.box21:after{
  content:"";
  position:absolute; 
  z-index:-1;
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
} 
.box21:after{
  right:10px; 
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg); 
  -moz-transform:skew(8deg) rotate(3deg);     
  -ms-transform:skew(8deg) rotate(3deg);     
  -o-transform:skew(8deg) rotate(3deg); 
  transform:skew(8deg) rotate(3deg);
}

/*=============box22===================*/
.box22{
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box22:before, 
.box22:after{
  content:"";
  position:absolute; 
  z-index:-1;
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:0;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
} 
.box22:after{
  right:10px; 
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg); 
  -moz-transform:skew(8deg) rotate(3deg);     
  -ms-transform:skew(8deg) rotate(3deg);     
  -o-transform:skew(8deg) rotate(3deg); 
  transform:skew(8deg) rotate(3deg);
}

/*===============box23=================*/
.box23{
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box23:before, 
.box23:after{
  content:"";
  position:absolute; 
  z-index:-1;
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:10px;
  bottom:10px;
  left:0;
  right:0;
  border-radius:100px / 10px;
} 
.box23:after{
  right:10px; 
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg); 
  -moz-transform:skew(8deg) rotate(3deg);     
  -ms-transform:skew(8deg) rotate(3deg);     
   -o-transform:skew(8deg) rotate(3deg); 
  transform:skew(8deg) rotate(3deg);
}  

demodownload

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

这个例子的效果其实很早就分享了，可能有很多同学不知道这个网址，当初是想做一个纯CSS3案例分享的网站，但由于时间和精力有限，最终胎死腹中，还好，在w3cplus主站上开了这样一个专栏，那些效果又可以面世了，今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果，共享按钮的提示效果，这个效果结构和样式都略有一定的难度，在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。

demodownload

HTML CODE

<section>
  <article>
    <h1>SHA</h1>
  </article>
  <article>
    <a href="#" data-title="FackeBook">Facebook</a>
		<a href="#" data-title="Twitter">Twitter</a>
  </article>
</section>
<section>
  <article>
    <h1>ARE</h1>
  </article>
	<article>
    <a href="#" data-title="Stumble">Stumble</a>
    <a href="#" data-title="Dribbble">Dribbble</a>
  </article>
</section>

CSS CODE

body{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	background:#003961;
}
.demo {
	width: 400px;
	height: 80px;
	margin: 50px auto;
}
.demo section {
	width: 50%;
	height: 80px;
	float: left;
}
.demo section:first-child::before{
	content:"";
	background:rgba(0,0,0,0.4);
	position: absolute;
	height: 50px;
	width: 170px;
	margin-left: 120px;
	box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.demo section h1 {
	margin-top: 12px;
	overflow: hidden;
	width: 33px;
	color: #fff
}
.demo article {
	position: absolute;
	height: 50px;
	width: 100px;
	background: #00aeef;
	/*transition*/
	-webkit-transition:all 300ms;
	-moz-transition:all 300ms;
	-o-transition:all 300ms;
  -ms-transition:all 300ms;
	transition:all 300ms;
	text-align:center;
}
.demo article a {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url(vIIhi.png) no-repeat;
	margin:6px 0 0;
	padding: 0;
	overflow: hidden;
	text-indent: -999em;
	text-descoration: none;
}
.demo section:first-child article a:nth-child(2){
	background-position: -40px 0;
}
.demo section:last-child article a:nth-child(1){
	background-position: -80px 0;
}
.demo section:last-child article a:nth-child(2){
	background-position: -120px 0;
}
.demo section:first-child article:first-child {
	border-radius: 8px 0 0 8px;
 }
.demo section:first-child article:first-child h1 {
	float: right;
	font-weight: 400;
	font-size: 20px;
}
.demo section:last-child article:first-child {
	border-radius: 0 8px 8px 0;
}
.demo section:last-child article:first-child h1 {
	text-indent: -6px;
	margin-top: 12px;
	font-size: 20px;
	font-weight: 300;
}
.demo section:first-child article:last-child {
	background: #0f0;
	margin-left: 150px;
	/*transform*/
	-webkit-transform:rotateY(90deg);
	-moz-transform:rotateY(90deg);
	-ms-transform:rotateY(90deg);
	-o-transform:rotateY(90deg);
  transform:rotateY(90deg);
	background:-webkit-gradient(linear, left top, right top, color-stop(0%,#0082c1), color-stop(100%,#003961));
	background:-webkit-gradient(linear,left top,right top,color-stop(#0082c1,0),color-stop(#003961,1));
	background:-webkit-linear-gradient(left, #0082c1 0%,#003961 100%);
	background:   -moz-linear-gradient(left, #0082c1 0%,#003961 100%);
	background:     -o-linear-gradient(left, #0082c1 0%,#003961 100%);
	background:        linear-gradient(left, #0082c1 0%,#003961 100%);
}
.demo section:last-child article:last-child {
	background:#0ff;
	-webkit-transform:rotateY(-90deg);
  -moz-transform:rotateY(-90deg);
	-ms-transform:rotateY(-90deg);
	-o-transform:rotateY(-90deg);
	transform:rotateY(-90deg);
	margin-left:-50px;
	background:-webkit-gradient(linear, left top, right top, color-stop(0%,#003961), color-stop(100%,#0082c1));
	background:-webkit-gradient(linear,left top,right top,color-stop(#003961,0),color-stop(#0082c1,1));
	background:-webkit-linear-gradient(left, #003961 0%,#0082c1 100%);
	background:   -moz-linear-gradient(left, #003961 0%,#0082c1 100%);
	background:     -o-linear-gradient(left, #003961 0%,#0082c1 100%);
	background:        linear-gradient(left, #003961 0%,#0082c1 100%);
}
.demo section:first-child article:first-child {
	margin-left: 100px;
}
.demo:hover section:first-child article:first-child {
	-webkit-transform:rotateY(90deg);
	-moz-transform:rotateY(90deg);
  -ms-transform:rotateY(90deg);
  -o-transform:rotateY(90deg);
  transform:rotateY(90deg);
	margin-left:60px;
}
.demo:hover section:last-child article:first-child {
	/*transform*/
	-webkit-transform:rotateY(-90deg);
  -moz-transform:rotateY(-90deg);
	-ms-transform:rotateY(-90deg);
	-o-transform:rotateY(-90deg);
	transform:rotateY(-90deg);
	margin-left:40px;
}
.demo:hover section:first-child article:last-child {
	-webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	transform:rotateY(0deg);
	margin-left:110px;
	background:#0082C1;
	border-radius: 8px 0 0 8px;
}
.demo:hover section:last-child article:last-child {
	-webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	transform:rotateY(0deg);
	margin-left:0;
	background:#0082C1;
	border-radius: 0 8px 8px 0;
}
.demo a:hover:before {
  content:attr(data-title);
  background-color: #000;
  text-align: center;
  text-indent: 0;
  width: 90px;
  padding: 5px;
  broder: 1px solid #111;
  border-color: #111 #333 #333 #111;
  border-radius: 3px;
  color: #666;
  font-size: 1em;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: -43px -40px;
  z-index: 9999;	
  -moz-animation:mymove .25s linear;  
  -webkit-animation:mymove .25s linear; 
  -o-animation:mymove .25s linear; 
  -ms-animation:mymove .25s linear; 
  animation:mymove .25s linear; 
}
.demo a:hover:after {
  border: 7px solid #111;
  border-color: #000 transparent transparent;
  border-width: 20px 7px 7px 2px;
  position: absolute;
  content:"";
  display: block;
  width: 0;
  height: 0;
  left:50%;
  top: -5px;
  z-index: 9999;
  -moz-animation:mymove .25s linear;  
  -webkit-animation:mymove .25s linear; 
  -o-animation:mymove .25s linear; 
  -ms-animation:mymove .25s linear; 
  animation:mymove .25s linear; 
}
.demo section:first-child article:last-child a:nth-child(1):hover:before {
  margin-left: -65px;
}
.demo section:first-child article:last-child a:nth-child(1):hover:after {
  left: 25px;
}
.demo section:first-child article:last-child a:nth-child(2):hover:before {
  margin-left: -25px;
}
.demo section:first-child article:last-child a:nth-child(2):hover:after {
  left: 65px;
}
.demo section:last-child article:last-child a:nth-child(1):hover:before {
  margin-left: -65px;
}
.demo section:last-child article:last-child a:nth-child(1):hover:after {
  left: 30px;
}
.demo section:last-child article:last-child a:nth-child(2):hover:before {
  margin-left: -25px;
}
.demo section:last-child article:last-child a:nth-child(2):hover:after {
  left: 70px;
}
@-moz-keyframes mymove {
  0%{ -moz-transform:scale(0,0); opacity:0;}
  50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
  75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
  100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
  0%{ -webkit-transform:scale(0,0); opacity:0;}
  50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
  75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
  100%{ -webkit-transform:scale(1,1); opacity:1;}
}
@-o-keyframes mymove {
  0%{ -o-transform:scale(0,0); opacity:0;}
  50%{ -o-transform:scale(1.2,1.2); opacity:0.3;}
  75%{ -o-transform:scale(0.9,0.9); opacity:0.7;}
  100%{ -o-transform:scale(1,1); opacity:1;}
}
@-ms-keyframes mymove {
  0%{ -ms-transform:scale(0,0); opacity:0;}
  50%{ -ms-transform:scale(1.2,1.2); opacity:0.3;}
  75%{ -ms-transform:scale(0.9,0.9); opacity:0.7;}
  100%{ -ms-transform:scale(1,1); opacity:1;}
}
@keyframes mymove {
  0%{ transform:scale(0,0); opacity:0;}
  50%{ transform:scale(1.2,1.2); opacity:0.3;}
  75%{ transform:scale(0.9,0.9); opacity:0.7;}
  100%{ transform:scale(1,1); opacity:1;}
}

demodownload

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

站上放了好几个ICON UI，这些ICON UI其实没有特别之处，从效果上看，但他们具有一个共同点，都是使用@font-face来实现这些ICON的效果，而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子，藤藤给大家整理了一份163个Entypo ICON效果，希望大家喜欢，并能在项目中使用上。

demodownload

HTML CODE

<a href="#" class="icon icon-phone">
  <span>
   <em>icon-phone</em>
  </span>
</a>

这里仅显示了一个Icon的结构，其他的ICON结构使用相同，特别注意，此处结构添加了一个tip效果，方便大家查询对应的ICON类名，实际使用时，可以将tip中的代码去除。

CSS Code

body {
 background-color: #f7f7f7;
}	
.demo {
 width: 900px;
 text-align: left;
 margin: 40px auto 0;
}
.control_buttons li {
 display: inline-block;
 margin-right: 6px;
}
.icon {
 position: relative;
 display: inline-block;
 color: #6b864b;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-bottom: 20px;
 border-radius: 3px;
 background-color: #fff;
}
.icon:hover {
 color: #7d9a5b;
 box-shadow: 0 0 2px 1px #7d9a5b;
 text-decoration:none;
}
.icon:hover span {
 max-height: 50px;
}
.icon span {
 position: absolute;
 left: -42px;
 top: 50px;
 padding: 0 10px;
 display: block;
 overflow: hidden;
 max-height: 0;
 text-align: center;
 -webkit-transition: max-height .3s linear;
 -moz-transition: max-height .3s linear;
 -o-transition: max-height .3s linear;
 transition: max-height .3s linear;
 z-index: 2;
}
.icon span em {
 position: relative;
 display: inline-block;
 width: 110px;
 height: 30px;
 line-height: 30px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 border-radius: 2px 2px 0 0;
 box-shadow: 0 0 2px #7d9a5b;
 background-color:#7d9a5b;
 z-index: 3;
}
.icon span em:after {
 position: absolute;
 left: 50%;
 top: -10px;
 content: '';
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #7d9a5b;
 margin-left: -6px;
}
.icon:before {
 font-family: 'entypo';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 22px;
}
.icon-phone:before {
 content: "\21";
}
.icon-share:before {
 content: "\22";
}
.icon-leaf:before {
 content: "\23";
}
.icon-minus:before {
 content: "\24";
}
.icon-landscape:before {
 content: "\25";
}
.icon-full-screen:before {
 content: "\26";
}
.icon-arrow:before {
 content: "\27";
}
.icon-browser:before {
 content: "\28";
}
.icon-cd:before {
 content: "\29";
}
.icon-suitcase:before {
 content: "\2a";
}
.icon-publish:before {
 content: "\2b";
}
.icon-arrow-2:before {
 content: "\2c";
}
.icon-collapse:before {
 content: "\2d";
}
.icon-images:before {
 content: "\2e";
}
.icon-plus:before {
 content: "\2f";
}
.icon-music:before {
 content: "\30";
}
.icon-heart:before {
 content: "\31";
}
.icon-mobile:before {
 content: "\32";
}
.icon-mouse:before {
 content: "\33";
}
.icon-address:before {
 content: "\34";
}
.icon-email:before {
 content: "\35";
}
.icon-star:before {
 content: "\36";
}
.icon-star-2:before {
 content: "\37";
}
.icon-heart-2:before {
 content: "\38";
}
.icon-shopping:before {
 content: "\39";
}
.icon-flight:before {
 content: "\3a";
}
.icon-support:before {
 content: "\3b";
}
.icon-info-circle:before {
 content: "\3c";
}
.icon-info:before {
 content: "\3d";
}
.icon-blocked:before {
 content: "\3e";
}
.icon-movie:before {
 content: "\3f";
}
.icon-song:before {
 content: "\40";
}
.icon-folder:before {
 content: "\41";
}
.icon-mute:before {
 content: "\42";
}
.icon-sound:before {
 content: "\43";
}
.icon-volume:before {
 content: "\44";
}
.icon-arrow-3:before {
 content: "\45";
}
.icon-arrow-4:before {
 content: "\46";
}
.icon-arrow-5:before {
 content: "\47";
}
.icon-broadcast:before {
 content: "\48";
}
.icon-arrow-6:before {
 content: "\49";
}
.icon-screen:before {
 content: "\4a";
}
.icon-suitcase-2:before {
 content: "\4b";
}
.icon-globe:before {
 content: "\4c";
}
.icon-square:before {
 content: "\4d";
}
.icon-triangle:before {
 content: "\4e";
}
.icon-triangle-2:before {
 content: "\4f";
}
.icon-triangle-3:before {
 content: "\50";
}
.icon-inbox:before {
 content: "\51";
}
.icon-network:before {
 content: "\52";
}
.icon-triangle-4:before {
 content: "\53";
}
.icon-arrow-7:before {
 content: "\54";
}
.icon-arrow-8:before {
 content: "\55";
}
.icon-arrow-9:before {
 content: "\56";
}
.icon-arrow-10:before {
 content: "\57";
}
.icon-archive:before {
 content: "\58";
}
.icon-trashcan:before {
 content: "\59";
}
.icon-upload:before {
 content: "\5a";
}
.icon-download:before {
 content: "\5b";
}
.icon-reload-CW:before {
 content: "\5c";
}
.icon-warning:before {
 content: "\5d";
}
.icon-help:before {
 content: "\5e";
}
.icon-help-2:before {
 content: "\5f";
}
.icon-google-circles:before {
 content: "\60";
}
.icon-eye:before {
 content: "\61";
}
.icon-clock:before {
 content: "\62";
}
.icon-microphone:before {
 content: "\63";
}
.icon-quote:before {
 content: "\64";
}
.icon-chat:before {
 content: "\65";
}
.icon-comment:before {
 content: "\66";
}
.icon-thumbs-up:before {
 content: "\67";
}
.icon-write:before {
 content: "\68";
}
.icon-attachment:before {
 content: "\69";
}
.icon-reply:before {
 content: "\6a";
}
.icon-reply-to-all:before {
 content: "\6b";
}
.icon-forward:before {
 content: "\6c";
}
.icon-user:before {
 content: "\6d";
}
.icon-users:before {
 content: "\6e";
}
.icon-contact:before {
 content: "\6f";
}
.icon-card:before {
 content: "\70";
}
.icon-export:before {
 content: "\71";
}
.icon-location:before {
 content: "\72";
}
.icon-compass:before {
 content: "\73";
}
.icon-direction:before {
 content: "\74";
}
.icon-center:before {
 content: "\75";
}
.icon-map:before {
 content: "\76";
}
.icon-printer:before {
 content: "\77";
}
.icon-calendar:before {
 content: "\78";
}
.icon-reload-CCW:before {
 content: "\79";
}
.icon-install:before {
 content: "\7a";
}
.icon-arrow-11:before {
 content: "\7b";
}
.icon-code:before {
 content: "\7c";
}
.icon-feather:before {
 content: "\7d";
}
.icon-keyboard:before {
 content: "\7e";
}
.icon-battery:before {
 content: "\e000";
}
.icon-arrow-12:before {
 content: "\e001";
}
.icon-cloud:before {
 content: "\e002";
}
.icon-shuffle:before {
 content: "\e003";
}
.icon-flash:before {
 content: "\e004";
}
.icon-alert:before {
 content: "\e005";
}
.icon-link:before {
 content: "\e006";
}
.icon-time:before {
 content: "\e007";
}
.icon-back:before {
 content: "\e008";
}
.icon-upload-2:before {
 content: "\e009";
}
.icon-arrow-13:before {
 content: "\e00a";
}
.icon-battery-2:before {
 content: "\e00b";
}
.icon-home:before {
 content: "\e00c";
}
.icon-bookmark:before {
 content: "\e00d";
}
.icon-battery-3:before {
 content: "\e00e";
}
.icon-arrow-14:before {
 content: "\e00f";
}
.icon-play:before {
 content: "\e010";
}
.icon-arrow-15:before {
 content: "\e011";
}
.icon-rss:before {
 content: "\e012";
}
.icon-flag:before {
 content: "\e013";
}
.icon-settings:before {
 content: "\e014";
}
.icon-locked:before {
 content: "\e015";
}
.icon-retweet:before {
 content: "\e016";
}
.icon-pause:before {
 content: "\e017";
}
.icon-arrow-16:before {
 content: "\e018";
}
.icon-battery-4:before {
 content: "\e019";
}
.icon-book:before {
 content: "\e01a";
}
.icon-popup:before {
 content: "\e01b";
}
.icon-battery-5:before {
 content: "\e01c";
}
.icon-arrow-17:before {
 content: "\e01d";
}
.icon-record:before {
 content: "\e01e";
}
.icon-list:before {
 content: "\e01f";
}
.icon-unlocked:before {
 content: "\e020";
}
.icon-search:before {
 content: "\e021";
}
.icon-trophy:before {
 content: "\e022";
}
.icon-checkmark:before {
 content: "\e023";
}
.icon-stop:before {
 content: "\e024";
}
.icon-add:before {
 content: "\e025";
}
.icon-arrow-18:before {
 content: "\e026";
}
.icon-history:before {
 content: "\e027";
}
.icon-search-2:before {
 content: "\e028";
}
.icon-dots-three:before {
 content: "\e029";
}
.icon-back-2:before {
 content: "\e02a";
}
.icon-arrow-19:before {
 content: "\e02b";
}
.icon-fast-forward:before {
 content: "\e02c";
}
.icon-grid:before {
 content: "\e02d";
}
.icon-cancel:before {
 content: "\e02e";
}
.icon-price:before {
 content: "\e02f";
}
.icon-camera:before {
 content: "\e030";
}
.icon-sleep:before {
 content: "\e031";
}
.icon-close:before {
 content: "\e032";
}
.icon-palette:before {
 content: "\e033";
}
.icon-plus-2:before {
 content: "\e034";
}
.icon-minus-2:before {
 content: "\e035";
}
.icon-document:before {
 content: "\e036";
}
.icon-document-2:before {
 content: "\e037";
}
.icon-documents:before {
 content: "\e038";
}
.icon-last:before {
 content: "\e039";
}
.icon-first:before {
 content: "\e03a";
}
.icon-fast-backward:before {
 content: "\e03b";
}
.icon-arrow-20:before {
 content: "\e03c";
}
.icon-arrow-21:before {
 content: "\e03d";
}
.icon-arrow-22:before {
 content: "\e03e";
}
.icon-sun:before {
 content: "\e03f";
}
.icon-sun-2:before {
 content: "\e040";
}
.icon-dots-two:before {
 content: "\e041";
}
.icon-dot:before {
 content: "\e042";
}
.icon-creative-commons:before {
 content: "\e043";
}
.icon-light-bulb:before {
 content: "\e044";
}
@font-face {
  font-family: 'entypo';
  src:url('fonts/entypo.eot');
  src:url('fonts/entypo.eot?#iefix') format('embedded-opentype'),
 	url('fonts/entypo.svg#entypo') format('svg'),
	url('fonts/entypo.woff') format('woff'),
	url('fonts/entypo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。

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

这一期jQuery插件只要向大家推荐有时间定时器、图片居中、时间轴、顶部工具条，滚动条同步等，这些插件都可以直接使用到项目中，而且配如相对应的教程和API，如果你感兴趣，可以了解一下。另外到这一期为止，w3cplus为大家推荐其十期的有关于jQuery插件，如果你是第一次看到插件的连载，那么你可以相应的了解一下前几期为大家推荐的插件，希望这些插件能帮助大家解决工具之需。

1、jQuery计时器

jQuery写的一款计时器。

2、imgCentering.js

图片居中。

3、UIJI.js

uiji是反相jQuery。而不是使用CSS选择器找到元素,您使用相同的语法来创建元素。

4、Sly – jQuery Directional Scrolling Plugin

Sly是一款制作水平滚动的slider插件，他可以一次播放单个或多个图片、段落等元素。

5、Fancy Timeline

一款简单的timeline插件。

6、JRESIZE

jResize是一个响应的web开发工具,帮助开发者的制作响应式设计的项目

7、jStat

jStat是一款统计插件，用来制作图表。

8、jPanelMenu

jPanelMenu是一款制作类似iPhone原生菜单的jQuery插件。

9、jQuery Gravity

让你的页面动起来的一款插件。

10、jBar

一款轻量级制作顶部工具条的插件。

如果您对这些插件有意思，或者说你还想了解更多的插件效果，你可以点击w3cplus前段时间为大家推荐的70款jQuery插件：

1. 2012年优秀jQuery插件连载（一）
2. 2012年优秀jQuery插件连载（二）
3. 2012年优秀jQuery插件连载（三）
4. 2012年优秀jQuery插件连载（四）
5. 2012年优秀jQuery插件连载（五）
6. 2012年优秀jQuery插件连载（六）
7. 2012年优秀jQuery插件连载（七）
8. 2012年优秀jQuery插件连载（八）
9. 2012年优秀jQuery插件连载（九）

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

iPhone Checkbox Effect是一个很经典的CSS3的案例了，这样的效果到处可见，如果你还不清楚怎么制作的话，可以点击这里，阅读详细的制作方法。而且w3cplus有关于checkbox的制作方法教程也蛮多的，前不久，藤藤每每日一练中就有一个优秀的案例，今天我只是把以前教程中运用的demo整理放上来，希望对新学习的同学有所帮助。

demodownload

HTML CODE

<div id="checked">
  <div class="labelBox">
    <input type="checkbox" value="wi-fi" id="wifi" name="wifi" checked="checked" />
    <label for="wifi" class="check"></label>
    <label for="wifi" class="info">Wi-Fi</label>
  </div>
  <div class="labelBox">
    <input type="checkbox" value="warpDrive" name="warpDrive" id="warpDrive" />
    <label for="warpDrive" class="check"></label>
    <label for="warpDrive" class="info">Warp Drive</label>
  </div>
</div>

CSS CODE

#checked {
 font-family: "Lucida Grande", Verdana, Arial, sans-serif, Helvetica;
 width: 300px;
 position: relative;
 margin: 20px auto;
}
.labelBox {
 margin-bottom: 20px;
 background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
 background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
 background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
 background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
 background: linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
 border-radius: 4px;
 border: 1px solid #555555;
 width: 80px;
 position: relative;
 height: 32px;
}

.labelBox::before,
.labelBox::after {
 content:"ON";
 padding-left: 9px;
 line-height: 32px;
 color: #fff;
 font-size: 14px;
 text-shadow: #093b5c 0 -1px 1px;
}
.labelBox::after {
 content:"OFF";
 padding-left: 12px;
}
.check { 
 display: block;
 width: 40px;
 height: 30px;
 border-radius: 3px;
 background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
 background: -webkit-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
 background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
 background: -ms-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
 background: -o-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
 background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
 border: 1px solid #e5e5e5;
 position: absolute;
 top: 0px;
 left: 0px;
}
input[type=checkbox] {
 border: 0 none !important;
 clip: rect(1px,1px,1px,1px);
 height: 1px !important;
 overflow: hidden !important;
 position: absolute !important;
 width: 1px !important;
}

@-webkit-keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }

 100% { 
  top: 0px;
  left: 38px;
 }
}

@-moz-keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }	
 100% { 
  top: 0px;
  left: 38px;
 }
}
@-o-keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }

 100% { 
  top: 0px;
  left: 38px;
 }
}

@-ms-keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }	
 100% { 
  top: 0px;
  left: 38px;
 }
}

@keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }	
 100% { 
  top: 0px;
  left: 38px;
 }
}
@-webkit-keyframes labelOFF {
 0% {
  top: 0px;
  left: 38px;
 }

 100% { 
  top: 0px;
  left: 0px;
 }
}
@-moz-keyframes labelOFF {
 0% {
  top: 0px;
  left: 38px;
 }
	
 100% { 
  top: 0px;
  left: 0px;
 }
}
@-o-keyframes labelOFF {
 0% {
  top: 0px;
  left: 38px;
 }

 100% { 
  top: 0px;
  left: 0px;
 }
}
@-ms-keyframes labelOFF {
 0% {
  top: 0px;
  left: 38px;
 }

 100% { 
  top: 0px;
  left: 0px;
 }
}
@keyframes labelOFF {
 0% {
  top: 0px;
  left: 38px;
 }
	
 100% { 
  top: 0px;
  left: 0px;
 }
}
input[type=checkbox]:checked + label.check {
 top: 0px;
 left: 38px;	
 -webkit-animation: labelON 0.2s ease-in 0s 1;
 -moz-animation: labelON 0.2s ease-in 0s 1;
 -o-animation: labelON 0.2s ease-in 0s 1;
 -ms-animation: labelON 0.2s ease-in 0s 1;
 animation: labelON 0.2s ease-in 0s 1;
 box-shadow: #244766 -1px 0px 3px;
}

input[type=checkbox] + label.check {
 top: 0px;
 left: 0px;
 -webkit-animation: labelOFF 0.2s ease-in 0s 1;
 -moz-animation: labelOFF 0.2s ease-in 0s 1;
 -o-animation: labelOFF 0.2s ease-in 0s 1;
 -ms-animation: labelOFF 0.2s ease-in 0s 1;
 animation: labelOFF 0.2s ease-in 0s 1;
 box-shadow: #244766 1px 0px 3px;		
}
label.info {
 position: absolute;
 color: #000;
 top:0px;
 left: 100px;
 line-height: 32px;
 width: 200px;
}

demodownload

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

关于@font-face制作ICON的技巧不在是技巧了，最主要的关键是如何得到这些icon的svg等字体文件，今天藤藤为大家整理了另外一个字体库“iconic”，这个字体库包含了172个常用的ICONl图标，希望大家喜欢。至于怎么制作，就不用我说了，因为站上这方面的案例和实现方法已经介绍很多篇了，如果你是第一次接触，你可以在搜索框中搜索“icon”，这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止，藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例，有兴趣的围观吧。

demodownload

HTML CODE

<a href="#" class="icon icon-phone">
  <span>
   <em>icon-phone</em>
  </span>
</a>

这里仅显示了一个Icon的结构，其他的ICON结构使用相同，特别注意，此处结构添加了一个tip效果，方便大家查询对应的ICON类名，实际使用时，可以将tip中的代码去除。

CSS Code

body {
 background-color: #c5c5c5;
}	
.demo {
 width: 900px;
 text-align: left;
 margin: 40px auto 0;
}
.control_buttons li {
 display: inline-block;
 margin-right: 6px;
}
.icon {
 position: relative;
 display: inline-block;
 color: #787878;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-bottom: 20px;
 border-radius: 3px;
 background-color: #e5e5e5;
}
.icon:hover {
 color: #3d3d3d;
 box-shadow:0 1px 0 #fff inset, 0 0 2px 1px #afafaf;
 text-decoration:none;
 background-image: -webkit-linear-gradient(top,#f2f2f2,#e5e5e5);
 background-image: -moz-linear-gradient(top,#f2f2f2,#e5e5e5);
 background-image: -o-linear-gradient(top,#f2f2f2,#e5e5e5);
 background-image: linear-gradient(top,#f2f2f2,#e5e5e5);
}
.icon:hover span {
 max-height: 40px;
}
.icon span {
 position: absolute;
 left: -32px;
 top: 50px;
 display: block;
 overflow: hidden;
 max-height: 0;
 text-align: center;
 -webkit-transition: max-height .3s linear;
 -moz-transition: max-height .3s linear;
 -o-transition: max-height .3s linear;
 transition: max-height .3s linear;
 z-index: 2;
}
.icon span em {
 position: relative;
 display: block;
 width: 130px;
 line-height: 26px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 border: 2px solid rgba(255,255,255,.9);
 background-color:#222;
 z-index: 3;
}
.icon span em:before,
.icon span em:after {
 position: absolute;
 left: 50%;
 content: '';
 width: 1px;
 height: 1px;
}
.icon span em:before {
 top: -15px;
 border: 7px solid transparent;
 border-bottom-color: rgba(255,255,255,.9);
 margin-left: -16px;
}
.icon span em:after {
 top: -11px;
 border: 5px solid transparent;
 border-bottom-color: #222;
 margin-left: -14px;
}
.icon:before {
 font-family: 'iconic';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 font-smoothing: antialiased;
 font-size: 24px;
}
.icon-chat:before {
 content: "\21";
}
.icon-calendar:before {
 content: "\22";
}
.icon-move-alt1:before {
 content: "\23";
}
.icon-loop:before {
 content: "\24";
}
.icon-arrow-up-alt2:before {
 content: "\25";
}
.icon-fullscreen-alt:before {
 content: "\26";
}
.icon-article:before {
 content: "\27";
}
.icon-umbrella:before {
 content: "\28";
}
.icon-chart:before {
 content: "\29";
}
.icon-chart-alt:before {
 content: "\2a";
}
.icon-read-more:before {
 content: "\2b";
}
.icon-iphone:before {
 content: "\2c";
}
.icon-star:before {
 content: "\2d";
}
.icon-map-pin-stroke:before {
 content: "\2e";
}
.icon-bars:before {
 content: "\2f";
}
.icon-list:before {
 content: "\30";
}
.icon-battery-empty:before {
 content: "\31";
}
.icon-battery-half:before {
 content: "\32";
}
.icon-battery-full:before {
 content: "\33";
}
.icon-list-nested:before {
 content: "\34";
}
.icon-bars-alt:before {
 content: "\35";
}
.icon-eye:before {
 content: "\36";
}
.icon-book:before {
 content: "\37";
}
.icon-map-pin-alt:before {
 content: "\38";
}
.icon-map-pin-fill:before {
 content: "\39";
}
.icon-user:before {
 content: "\3a";
}
.icon-battery-charging:before {
 content: "\3b";
}
.icon-book-alt:before {
 content: "\3c";
}
.icon-target:before {
 content: "\3d";
}
.icon-steering-wheel:before {
 content: "\3e";
}
.icon-cd:before {
 content: "\3f";
}
.icon-arrow-down-alt2:before {
 content: "\40";
}
.icon-arrow-down-alt1:before {
 content: "\41";
}
.icon-arrow-down:before {
 content: "\42";
}
.icon-loop-alt1:before {
 content: "\43";
}
.icon-loop-alt2:before {
 content: "\44";
}
.icon-loop-alt3:before {
 content: "\45";
}
.icon-loop-alt4:before {
 content: "\46";
}
.icon-magnifying-glass:before {
 content: "\47";
}
.icon-award-fill:before {
 content: "\48";
}
.icon-move-alt2:before {
 content: "\49";
}
.icon-equalizer:before {
 content: "\4a";
}
.icon-calendar-alt-stroke:before {
 content: "\4b";
}
.icon-calendar-alt-fill:before {
 content: "\4c";
}
.icon-share:before {
 content: "\4d";
}
.icon-mail:before {
 content: "\4e";
}
.icon-heart-stroke:before {
 content: "\4f";
}
.icon-award-stroke:before {
 content: "\50";
}
.icon-comment-stroke:before {
 content: "\51";
}
.icon-comment-alt1-fill:before {
 content: "\52";
}
.icon-comment-alt1-stroke:before {
 content: "\53";
}
.icon-chat-alt-stroke:before {
 content: "\54";
}
.icon-chat-alt-fill:before {
 content: "\55";
}
.icon-comment-fill:before {
 content: "\56";
}
.icon-comment-alt2-fill:before {
 content: "\57";
}
.icon-comment-alt2-stroke:before {
 content: "\58";
}
.icon-checkmark:before {
 content: "\59";
}
.icon-check-alt:before {
 content: "\5a";
}
.icon-x:before {
 content: "\5b";
}
.icon-document-fill:before {
 content: "\5c";
}
.icon-document-stroke:before {
 content: "\5d";
}
.icon-document-alt-fill:before {
 content: "\5e";
}
.icon-document-alt-stroke:before {
 content: "\5f";
}
.icon-heart-fill:before {
 content: "\60";
}
.icon-movie:before {
 content: "\61";
}
.icon-trash-stroke:before {
 content: "\62";
}
.icon-trash-fill:before {
 content: "\63";
}
.icon-beaker-alt:before {
 content: "\64";
}
.icon-beaker:before {
 content: "\65";
}
.icon-transfer:before {
 content: "\66";
}
.icon-move-vertical:before {
 content: "\67";
}
.icon-move-vertical-alt1:before {
 content: "\68";
}
.icon-move-vertical-alt2:before {
 content: "\69";
}
.icon-move-horizontal:before {
 content: "\6a";
}
.icon-move-horizontal-alt1:before {
 content: "\6b";
}
.icon-move-horizontal-alt2:before {
 content: "\6c";
}
.icon-key-fill:before {
 content: "\6d";
}
.icon-key-stroke:before {
 content: "\6e";
}
.icon-microphone:before {
 content: "\6f";
}
.icon-compass:before {
 content: "\70";
}
.icon-book-alt2:before {
 content: "\71";
}
.icon-download:before {
 content: "\72";
}
.icon-home:before {
 content: "\73";
}
.icon-upload:before {
 content: "\74";
}
.icon-clock:before {
 content: "\75";
}
.icon-pen:before {
 content: "\76";
}
.icon-box:before {
 content: "\77";
}
.icon-headphones:before {
 content: "\78";
}
.icon-volume:before {
 content: "\79";
}
.icon-folder-stroke:before {
 content: "\7a";
}
.icon-pen-alt-stroke:before {
 content: "\7b";
}
.icon-cloud-download:before {
 content: "\7c";
}
.icon-lock-stroke:before {
 content: "\7d";
}
.icon-cloud-upload:before {
 content: "\7e";
}
.icon-lock-fill:before {
 content: "\e000";
}
.icon-pen-alt-fill:before {
 content: "\e001";
}
.icon-folder-fill:before {
 content: "\e002";
}
.icon-volume-mute:before {
 content: "\e003";
}
.icon-play:before {
 content: "\e004";
}
.icon-pause:before {
 content: "\e005";
}
.icon-ampersand:before {
 content: "\e006";
}
.icon-at:before {
 content: "\e007";
}
.icon-pen-alt2:before {
 content: "\e008";
}
.icon-brush:before {
 content: "\e009";
}
.icon-unlock-fill:before {
 content: "\e00a";
}
.icon-unlock-stroke:before {
 content: "\e00b";
}
.icon-fork:before {
 content: "\e00c";
}
.icon-paperclip:before {
 content: "\e00d";
}
.icon-tag-stroke:before {
 content: "\e00e";
}
.icon-tag-fill:before {
 content: "\e00f";
}
.icon-sun-stroke:before {
 content: "\e010";
}
.icon-sun-fill:before {
 content: "\e011";
}
.icon-moon-stroke:before {
 content: "\e012";
}
.icon-moon-fill:before {
 content: "\e013";
}
.icon-cloud:before {
 content: "\e014";
}
.icon-rain:before {
 content: "\e015";
}
.icon-aperture-alt:before {
 content: "\e016";
}
.icon-aperture:before {
 content: "\e017";
}
.icon-camera:before {
 content: "\e018";
}
.icon-image:before {
 content: "\e019";
}
.icon-layers:before {
 content: "\e01a";
}
.icon-layers-alt:before {
 content: "\e01b";
}
.icon-eyedropper:before {
  content: "\e01c";
}
.icon-brush-alt:before {
 content: "\e01d";
}
.icon-info:before {
 content: "\e01e";
}
.icon-question-mark:before {
 content: "\e01f";
}
.icon-pilcrow:before {
 content: "\e020";
}
.icon-hash:before {
 content: "\e021";
}
.icon-left-quote:before {
 content: "\e022";
}
.icon-right-quote:before {
 content: "\e023";
}
.icon-left-quote-alt:before {
 content: "\e024";
}
.icon-right-quote-alt:before {
 content: "\e025";
}
.icon-fullscreen:before {
 content: "\e026";
}
.icon-fullscreen-exit-alt:before {
 content: "\e027";
}
.icon-fullscreen-exit:before {
 content: "\e028";
}
.icon-play-alt:before {
 content: "\e029";
}
.icon-last:before {
 content: "\e02a";
}
.icon-first:before {
 content: "\e02b";
}
.icon-eject:before {
 content: "\e02c";
}
.icon-stop:before {
 content: "\e02d";
}
.icon-arrow-left:before {
 content: "\e02e";
}
.icon-new-window:before {
 content: "\e02f";
}
.icon-plus:before {
 content: "\e030";
}
.icon-x-altx-alt:before {
 content: "\e031";
}
.icon-denied:before {
 content: "\e032";
}
.icon-plus-alt:before {
 content: "\e033";
}
.icon-lightbulb:before {
 content: "\e034";
}
.icon-arrow-left-alt1:before {
 content: "\e035";
}
.icon-arrow-left-alt2:before {
 content: "\e036";
}
.icon-spin-alt:before {
 content: "\e037";
}
.icon-minus:before {
 content: "\e038";
}
.icon-cursor:before {
 content: "\e039";
}
.icon-rss:before {
 content: "\e03a";
}
.icon-minus-alt:before {
 content: "\e03b";
}
.icon-spin:before {
 content: "\e03c";
}
.icon-arrow-right:before {
 content: "\e03d";
}
.icon-arrow-right-alt1:before {
 content: "\e03e";
}
.icon-curved-arrow:before {
 content: "\e03f";
}
.icon-pin:before {
 content: "\e040";
}
.icon-rss-alt:before {
 content: "\e041";
}
.icon-wrench:before {
 content: "\e042";
}
.icon-dial:before {
 content: "\e043";
}
.icon-cog:before {
 content: "\e044";
}
.icon-move:before {
 content: "\e045";
}
.icon-bolt:before {
 content: "\e046";
}
.icon-link:before {
 content: "\e047";
}
.icon-undo:before {
 content: "\e048";
}
.icon-reload:before {
 content: "\e049";
}
.icon-reload-alt:before {
 content: "\e04a";
}
.icon-arrow-up-alt1:before {
 content: "\e04b";
}
.icon-arrow-up:before {
 content: "\e04c";
}
.icon-arrow-right-alt2:before {
 content: "\e04d";
}
@font-face {
 font-family: 'iconic';
 src:url('fonts/iconic.eot');
 src:url('fonts/iconic.eot?#iefix') format('embedded-opentype'),
	url('fonts/iconic.svg#iconic') format('svg'),
	url('fonts/iconic.woff') format('woff'),
	url('fonts/iconic.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

demodownload

特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。

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

随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过，如果你还没有接触，不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法，就是利用@media来做一些IE下的特殊效果。

众所周知，有些时候为了实现IE下的某些效果与现代浏览器一致，我们不得不使用一些hack手段来实现目的。比如说使用“\0”，“\”和“\9”来仅让IE某些版本识别，而对于现代浏览器来说，他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法：

仅IE6和IE7识别

@media screen\9 {
  .selector {  property: value; }
} 

仅IE6和IE7、IE8识别

@media \0screen\,screen\9 {
  .selector {  property: value; }
}

仅IE8识别

@media \0screen {
  .selector {  property: value; }
}

仅IE8-10识别

@media screen\0 {
  .selector {  property: value; }
} 

仅IE9和IE10识别

@media screen and (min-width:0\0) {
  .selector {  property: value; }
} 

上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别，那么具体项目中我们要怎么使用呢？

打个比方，如果你的body中设置了一个红色的背景，而想让不同版本IE变成别的颜色，那么我们就可以这么操作

body {
  background: red;
}

/* IE6、IE7变成绿色 */
@media all\9 {
  body {
    background: green;
  }
}

/* IE8变成蓝色 */
@media \0screen {
  body {
    color: blue;
  }
}
/*IE9和IE10变成黄色*/
@media screen and (min-width:0\0) {
  body { 
    background: yellow; 
  }
} 
 

IE的Hack方法我向来不提倡使用，但这些方法很少有人知道，贴上来与大家分享，希望在不得已的情况之下，这些hack方法能帮你解决问题，特别是国内的苦逼前端人员。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/moving-ie-specific-css-into-media-blocks

这个ICON库工程真是浩大，其实藤藤整理出来是350个ICON，可是被我弄丢了五个，找不回来了，真是罪过罪过呀，实在找不回来的情况之下，我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成，可以说，你需要的ICON图标都基本上全了，有生活的、有工业的、有技术的等等，不信你自己看看。我是信了。(^_^)，制作方法是不用了说，主要是大家苦于没有这样的字体库，那么现在我们给大家提供了，需要的就直接下载吧，不过转载的话，注明一下来源哟，别让我们辛苦过后一点余香都没了。

demodownload

HTML CODE

<a href="#" class="icon icon-phone">
  <span>
   <em>icon-phone</em>
  </span>
</a>

这里仅显示了一个Icon的结构，其他的ICON结构使用相同，特别注意，此处结构添加了一个tip效果，方便大家查询对应的ICON类名，实际使用时，可以将tip中的代码去除。

CSS Code

.demo {
  width: 900px;
  text-align: left;
  margin: 40px auto 0;
}
.control_buttons li {
  display: inline-block;
  margin-right: 6px;
}
.icon {
  position: relative;
  display: inline-block;
  color: #333;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,.08) inset;
  border: 1px solid #333;
  border-radius: 3px;
}
.icon:hover {
  color: #333;
  box-shadow: 0 0 1px 1px #fa6fa0;
  border: 1px solid #fa6fa0;
  text-decoration:none;
}
.icon:hover span {
  max-height: 36px;
}
.icon span {
  position: absolute;
  left: -32px;
  top: 30px;
  display: block;
  overflow: hidden;
  max-height: 0;
  text-align: center;
  -webkit-transition: max-height .3s linear;
     -moz-transition: max-height .3s linear;
       -o-transition: max-height .3s linear;
      transition: max-height .3s linear;
  z-index: 2;
}
.icon span em {
  position: relative;
  display: block;
  width: 100px;
  line-height: 26px;
  font-style: normal;
  color: #fff;
  text-shadow:0 0 0 #fff;
  margin-top: 10px;
  border-radius: 2px 2px 0 0;
  background-color:#fa6fa0;
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
  z-index: 3;
}
.icon span em:after {
  position: absolute;
  left: 50%;
  top: -10px;
  content: '';
  width: 1px;
  height: 1px;
  border: 5px solid transparent;
  border-bottom-color: #fa6fa0;
  margin-left: -6px;
}
.icon:after {
  font-family: 'brankic1979';
  font-style: normal;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
.icon-number:after {
  content:"\21";
}
.icon-quote:after {
  content:"\22";
}
.icon-tv:after {
  content:"\23";
}
.icon-upload:after {
  content:"\24";
}
.icon-picture:after {
  content:"\25";
}
.icon-site-map:after {
  content:"\26";
}
.icon-sale:after {
  content:"\27";
}
.icon-smiley:after {
  content:"\28";
}
.icon-stack:after {
  content:"\29";
}
.icon-megaphone:after {
  content:"\2a";
}
.icon-layout:after {
  content:"\2b";
}
.icon-chat:after {
  content:"\2c";
}
.icon-attachment:after {
  content:"\2d";
}
.icon-crop:after {
  content:"\2e";
}
.icon-aids:after {
  content:"\2f";
}
.icon-book:after {
  content:"\30";
}
.icon-radio:after {
  content:"\31";
}
.icon-navigation:after {
  content:"\32";
}
.icon-tags:after {
  content:"\33";
}
.icon-printer:after {
  content:"\34";
}
.icon-book-2:after {
  content:"\35";
}
.icon-heart:after {
  content:"\36";
}
.icon-square:after {
  content:"\37";
}
.icon-hourglass:after {
  content:"\38";
}
.icon-comments:after {
  content:"\39";
}
.icon-chat-2:after {
  content:"\3a";
}
.icon-chat-3:after {
  content:"\3b";
}
.icon-abacus:after {
  content:"\3c";
}
.icon-pencil:after {
  content:"\3d";
}
.icon-circle:after {
  content:"\3e";
}
.icon-info:after {
  content:"\3f";
}
.icon-square-2:after {
  content:"\40";
}
.icon-info-2:after {
  content:"\41";
}
.icon-barcode:after {
  content:"\42";
}
.icon-barcode-2:after {
  content:"\43";
}
.icon-error:after {
  content:"\44";
}
.icon-checked:after {
  content:"\45";
}
.icon-heart-2:after {
  content:"\46";
}
.icon-heart-3:after {
  content:"\47";
}
.icon-usb:after {
  content:"\48";
}
.icon-clipboard:after {
  content:"\49";
}
.icon-clipboard-2:after {
  content:"\4a";
}
.icon-minus:after {
  content:"\4b";
}
.icon-add:after {
  content:"\4c";
}
.icon-expand:after {
  content:"\4d";
}
.icon-collapse:after {
  content:"\4e";
}
.icon-pop-out:after {
  content:"\4f";
}
.icon-pop-in:after {
  content:"\50";
}
.icon-target:after {
  content:"\51";
}
.icon-badge:after {
  content:"\52";
}
.icon-eyedropper:after {
  content:"\53";
}
.icon-switch:after {
  content:"\54";
}
.icon-clipboard-3:after {
  content:"\55";
}
.icon-atom:after {
  content:"\56";
}
.icon-pictures:after {
  content:"\57";
}
.icon-alert:after {
  content:"\58";
}
.icon-ruler:after {
  content:"\59";
}
.icon-moon:after {
  content:"\5a";
}
.icon-sun:after {
  content:"\5b";
}
.icon-lightning:after {
  content:"\5c";
}
.icon-rain:after {
  content:"\5d";
}
.icon-dollar:after {
  content:"\5e";
}
.icon-piano:after {
  content:"\5f";
}
.icon-pen:after {
  content:"\60";
}
.icon-volume:after {
  content:"\61";
}
.icon-volume-2:after {
  content:"\62";
}
.icon-volume-3:after {
  content:"\63";
}
.icon-equalizer:after {
  content:"\64";
}
.icon-resize:after {
  content:"\65";
}
.icon-resize-2:after {
  content:"\66";
}
.icon-scissors:after {
  content:"\67";
}
.icon-discout:after {
  content:"\68";
}
.icon-pin:after {
  content:"\69";
}
.icon-pin-2:after {
  content:"\6a";
}
.icon-dollar-2:after {
  content:"\6b";
}
.icon-coins:after {
  content:"\6c";
}
.icon-pig:after {
  content:"\6d";
}
.icon-bookmark:after {
  content:"\6e";
}
.icon-bookmark-2:after {
  content:"\6f";
}
.icon-layout-2:after {
  content:"\70";
}
.icon-box:after {
  content:"\71";
}
.icon-lamp:after {
  content:"\72";
}
.icon-key:after {
  content:"\73";
}
.icon-eight-ball:after {
  content:"\74";
}
.icon-location:after {
  content:"\75";
}
.icon-watch:after {
  content:"\76";
}
.icon-minus-2:after {
  content:"\77";
}
.icon-minus-3:after {
  content:"\78";
}
.icon-plus:after {
  content:"\79";
}
.icon-plus-2:after {
  content:"\7a";
}
.icon-cancel:after {
  content:"\7b";
}
.icon-cancel-2:after {
  content:"\7c";
}
.icon-checkmark:after {
  content:"\7d";
}
.icon-inbox:after {
  content:"\7e";
}
.icon-pictures-2:after {
  content:"\e000";
}
.icon-android:after {
  content:"\e001";
}
.icon-marvin:after {
  content:"\e002";
}
.icon-checkmark-2:after {
  content:"\e003";
}
.icon-pictures-3:after {
  content:"\e004";
}
.icon-cloud:after {
  content:"\e005";
}
.icon-upload-2:after {
  content:"\e006";
}
.icon-direction:after {
  content:"\e007";
}
.icon-map:after {
  content:"\e008";
}
.icon-sad:after {
  content:"\e009";
}
.icon-david-star:after {
  content:"\e00a";
}
.icon-patch:after {
  content:"\e00b";
}
.icon-layout-3:after {
  content:"\e00c";
}
.icon-layout-4:after {
  content:"\e00d";
}
.icon-pil:after {
  content:"\e00e";
}
.icon-cross:after {
  content:"\e00f";
}
.icon-mute:after {
  content:"\e010";
}
.icon-chart:after {
  content:"\e011";
}
.icon-trashcan:after {
  content:"\e012";
}
.icon-hand:after {
  content:"\e013";
}
.icon-moon-and-star:after {
  content:"\e014";
}
.icon-injection:after {
  content:"\e015";
}
.icon-layout-5:after {
  content:"\e016";
}
.icon-layout-6:after {
  content:"\e017";
}
.icon-layout-7:after {
  content:"\e018";
}
.icon-layout-8:after {
  content:"\e019";
}
.icon-layout-9:after {
  content:"\e01a";
}
.icon-layout-10:after {
  content:"\e01b";
}
.icon-cube:after {
  content:"\e01c";
}
.icon-lamp-2:after {
  content:"\e01d";
}
.icon-lamp-3:after {
  content:"\e01e";
}
.icon-lamp-4:after {
  content:"\e01f";
}
.icon-thermometer:after {
  content:"\e020";
}
.icon-transformers:after {
  content:"\e021";
}
.icon-radio-2:after {
  content:"\e022";
}
.icon-vote:after {
  content:"\e023";
}
.icon-chart-2:after {
  content:"\e024";
}
.icon-pacman:after {
  content:"\e025";
}
.icon-cassette:after {
  content:"\e026";
}
.icon-watch-2:after {
  content:"\e027";
}
.icon-chronometer:after {
  content:"\e028";
}
.icon-chart-3:after {
  content:"\e029";
}
.icon-chart-4:after {
  content:"\e02a";
}
.icon-chart-5:after {
  content:"\e02b";
}
.icon-chart-6:after {
  content:"\e02c";
}
.icon-graduate:after {
  content:"\e02d";
}
.icon-lab:after {
  content:"\e02e";
}
.icon-football:after {
  content:"\e02f";
}
.icon-tie:after {
  content:"\e030";
}
.icon-medal:after {
  content:"\e031";
}
.icon-medal-2:after {
  content:"\e032";
}
.icon-satellite:after {
  content:"\e033";
}
.icon-batman:after {
  content:"\e034";
}
.icon-space-invaders:after {
  content:"\e035";
}
.icon-skeletor:after {
  content:"\e036";
}
.icon-lamp-5:after {
  content:"\e037";
}
.icon-switch-2:after {
  content:"\e038";
}
.icon-edit:after {
  content:"\e039";
}
.icon-notice:after {
  content:"\e03a";
}
.icon-notice-2:after {
  content:"\e03b";
}
.icon-cog:after {
  content:"\e03c";
}
.icon-cogs:after {
  content:"\e03d";
}
.icon-cog-2:after {
  content:"\e03e";
}
.icon-warning:after {
  content:"\e03f";
}
.icon-suitcase:after {
  content:"\e040";
}
.icon-health:after {
  content:"\e041";
}
.icon-suitcase-2:after {
  content:"\e042";
}
.icon-suitcase-3:after {
  content:"\e043";
}
.icon-number-2:after {
  content:"\e044";
}
.icon-camera:after {
  content:"\e045";
}
.icon-quote-2:after {
  content:"\e046";
}
.icon-number-3:after {
  content:"\e047";
}
.icon-tag:after {
  content:"\e048";
}
.icon-camera-2:after {
  content:"\e049";
}
.icon-camera-3:after {
  content:"\e04a";
}
.icon-tag-2:after {
  content:"\e04b";
}
.icon-number-4:after {
  content:"\e04c";
}
.icon-link:after {
  content:"\e04d";
}
.icon-number-5:after {
  content:"\e04e";
}
.icon-film:after {
  content:"\e04f";
}
.icon-film-2:after {
  content:"\e050";
}
.icon-link-2:after {
  content:"\e051";
}
.icon-number-6:after {
  content:"\e052";
}
.icon-number-7:after {
  content:"\e053";
}
.icon-number-8:after {
  content:"\e054";
}
.icon-number-9:after {
  content:"\e055";
}
.icon-number-10:after {
  content:"\e056";
}
.icon-number-11:after {
  content:"\e057";
}
.icon-number-12:after {
  content:"\e058";
}
.icon-number-13:after {
  content:"\e059";
}
.icon-number-14:after {
  content:"\e05a";
}
.icon-number-15:after {
  content:"\e05b";
}
.icon-number-16:after {
  content:"\e05c";
}
.icon-number-17:after {
  content:"\e05d";
}
.icon-number-18:after {
  content:"\e05e";
}
.icon-number-19:after {
  content:"\e05f";
}
.icon-number-20:after {
  content:"\e060";
}
.icon-ipod:after {
  content:"\e061";
}
.icon-monitor:after {
  content:"\e062";
}
.icon-window:after {
  content:"\e063";
}
.icon-tablet:after {
  content:"\e064";
}
.icon-phone:after {
  content:"\e065";
}
.icon-files:after {
  content:"\e066";
}
.icon-file:after {
  content:"\e067";
}
.icon-file-2:after {
  content:"\e068";
}
.icon-file-3:after {
  content:"\e069";
}
.icon-calendar:after {
  content:"\e06a";
}
.icon-calendar-2:after {
  content:"\e06b";
}
.icon-calendar-3:after {
  content:"\e06c";
}
.icon-cabinet:after {
  content:"\e06d";
}
.icon-cabinet-2:after {
  content:"\e06e";
}
.icon-film-3:after {
  content:"\e06f";
}
.icon-microphone:after {
  content:"\e070";
}
.icon-microphone-2:after {
  content:"\e071";
}
.icon-microphone-3:after {
  content:"\e072";
}
.icon-drink:after {
  content:"\e073";
}
.icon-drink-2:after {
  content:"\e074";
}
.icon-drink-3:after {
  content:"\e075";
}
.icon-drink-4:after {
  content:"\e076";
}
.icon-coffee:after {
  content:"\e077";
}
.icon-mug:after {
  content:"\e078";
}
.icon-ice-cream:after {
  content:"\e079";
}
.icon-cake:after {
  content:"\e07a";
}
.icon-inbox-2:after {
  content:"\e07b";
}
.icon-download:after {
  content:"\e07c";
}
.icon-alarm-clock:after {
  content:"\e07d";
}
.icon-time:after {
  content:"\e07e";
}
.icon-time-2:after {
  content:"\e07f";
}
.icon-headphones:after {
  content:"\e080";
}
.icon-wallet:after {
  content:"\e081";
}
.icon-checkmark-3:after {
  content:"\e082";
}
.icon-cancel-3:after {
  content:"\e083";
}
.icon-eye:after {
  content:"\e084";
}
.icon-position:after {
  content:"\e085";
}
.icon-site-map-2:after {
  content:"\e086";
}
.icon-download-2:after {
  content:"\e087";
}
.icon-bowling:after {
  content:"\e088";
}
.icon-cord:after {
  content:"\e089";
}
.icon-umbrella:after {
  content:"\e08a";
}
.icon-box-2:after {
  content:"\e08b";
}
.icon-stretch:after {
  content:"\e08c";
}
.icon-layout-11:after {
  content:"\e08d";
}
.icon-profile:after {
  content:"\e08e";
}
.icon-address-book:after {
  content:"\e08f";
}
.icon-address-book-2:after {
  content:"\e090";
}
.icon-profile-2:after {
  content:"\e091";
}
.icon-narrow:after {
  content:"\e092";
}
.icon-layout-12:after {
  content:"\e093";
}
.icon-diamond:after {
  content:"\e094";
}
.icon-street-light:after {
  content:"\e095";
}
.icon-locked:after {
  content:"\e096";
}
.icon-bowling-pin:after {
  content:"\e097";
}
.icon-basket:after {
  content:"\e098";
}
.icon-folder:after {
  content:"\e099";
}
.icon-gamepad:after {
  content:"\e09a";
}
.icon-alarm:after {
  content:"\e09b";
}
.icon-alarm-cancel:after {
  content:"\e09c";
}
.icon-phone-2:after {
  content:"\e09d";
}
.icon-phone-3:after {
  content:"\e09e";
}
.icon-image:after {
  content:"\e09f";
}
.icon-open:after {
  content:"\e0a0";
}
.icon-mouse:after {
  content:"\e0a1";
}
.icon-washing-machine:after {
  content:"\e0a2";
}
.icon-oven:after {
  content:"\e0a3";
}
.icon-refrigerator:after {
  content:"\e0a4";
}
.icon-microwave:after {
  content:"\e0a5";
}
.icon-3d-glasses:after {
  content:"\e0a6";
}
.icon-soccer:after {
  content:"\e0a7";
}
.icon-baseball:after {
  content:"\e0a8";
}
.icon-unlocked:after {
  content:"\e0a9";
}
.icon-locked-2:after {
  content:"\e0aa";
}
.icon-unlocked-2:after {
  content:"\e0ab";
}
.icon-magnifier:after {
  content:"\e0ac";
}
.icon-zoom-in:after {
  content:"\e0ad";
}
.icon-zoom-out:after {
  content:"\e0ae";
}
.icon-stack-2:after {
  content:"\e0af";
}
.icon-stack-3:after {
  content:"\e0b0";
}
.icon-megaphone-2:after {
  content:"\e0b1";
}
.icon-battery:after {
  content:"\e0b2";
}
.icon-battery-2:after {
  content:"\e0b3";
}
.icon-battery-3:after {
  content:"\e0b4";
}
.icon-battery-4:after {
  content:"\e0b5";
}
.icon-battery-5:after {
  content:"\e0b6";
}
.icon-archive:after {
  content:"\e0b7";
}
.icon-bomb:after {
  content:"\e0b8";
}
.icon-bag:after {
  content:"\e0b9";
}
.icon-money-bag:after {
  content:"\e0ba";
}
.icon-grid:after {
  content:"\e0bb";
}
.icon-grid-2:after {
  content:"\e0bc";
}
.icon-list:after {
  content:"\e0bd";
}
.icon-list-2:after {
  content:"\e0be";
}
.icon-ruler-2:after {
  content:"\e0bf";
}
.icon-ruler-3:after {
  content:"\e0c0";
}
.icon-pen-2:after {
  content:"\e0c1";
}
.icon-brush:after {
  content:"\e0c2";
}
.icon-hammer:after {
  content:"\e0c3";
}
.icon-paint:after {
  content:"\e0c4";
}
.icon-screwdriver:after {
  content:"\e0c5";
}
.icon-tools:after {
  content:"\e0c6";
}
.icon-layout-13:after {
  content:"\e0c7";
}
.icon-layout-14:after {
  content:"\e0c8";
}
.icon-resize-3:after {
  content:"\e0c9";
}
.icon-profile-3:after {
  content:"\e0ca";
}
.icon-safe:after {
  content:"\e0cb";
}
.icon-rotate:after {
  content:"\e0cc";
}
.icon-download-3:after {
  content:"\e0cd";
}
.icon-envelope:after {
  content:"\e0ce";
}
.icon-envelope-2:after {
  content:"\e0cf";
}
.icon-rotate-2:after {
  content:"\e0d0";
}
.icon-calculator:after {
  content:"\e0d1";
}
.icon-library:after {
  content:"\e0d2";
}
.icon-reply:after {
  content:"\e0d3";
}
.icon-radio-active:after {
  content:"\e0d4";
}
.icon-music:after {
  content:"\e0d5";
}
.icon-forward:after {
  content:"\e0d6";
}
.icon-auction:after {
  content:"\e0d6";
}
.icon-justice:after {
  content:"\e0d8";
}
.icon-retweet:after {
  content:"\e0d9";
}
.icon-presentation:after {
  content:"\e0da";
}
.icon-male:after {
  content:"\e0db";
}
.icon-shuffle:after {
  content:"\e0dc";
}
.icon-stats:after {
  content:"\e0dd";
}
.icon-stats-2:after {
  content:"\e0de";
}
.icon-loop:after {
  content:"\e0df";
}
.icon-female:after {
  content:"\e0e0";
}
.icon-cloudy:after {
  content:"\e0e1";
}
.icon-badge-2:after {
  content:"\e0e2";
}
.icon-globe:after {
  content:"\e0e3";
}
.icon-globe-2:after {
  content:"\e0e4";
}
.icon-ticket:after {
  content:"\e0e5";
}
.icon-cloudy-2:after {
  content:"\e0e6";
}
.icon-shipping:after {
  content:"\e0e7";
}
.icon-ticket-2:after {
  content:"\e0e8";
}
.icon-car:after {
  content:"\e0e9";
}
.icon-bike:after {
  content:"\e0ea";
}
.icon-ticket-3:after {
  content:"\e0eb";
}
.icon-ying-yang:after {
  content:"\e0ec";
}
.icon-compass:after {
  content:"\e0ed";
}
.icon-microphone-4:after {
  content:"\e0ee";
}
.icon-truck:after {
  content:"\e0ef";
}
.icon-bus:after {
  content:"\e0f0";
}
.icon-bike-2:after {
  content:"\e0f1";
}
.icon-plane:after {
  content:"\e0f2";
}
.icon-paper-plane:after {
  content:"\e0f3";
}
.icon-rocket:after {
  content:"\e0f4";
}
.icon-keyboard:after {
  content:"\e0f5";
}
.icon-stop:after {
  content:"\e0f6";
}
.icon-cone:after {
  content:"\e0f6";
}
.icon-blocked:after {
  content:"\e0f8";
}
.icon-zip:after {
  content:"\e0f9";
}
.icon-zip-2:after {
  content:"\e0fa";
}
.icon-anchor:after {
  content:"\e0fb";
}
.icon-locked-heart:after {
  content:"\e0fc";
}
.icon-magnet:after {
  content:"\e0fd";
}
.icon-keyboard-2:after {
  content:"\e0fe";
}
.icon-snow:after {
  content:"\e0ff";
}
@font-face {
  font-family: 'brankic1979';
  src:url('fonts/brankic1979.eot');
  src:url('fonts/brankic1979.eot?#iefix') format('embedded-opentype'),
    url('fonts/brankic1979.svg#brankic1979') format('svg'),
    url('fonts/brankic1979.woff') format('woff'),
    url('fonts/brankic1979.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。

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

今天把《CSS3制作超酷的SearchBox》教程中的案例整理了一下，把教程中的DEMO单独拿出来与大家分享。这个DEMO中一共制作了四个不同的搜索表单的效果，希望大家喜欢。

demodownload

HTML CODE

<formid="formWrapper">
  <divclass="formFiledclearfix">
    <inputtype="text"required=""placeholder="SearchforCSS3,HTML5,jQuery..."class="search">
    <inputtype="submit"class="btnsubmit"value="go">
  </div>
</form>
<formaction=""method="post"id="searchForm"class="form">
  <divclass="formFiledclearfix">
    <inputtype="text"class="inputTextsearch"placeholder="Enteryourkeyword,please!"name="search"/>
    <inputtype="submit"class="btnsubmit"value="Search"/>
  </div>
</form>
<formaction=""method="post"id="searchBox"class="form">
  <divclass="formFiledclearfix">
    <inputtype="text"id="search"class="inputTextsearch"placeholder="Search..."name="search"/>
    <inputtype="submit"class="btnsubmit"value="Search"/>
  </div>
</form>
<formclass="formclearfix"name="signup-form"method="post"action="#"id="signup-form">
  <inputtype="text"class="field"id="mce-EMAIL"name="EMAIL"placeholder="Enteryouremailaddress…">
  <inputtype="submit"class="btn"id="mc-embedded-subscribe"name="subscribe"value="SignUp">
</form>

CSS CODE

#formWrapper {
  width: 450px;
  padding: 8px;
  margin: 30px auto;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede #bababa #aaa #bababa;
  box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  border-radius: 10px;
  background-color: #f6f6f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
  background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
#formWrapper .search {
  width: 330px;
  height: 20px;
  padding: 10px 5px;
  float: left;
  font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
  border-radius: 3px;
}
#formWrapper .search:focus {
  outline: 0;
  border-color: #aaa;
  box-shadow: 0 1px 1px #bbb inset;
}
#formWrapper .search::-webkit-input-placeholder,
#formWrapper .search:-moz-placeholder,
#formWrapper .search:-ms-input-placeholder {
  color: #999;
  font-weight: normal;
}
  
#formWrapper .btn {
  float: right;
  border: 1px solid #00748f;
  height: 42px;
  width: 100px;
  padding: 0;
  cursor: pointer;
  font: bold 15px Arial, Helvetica;
  color: #fafafa;
  text-transform: uppercase;
  background-color: #0483a0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
  background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
  background-image: linear-gradient(top, #31b2c3, #0483a0);
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
#formWrapper .btn:hover,
#formWrapper .btn:focus {
  background-color: #31b2c3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
  background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
  background-image: linear-gradient(top, #0483a0, #31b2c3);
}
#formWrapper .btn:active {
  outline: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
/*demo2*/

#searchForm {
	width: 420px;
	margin: 30px auto;
	background-color:#f2f3f1;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f2f3f1));
  background-image:-webkit-linear-gradient(top,#fafafa,#f2f3f1);
  background-image:-moz-linear-gradient(top,#fafafa,#f2f3f1);
  background-image:-ms-linear-gradient(top,#fafafa,#f2f3f1);
  background-image:-o-linear-gradient(top,#fafafa,#f2f3f1);
  background-image:linear-gradient(top,#fafafa,#f2f3f1);
	box-shadow:0 1px 2px rgba(0,0,0,.4);
  border-radius:3px;
  position:relative;
	padding:12px;
}
#searchForm:before{
  content:'';
  background:rgba(0,0,0,.07);
  border-radius:10px;
  box-shadow:0 1px 1px rgba(0,0,0,.4) inset,0 1px 0 rgba(255,255,255,.7);
  position:absolute;
  top:-10px;
  bottom:-10px;
  left:-10px;
  right:-10px;
  z-index:-1;
}

#searchForm .search{
  padding:10px;
  width:285px;
  float:left;
  border:1px solid #ccc;
  color:#bbb;
  background:#fafafa;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.9);
  -webkit-transition:all 0.28s ease-in 0s;
  -moz-transition:all 0.28s ease-in 0s;
  -o-transition:all 0.28s ease-in 0s;
  -ms-transition:all 0.28s ease-in 0s;
  transition:all 0.28s ease-in 0s;
  font:bold 14px Arial,Helvetica;
  margin: 0;
  vertical-align: baseline;
  line-height: normal;
}
#searchForm .search:focus{
  background:#fff;
  box-shadow:0 2px 1px rgba(0,0,0,.4) inset;
  outline:0;
  color:#444;
}

    
#searchForm .btn{
  padding:9px 10px;
  width:100px;
  float:right;
  border:1px solid #7e1515;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  font-weight:bold;
  font-size:14px;
  background-color:#d14545;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#e97171),to(#d14545));
  background-image:-webkit-linear-gradient(top,#e97171,#d14545);
  background-image:-moz-linear-gradient(top,#e97171,#d14545);
  background-image:-ms-linear-gradient(top,#e97171,#d14545);
  background-image:-o-linear-gradient(top,#e97171,#d14545);
  background-image:linear-gradient(top,#e97171,#d14545);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
  border-radius:3px;
  -webkit-transition:all 0.28s ease-in 0s;
  -moz-transition:all 0.28s ease-in 0s;
  -o-transition:all 0.28s ease-in 0s;
  -ms-transition:all 0.28s ease-in 0s;
  transition:all 0.28s ease-in 0s;
  vertical-align: baseline;
  line-height: normal;
  margin-left: 12px;
}
#searchForm .btn:hover,
#searchForm .btn:focus{
  background-color:#e97171;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#d14545),to(#e97171));
  background-image:-webkit-linear-gradient(top,#d14545,#e97171);
  background-image:-moz-linear-gradient(top,#d14545,#e97171);
  background-image:-ms-linear-gradient(top,#d14545,#e97171);
  background-image:-o-linear-gradient(top,#d14545,#e97171);
  background-image:linear-gradient(top,#d14545,#e97171);
}
#searchForm .btn:active{
  outline:none;
  box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
}
/*demo3*/
#searchBox{
  width: 450px;
	margin: 30px auto;
  background-color: #eaf8fc;
  background-image: -moz-linear-gradient(#fff, #d4e8ec);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
  background-image: -webkit-linear-gradient(#fff, #d4e8ec);
  background-image: -o-linear-gradient(#fff, #d4e8ec);
  background-image: -ms-linear-gradient(#fff, #d4e8ec);
  background-image: linear-gradient(#fff, #d4e8ec);
  border-radius: 35px;
  border: solid 1px #c4d9df;
  border-color: #c4d9df #a4c3ca #83afb7;
  padding: 10px;
}
    
#searchBox .search    {
  padding: 5px 9px;
  height: 23px;
  width: 325px;
  border: 1px solid #a4c3ca;
  font: normal 13px 'trebuchet MS', arial, helvetica;
  background: #f1f1f1;
  float: left;
  border-radius: 50px 3px 3px 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-transition:all 0.28s ease-in 0s;
  -moz-transition:all 0.28s ease-in 0s;
  -o-transition:all 0.28s ease-in 0s;
  -ms-transition:all 0.28s ease-in 0s;
  transition:all 0.28s ease-in 0s;
}
    
#searchBox .search:focus {
 background-color: #FFFFFF;
 border-color: #8BADB4;
 outline: 0 none;
}

#searchBox .btn    {
  float:left;
  background-color: #6cbb6b;
  background-image: -moz-linear-gradient(#95d788, #6cbb6b);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
  background-image: -webkit-linear-gradient(#95d788, #6cbb6b);
  background-image: -o-linear-gradient(#95d788, #6cbb6b);
  background-image: -ms-linear-gradient(#95d788, #6cbb6b);
  background-image: linear-gradient(#95d788, #6cbb6b);
  border-radius: 3px 50px 50px 3px;
  border: 1px solid #7eba7c;
  border-color: #7eba7c #578e57 #447d43;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;         
  height: 35px;
  margin: 0 0 0 10px;
  padding: 0;
  width: 90px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #23441e;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  -webkit-transition:all 0.28s ease-in 0s;
  -moz-transition:all 0.28s ease-in 0s;
  -o-transition:all 0.28s ease-in 0s;
  -ms-transition:all 0.28s ease-in 0s;
  transition:all 0.28s ease-in 0s;
}
#searchBox .btn:hover    {
  background-color: #95d788;
  background-image: -moz-linear-gradient(#6cbb6b, #95d788);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  background-image: -webkit-linear-gradient(#6cbb6b, #95d788);
  background-image: -o-linear-gradient(#6cbb6b, #95d788);
  background-image: -ms-linear-gradient(#6cbb6b, #95d788);
  background-image: linear-gradient(#6cbb6b, #95d788);
}       
  
#searchBox .btn:active{
  background-color: #95d788;
  outline: none 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
/*demo4*/
#signup-form { 
  width:450px;
  margin: 20px auto; 
  padding: 18px; 
  background-color: #db4648; 
  border-radius: 8px; 
  box-shadow: 0 8px 0 #96293B;
}
#signup-form .field { 
  float: left; 
  padding: 15px 14px 15px 14px; 
  width: 280px; 
  font: 17px/17px 'Abel', Helvetica, serif; 
  color: #c2c2c2; 
  letter-spacing: .2em; 
  background-color: #fff; 
  border-top: 4px solid #c2c2c2; 
  border-right: 0; 
  border-bottom: 0; 
  border-left: 0; 
  border-radius: 4px; 
  margin-top: 0; 
}
#signup-form .field:focus { 
  color: black;
}
#signup-form input.btn { 
  cursor: pointer;
  float: left; 
  margin-left: 15px; 
  padding: 14px 14px 11px; 
  font: normal 19px/20px 'Abel', Helvetica, serif; 
  color: #fff;  
  letter-spacing: .2em; 
  text-transform: uppercase; 
  background-color: #6f2b41; 
  border-top: 0; 
  border-right: 0; 
  border-left: 0; 
  border-bottom: 0;
  border-radius: 4px; 
  box-shadow: 0 5px 0 #54253e; 
  height: 52px; 
}
#signup-form input:active.btn { 
  background-color: #6f2b41; 
  border-bottom-color: #6f2b41;
  box-shadow: 0 1px 0 #3c1a2c; 
  margin-top: 4px; 
}

demodownload

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

CSS3控制图片全屏显示，或者说使用CSS3制作全屏背景不是一个很大的问题，前面也有做过一定的讨论，但使用CSS3制作一个全屏slider效果，我想对于一部分同学来说还是有一定的难度。不过话说回来，如果你掌握了CSS3的属性，比如说：CSS3的选择器、animation、transition等等，制作这样的一个效果就会轻松的很，不信你试试。

demodownload

HTML CODE

<div class="slider">
  <ul class="clearfix">
    <li><a href="#bg1">Hipster Fashion Haircut </a></li>
    <li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
    <li><a href="#bg3">My haire is sooo fantastic!</a></li>
    <li><a href="#bg4">Eat healthy & excersice!</a></li>
    <li><a href="#bg5">Lips so kissable I could die ...</a></li>
  </ul>
</div>
<img src="bg1.jpg" alt="" class="bg slideLeft" id="bg1" /> 
<img src="bg2.jpg" alt="" class="bg slideBottom" id="bg2" /> 
<img src="bg3.jpg" alt="" class="bg zoomIn" id="bg3" /> 
<img src="bg4.jpg" alt="" class="bg zoomOut" id="bg4" /> 
<img src="bg5.jpg" alt="" class="bg rotate" id="bg5" /> 

CSS CODE

html,body {
  height: 100%;
}
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto !important;
  height: 100%;
  /* Set up positioning */
  position: fixed;
  top: 40px;
  left: 0;
  z-index:1;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
.slider {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 9999;
  bottom: 100px;
}
.slider li {
  display: inline-block;
  width: 170px;
  height: 130px;
  margin-right: 15px;
}
.slider a {
  display: inline-block;
  width: 170px;
  padding-top: 70px;
  padding-bottom: 20px;
  position: relative;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 5px;
  vertical-align: top;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-family: 'Yesteryear', cursive;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
}
.slider li:nth-of-type(1) a {
  background-color: #02646e;
}
.slider li:nth-of-type(2) a {
  background-color: #eb0837;
}
.slider li:nth-of-type(3) a {
  background-color: #67b374;
}    
.slider li:nth-of-type(4) a {
  background-color: #e6674a;
}    
.slider li:nth-of-type(5) a {
  background-color: #e61061;
}
.slider a::after {
  content:"";
  display: block;
  height: 120px;
  width: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  z-index: 9999;
  top: -80px;
}
.slider li:nth-of-type(1) a::after {
  background: url(sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after {
  background: url(sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after {
  background: url(sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after {
  background: url(sbg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after {
  background: url(sbg5.jpg) no-repeat center;
}
.slider a::before {
  content:"";
  display: block;
  height: 120px;
  width: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  z-index: 99999;
  top: -80px;
  background: rgba(0,0,0,0.3);
}
.slider a:hover::before {
  opacity:0;
}
 /* Slide Left */
 
@-webkit-keyframes 'slideLeft' {
  0% { left: -500px; }
  100% { left: 0; }
}
@-moz-keyframes 'slideLeft' {
  0% { left: -500px; }
  100% { left: 0; }
}
@-o-keyframes 'slideLeft' {
  0% { left: -500px; }
  100% { left: 0; }
}
@-ms-keyframes 'slideLeft' {
  0% { left: -500px; }
  100% { left: 0; }
}
@keyframes 'slideLeft' {
  0% { left: -500px; }
  100% { left: 0; }
}
 
.slideLeft:target {
  z-index: 100;
  -webkit-animation-name: slideLeft;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: slideLeft;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: slideLeft;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: slideLeft;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: slideLeft;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
 
 
/* Slide Bottom */
 
@-webkit-keyframes 'slideBottom' {
  0% { top: 350px; }
  100% { top: 0; }
}
@-moz-keyframes 'slideBottom' {
  0% { top: 350px; }
  100% { top: 0; }
}
@-ms-keyframes 'slideBottom' {
  0% { top: 350px; }
  100% { top: 0; }
}
@-o-keyframes 'slideBottom' {
  0% { top: 350px; }
  100% { top: 0; }
}
@keyframes 'slideBottom' {
  0% { top: 350px; }
  100% { top: 0; }
}
 
.slideBottom:target {
  z-index: 100;
  -webkit-animation-name: slideBottom;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: slideBottom;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: slideBottom;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: slideBottom;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: slideBottom;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
 
/* Zoom In */
 
@-webkit-keyframes 'zoomIn' {
  0% { -webkit-transform: scale(0.1); }
  100% { -webkit-transform: none; }
}
@-moz-keyframes 'zoomIn' {
  0% { -moz-transform: scale(0.1); }
  100% { -moz-transform: none; }
}
@-ms-keyframes 'zoomIn' {
  0% { -ms-transform: scale(0.1); }
  100% { -ms-transform: none; }
}
@-o-keyframes 'zoomIn' {
  0% { -o-transform: scale(0.1); }
  100% { -o-transform: none; }
}
@keyframes 'zoomIn' {
  0% { transform: scale(0.1); }
  100% { transform: none; }
}
.zoomIn:target {
  z-index: 100;
  -webkit-animation-name: zoomIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: zoomIn;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: zoomIn;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: zoomIn;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
 
/* Zoom Out */
 
@-webkit-keyframes 'zoomOut' {
  0% { -webkit-transform: scale(2); }
  100% { -webkit-transform: none; }
}
@-moz-keyframes 'zoomOut' {
  0% { -moz-transform: scale(2); }
  100% { -moz-transform: none; }
}
@-ms-keyframes 'zoomOut' {
  0% { -ms-transform: scale(2); }
  100% { -ms-transform: none; }
}
@-o-keyframes 'zoomOut' {
  0% { -o-transform: scale(2); }
  100% { -o-transform: none; }
}
@keyframes 'zoomOut' {
  0% { transform: scale(2); }
  100% { transform: none; }
}
 
.zoomOut:target {
  z-index: 100;
  -webkit-animation-name: zoomOut;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: zoomOut;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: zoomOut;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: zoomOut;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: zoomOut;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
 
/* Rotate */
 
@-webkit-keyframes 'rotate' {
  0% { -webkit-transform: rotate(-360deg) scale(0.1); }
  100% { -webkit-transform: none; }
}
@-moz-keyframes 'rotate' {
  0% { -moz-transform: rotate(-360deg) scale(0.1); }
  100% { -moz-transform: none; }
}
@-ms-keyframes 'rotate' {
  0% { -ms-transform: rotate(-360deg) scale(0.1); }
  100% { -ms-transform: none; }
}
@-o-keyframes 'rotate' {
  0% { -o-transform: rotate(-360deg) scale(0.1); }
  100% { -o-transform: none; }
}
@keyframes 'rotate' {
  0% { transform: rotate(-360deg) scale(0.1); }
  100% { transform: none; }
}
 
.rotate:target {
  z-index: 100;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: rotate;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: rotate;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
 
/* Not Target */
 
@-webkit-keyframes 'notTarget' {
  0% { z-index: 75; }
  100% { z-index: 75; }
}
@-moz-keyframes 'notTarget' {
  0% { z-index: 75; }
  100% { z-index: 75; }
}
@-ms-keyframes 'notTarget' {
  0% { z-index: 75; }
  100% { z-index: 75; }
}
@-o-keyframes 'notTarget' {
  0% { z-index: 75; }
  100% { z-index: 75; }
}
@keyframes 'notTarget' {
  0% { z-index: 75; }
  100% { z-index: 75; }
}
 
.bg:not(:target) {
  -webkit-animation-name: notTarget;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-name: notTarget;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -ms-animation-name: notTarget;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  -o-animation-name: notTarget;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  animation-name: notTarget;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

demodownload

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

html常用结构主要涵盖了四个css样式，日常的常用的一些结构及布局，及对form表单元素的一个总结。

这篇文章应该是我最近几年实践的凝炼吧，主要目的是把平时的一些可以重复的50%以上的工作整理规划下，然后运用zencoding及自动完成，进一步提高代码质量及效率。当然这些不能解决所有问题，需求的变态大家都懂的哈哈，然后这些其实都是比较基础简单的东西，切图的人都明白的，不过话说回来，简单归简单，但是要做好还是得费点时间的。总的说来，这个常用结构可以一个人用，也可以在一个团队推广使用，因为在构建的时候就想表达一个清晰明了及多人协作的结构。

下面扯点与这个结构相关的一些东西吧。

话说我这搭框架都搭了一年了，从一个项目到另一个项目，每次感觉这个项目做完了就不用再搭了吧，但是好像想的比较乐观哈哈，其实本来我的计划是好好学习下js的，没想到就被粘到上面了。当然说好听点就是搭框架吧，说不好听点就是页面仔吧哈哈。因为是从做drupal themer转来的，所以一开始搭建框架借鉴了很多drupal的东西，而且用的最多的居然是id，所以那个时候我的框架缺点是显而易见的，幸亏那个时候我负责搭的只是一个大方面的布局变化考虑，没有深入到要复用的一些区块。然后就是一个人切页面，一般页面量都在十个以上，最悲催的是有些直接就是切内容部分，其他的如导航啊左右边栏啊是不能动的，明知道不合理，只能照着来，一方面要尽量多的使用前人的样式，另一方面还要小心翼翼的，生怕自己定义的样式把前人写的其他的页面给干掉了，那就完蛋了。所以那段时间是很纠结的，也是很需要精力的，记得如果旁边有个同事大声说句话，都能把我吓一跳。这样大概过了四五个月吧，这期间除了切页面外然后编写了css解决方案系列文章，对css知识进行一个总结吧，当然由于精力有限，也遗漏了很多。第一个阶段的搭框架阶段就是这样，以总体布局为主，然后更多的其实是自己一个人的工作，不必考虑合作，几乎是怎么方便自己怎么来的。

然后接下来是第二次大规模的合作了，这次包括所有的布局变化及所有的公用部分，因为时间比较紧，我先搭布局的然后其他同事相继就在我的布局上进行具体页面构建，而公用部分的东西每次都是我建好了，然后在群里发个通知，说可以用了，然后他们再来读我的代码，去复用。然后比较悲催的是，除了本身页面变化外，后续还添加了好几个页面，那些不是公用的部分，到了后续的页面部分居然可以变成公用了。但是之前使用的class的名字 根本就没有表达出来这个公用的意思，而后台已经嵌套了先前的页面，时间又紧，这个纠结啊，到最后有心也无力了，计划赶不上变化快啊，泪牛满面！再来规划已是不可能，只能眼睁睁的看着那些臃肿的代码，那时候真想抽产品几记耳光哈哈。这么一来这次规划框架以失败告终。时间总是那么紧，这个战场还没有搞定，下个就来了，下下个也来了哈哈。

话说这次之后，又继续折腾了两三次，也积淀了现在这些常用结构的雏形，然后就促使我写这些一看class名字，就大概知道这些是什么个结构的东西，因为绝大多数页面其实转来转去，内容区块还是差不多，大不了就是修饰不一样罢了（当然专题页面除外）。然后先大量的看页面，抽出其中本质上可以共有的结构，同时考虑其灵活变通的扩展，然后对这些结构进行简单的class化，达到通俗易懂这个目的。在完成这些之后，想着要记住这些是比较费劲的，每次来复制吧，那些简单的还如自己写的速度快呢，于是想到了自动完成，所以可以想象当时我的自动完成定义了多少html代码片段，然后在实际项目中发现其实这些结构一般是要修改点东西的，但是现在整个html代码片段修改起来还是比较麻烦，于是思路一转，就先把这些自动完成定义成zencoding的模式，然后根据实际项目修改zencoding就灵活多了。至此这个html常用结构就完成了。所以如果你要用这个常用结构，zencoding和自动完成那是必备的，当然也有人会说自动完成可以不要，因为zencoding就可以做到啊，其实我也想过，但是zencoding毕竟不是自己的东西，升级也不是自己说的算，要是人家升级一次，你就屁颠屁颠的改一次，那得多郁闷啊！我不能控制zencoding，但是我完全可以控制我自己的自动完成。

时间是把杀猪刀！回顾这一年也做了几件比较有意义的事：先是写了css解决方案，然后加入w3cplus和大漠一起决心改版w3cplus并一起努力让其发展得更好，期间顺便研究了drupal 7主题，之后就是加入drupalct团队，并开发了一个符合中国特色的d7基主题，最后赶在世界末日之前完成了html常用框架。当然期间也有几件我想办好却泡汤的事：css3go，css精品教程汇集。最后发现，依靠群众的力量有点不太靠谱，活还得自己干。

Responsive Design对于我来说一点都不陌生，从他在这个互联网出现的时候，就一直在观注他的成长，而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计，为了能让大家更好的理解，我自己也有必要好好的做一下功课，今天这个就是功课，想和大家一起分享一下Responsive设计的一些基本技巧，和相对应的学习资源，希望对大家有所帮助。

什么是Responsive设计？有的同学认为Responsive设计是自适应布局，也有的同学认为Responsive是网格布局。其实这些想法都不正确。Wikipedia对Responsive做了详细的描述，我在这里就简单的说一下。Responsive设计简单的称为RWD，是精心提供各种设备都能阅读网页的一种设计方法，RWD能让你的网页在不同的设备中展现成不同的设计风格。从这一点描述来说，Responsve既不是流体布局，也不是什么网格布局，他是一种独特的网页设计方法。

Responsive设计无疑是网页设计中的一个热门话题。某种程度上，他将是一个最受欢迎的网页设计概念，因为随着网站用户日渐多样化的访问方法，比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览，这也给我们后续的网页设计提出了一个全新的设计概念Responsive设计。让我们的网页能适应各种平台、各种设备上渲染。

这个时候可能又有人会心生疑问，是不是Responsive是用来制作Mobile页面的？这个问题我经常听到有同学问？其实这是一个很简单的问题，Mobile页面和我们平时的页面制作基本上是一样的，只不过大小不一样，其中稍有细节需要注意，从这一点出发，如果就Responsive设计是用来制作Mobile页面并不妥，只能说Responsive设计能让你的页面在Mobile上显示的更加完美。说到这，可能你会感觉到Responsive到底是什么？又怎么使用？我又要怎么学习呢？其实这些都不是问，接下来和大家分享一下学习或者说使用Responsive设计的一些基本技巧，以及对应的学习资源。

一、保持一个简单的布布局

布局是一个在简单不过的问题了，也是每个网页设计中必须包含的部分，但我们使用Responsive设计第一步要做的事情就是让你的页面布局尽量的简单。实现一个简单的布局，我们有一些小技巧：

Responsive布局技巧

在Responsive布局中，我们可以毫无保留的丢弃：

1. 尽量少用无关紧要的div
2. 不使用内联元素(inline)
3. 尽量少用js或flash
4. 丢去没用的绝对定位和浮动样式
5. 屏弃任何冗余结构和不使用100%设置

有舍才有得，丢去了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？

1. 使用HTML5 Doctype和相关指南
2. 重置好你的样式（reset.css）
3. 一个简单的有语义的核心布局
4. 给重要的网页元素使用简单的技巧，比如导航菜单之类元素

使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说css3特效或者js脚本。

说了这么多，怎么样的一个布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法：

你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

扩展阅读：

1. Responsive Layouts, Responsively Wireframed
2. Responsive Design 101
3. A Simple Device Diagram for Responsive Design Planning
4. Multi-Device Layout Patterns
5. Beginner’s Guide to Responsive Web Design
6. Create A Responsive, Mobile-First WordPress Theme
7. Initializr
8. 5 Patterns To Rearrange Responsive Layouts

二、使用Medial Queries

Medial Queries在CSS3中得到很大的扩展，如果你不太了解Medial Queries是什么？建议你先狠狠点击这里进行了解。而且Medial Queries在Responsive中扮演着一个非常重要的角色，可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说Medial Queries是一个媒体查询，可以根据设置的尺寸，查询出适配的样式。我们回过头来想，Responsive设计最关注的就是宽度：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

那么Medial Queries要怎么使用呢？有几种调用的方式，详细的也可以阅读这里.

/*import 导入法*/
<style>
  @import url(tiny.css) (min-width:300px);
  @import url(small.css) (min-width:600px);
  @import ulr(big.css) (min-width:900px);
</style>
/*直接写在样式文件中*/
@media screen and (max-width:300px) {
  /*Tiny styles*/
}
@media screen and (max-width: 600px) {
  /*small styles*/
}
@media screen and (max-width:900) {
  /*big styles*/
}

上面只是一种简单的使用方法，其实Medial Queries很简单，你可以为Responsive制定一些常用的模板，例如：

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

更详细的Medial Queries模板介绍，可以点击这里阅读。

这个时候你可能并不关心里面的样式文件怎么写，而更关心的是这样的尺寸我要怎么来定，如果你够仔细的话，从上面例的模板代码能找到一点的答案，那么我这里从别的地方截了和张图，放在这里以供大家参考：

扩展阅读：

1. Responsive设计和CSS3 Media Queries的结合
2. CSS3 Media Queries
3. CSS3 Media Queries模板
4. 使用em单位创建CSS3的Media Queries
5. Responsive Web Design: Layouts and Media Queries
6. Create a Responsive Web Design with Media Queries
7. Responsive Web Design in Sass: Using Media Queries in Sass 3.2
8. The EMs have it: Proportional Media Queries FTW!
9. Media Queries In Responsive Web Design
10. A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
11. Responsive Design and Media Queries

三、定义断点

定义断点，那么断点是什么？简单的描述就是，设备宽度的临界点，也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？那么在Responsive设计中，常见的断点有六种，我们今后的Medial Queries条件判断就可以根据这六个断点来定。

主要的有：

1. 第一个断点群体就是针对于智能手机设置，他的宽度是小于480px(
2. 第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px（
3. 第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)

为了完美一些，我们还可以添加另外几种断点：

1. 添加一个小于320px的断点，针对于小型的移动设备；(
2. 还可以添加适用于平板设备的断点，大于768px小于1024px(>768px 和
3. 最后还可以为超宽的桌面设置一个断点，大于1024px(>1024px)

综合下来，设置断点把握三个要点：

1. 满足主要的断点；
2. 有可能的话添加一些别的断点；
3. 设置高于1024px的桌面断点

如下图所示：

扩展阅读

1. Determining breakpoints for a responsive design
2. Device-Agnostic Approach To Responsive Web Design
3. Deciding what Responsive Breakpoints to use
4. Overview of Breakpoints in Responsive Web Design
5. Responsive Web Design Case Study: Zee
6. Looking Beyond Common Media Query Breakpoints
7. Re-thinking Breakpoints in Responsive Design
8. Where And How To Set Breakpoints In Media Queries
9. Using Breakpoint 1.0 in a Responsive Web Design Project
10. Responsive Breakpoints and Goldilocks

四、让你的布局更灵活

断点确认了，接下来要让你的布局更具灵活性。这里推荐使用flexible grids来布局，相对于固定宽度布局而言，Flexible grids能让你的布局更适应于viewport的尺寸大小。而整个flexible grids中流体布局（也就是大家常说的自适应布局、液体布局、百分比布局）最适合各种类弄屏幕大小，结合正确的medial Queries，你可以制作出适应于任何可能出现的设备页面布局。

来看一个简单的对比图

使用流体布局，有一个小技巧注意，为了让浏览器计算小数点的四舍五入的问题，影响页面布局，所以你的百分比小数位尽量多取一些位数，（如果你有看bootstrap的源码，你就能很明显的看到他的百分比布局，小数点后面精确到十多位）。当然大家对这个数值不好把握的话，可以使用现成的网格系统，

1. 30+ CSS Grid System(这里搜集了近40个不同网格系统的介绍)
2. 8个实用的响应式设计框架（这里搜集了15个具有responsive设计的网格框架系统）

流体布局是方便，但是苦于的是，如果在设置了流体宽度值的元素上添加padding和border，那就凶险了，这个你懂的（css box module）有介绍：

那有没有可解决的方法？方法是有的，早期是在设置宽度的元素内嵌套一个div，并将padding和border设置在这个内嵌元素上，这样就多增加了一个额外标签，其实在CSS3中有一个更好的方法，就是使用box-sizing来改变box module的默认模型。

举个例子，我们有一个“div”元素：他的宽度是67%，而且需要设置一个15px的内距padding和3px的边框border。Box module此时默认的宽度是：

div宽度=67% + 2*15px + 2*3px

这样一来造成web页面总布局的宽度大于100%；从而撑破了web的布局，为了让这个div不在改变box module的宽度，也就是说，不管他的padding和border设置的是何值，而其width永远不变，还是“67%”，那么我们就需要使用box-sizing来改变，这样一来，我们可以在样式表中这样设置：

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

扩展阅读：

1. 30+ CSS Grid System
2. 8个实用的响应式设计框架
3. Mobile Responsive Design: The Flexible Grid
4. Flexibility: A Foundation for Responsive Design
5. Going From Adaptive To Fully Responsive
6. Responsive Web Design
7. Gridpak: The Responsive Grid Generator
8. Five steps to gettin’ flexy in responsive web design

五、图片的自适应

布局实现自适应不难，那么图片怎么做到呢？也就是说我的一张图片，有什么方法可以让他在不同的设备上显示能根据屏幕大小自适应，处理这种效果有一个方法，如果你的web页面不会受到带宽宽的影响（不考虑性能），你可以先制作一图片让其适合最大屏幕，然后通过样式来控制不同设备下显示的大小；另外一种办法就是你可以为每个断点准备不同的图片。

图片自适应大小

使用样式来控制图片的自适应：

img {
  max-width: 100%;
}

断点图片

为每一个断点提供不同的的图片，这是一个比较头痛的事情，因为Medial Queries并不能改变图片"src"的属性值，那有没有办法可以解决呢？可以参考一下下面的解决方法：

1. 使用background-image:给元素使用背景图片，
2. 显示/隐藏父元素：给父元素使用不同的图片，然后通过Medial Queries来控制这些图片显示或隐藏。

一起来看一个断点解决图片自适应的例子：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

对应的CSS代码

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

扩展阅读：

1. Adaptive images: solving the responsive image problem
2. Responsive Images Without JavaScript
3. How to style flexible images for RWD
4. Adaptive Images for Responsive Designs
5. Rundown of Handling Flexible Media
6. On Responsive Images
7. Responsive images: what's the problem, and how do we fix it?
8. Responsive Images: How they Almost Worked and What We Need
9. Responsive images without Javascript
10. Responsive Image Techniques & Resources

六、别忘了min和max

在Responsive中有两个关键词也是非常的重要，“min-width”和“max-width”。这两个属性值能帮助你定义responsive临界点的一个相对值。典型的好处：

1. 防止你的布局变大或变小
2. 结合液体布局，max-width和min-width在medial queries临界点（断点）能做到更好的适应性。

一起来看几个简单的运用：

液体布局中，如果你的宽度不小于768px，同时不大于1024px，那么我们就可以使用：

min-width: 768px;
max-width: 1024px;

比如“#main”元元素宽度不低于1000px的桌面上显示，那么我们就可以这样使用：

@media screen and (min-width: 1024px) {
	#main {min-width: 1000px;}
}

七、让大部分东西是相对的

让你整个Web元素都是相对的而不是绝对的，从这一个概念出发，我们可以给最外面的元素定义一个单位，然后其子元素和后代码元素都继承他。目前使用相对的单位有两种常见的：

1. 百分比（%）方法：给主容器定认一个固定尺寸或者流体尺寸，然后给其每个子元素使用百分比（%）来计算各自的参数，比如说width/padding/margin等；
2. “em”单位：先在一个主容器中或者"<body>"中定义一个字体大小（font-size），把它做为基本单位，然后其他元素以此做为基准来计算出相关的值

“em”和“px”之间的转换是有些技巧的，如果你从来没有了解过他们之间的关系，我建议你先阅读一下这篇文章《CSS中强大的EM》，简单一点的，可以看看下图：

八、移动端上的效果

在移动端设备，特别是小屏的移动手机上，所有的内容都将在一个列中显示，这个时候，我们就需要对样式进行一定的处理，首先来看一个布局的对比：

PC桌面上的layout

这样的布局，在我们手机上将显示成这样：

那我们要怎么来实现这两种布局的转变呢？实现方法很简单：只需要在你的mobile样式表中覆盖每一个元素的宽度，将原来的宽度转换成“100%”

是不是我们需要在移动手机样式中为每一个不重要的元素添加移去的样式呢？其实不用，我们只需要在不重要的元素中添加类名“not_mobile”，然后在手机样式中添加：

@media screen and (max-width:300px) {
 .not_mobile{display: none;}
}

十、检查你的viewport

玩过移动端的同学可能都知道，许多移动端的浏览器模拟了桌面PC机下浏览器，你的web页面在移动端的浏览器浏览时，整个页面会直接压缩显示在一个屏幕下。这可是一个强大的功能，但也是Responsive致命的一功能。

看一个我在网上截图来的对比图：

针对这种情况，我可以使用“meta”属性来让其显示正常：

< meta name="viewport" content="width=device-width">

那么到这给与大家分享了制作Responsive设计的十个基本技巧，如果你对Responsive设计感兴趣的话，你可以打开“Mediaqueri.es”查看一些优秀的案例。最后希望这篇文章能给你带来些许的帮助。如果你有更好的分享，我们可以一起探讨。

特别声明:本文中提供的链接都是可能打开的，如果你碰到了打不开的网站，请先开启你的VPN服务。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

demodownload

HTML CODE

<ul class="quick_menu">
  <li>Welcome,</li>
  <li class="user_icon"><a href="#"><img src="x.jpg" alt="Tina"><b>5</b></a></li>
  <li class="user_fun">
    <a href="#" title="PandaThemes">PandaThemes<b>ˇ</b></a>
    <ul class="user_fun_sub">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Posts</a></li>
      <li><a href="#">Items</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Pages</a></li>
      <li><a href="#">Network Admin</a></li>
      <li><a href="#">My Sites</a></li>
    </ul>
  </li>
  <li class="log_out"><a href="#" title="Log Out">Log Out</a></li>
<ul>

CSS CODE

body {
  background-color: #004f5e;
  background-image: -webkit-linear-gradient(180deg, transparent 55%, #004c5a 45%);
  background-image: -o-linear-gradient(180deg, transparent 50%, #004c5a 50%);
  background-image: -ms-linear-gradient(180deg, transparent 50%, #004c5a 50%);
  background-image: linear-gradient(90deg, transparent 50%, #004c5a 50%);
  background-size: 30px 30px;
  letter-spacing: 0.09em;
}  
.demo {
  color: #fff;
  line-height: 30px;
  width: 370px;
  height: 220px;
  margin: 40px auto ;
  
}
.quick_menu > li {
  display: inline-block;
  position: relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}
.quick_menu a,
  .quick_menu a:hover{
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.quick_menu > li:hover .user_fun_sub {
  opacity:1;
  -webkit-animation: turn 2s ease-in-out;
  -moz-animation: turn 2s ease-in-out;
  -ms-animation: turn 2s ease-in-out;
  animation: turn 2s ease-in-out;
  visibility: visible;
}
.user_icon img {
  width: 30px;
  height: 30px;
  border:  1px solid #fff;
  border-radius: 3px;
  vertical-align: middle;
}
.user_icon b {
  position: absolute;
  top: -8px;
  left: -8px;
  display: inline-block;  
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  padding: 2px 5px;
  line-height: 12px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: #ff8400;

}
.user_fun b {
  position: absolute;
  top: 8px;
  padding-left: 2px;
  font-weight: normal;
  font-size: 22px;
}
.user_fun_sub {
  position: absolute;
  text-align: left;
  line-height: 30px;
  width: 125px;
  padding: 5px 0;
  border-radius: 5px;
  background-color: #001013;
  opacity: 0;
  visibility: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.user_fun_sub a {
  display: block;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin: 2px 5px 2px 5px;
  padding-left:5px;
}
.user_fun_sub a:hover {
  border-radius: 3px;
  box-shadow: 0 1px 0 #82c64f inset;
  background-color: #4daf04;
}
.log_out a {
  display: block;
  line-height: 15px;
  padding: 5px 20px;
  margin-left: 40px;
  border: 1px solid #33707b;
  border-radius: 3px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.log_out a:hover {
  text-shadow: 0 0 20px rgba(255,255,255,.9);
}

@-webkit-keyframes turn {
  0%{
    -webkit-transform: rotateX(90deg);
  }
  20%{
    -webkit-transform: rotateX(-30deg) rotateY(10deg);
  }
  35%{
    -webkit-transform: rotateX(20deg) rotateY(-3deg);
  }
  55%{
    -webkit-transform: rotateX(-15deg) rotateY(8deg);
  }
  85%{
    -webkit-transform: rotateX(20deg) rotateY(-2deg);
  }
  100%{
    -webkit-transform: rotateX(0);
  }
}
@-moz-keyframes turn {
  0%{
    -moz-transform: rotateX(90deg);
  }
  20%{
    -moz-transform: rotateX(-30deg) rotateY(10deg);
  }
  35%{
    -moz-transform: rotateX(20deg) rotateY(-3deg);
  }
  55%{
    -moz-transform: rotateX(-15deg) rotateY(8deg);
  }
  85%{
    -moz-transform: rotateX(20deg) rotateY(-2deg);
  }
  100%{
    -moz-transform: rotateX(0);
  }
}
@-ms-keyframes turn {
  0%{
    -ms-transform: rotateX(90deg);
  }
  20%{
    -ms-transform: rotateX(-30deg) rotateY(10deg);
  }
  35%{
    -ms-transform: rotateX(20deg) rotateY(-3deg);
  }
  55%{
    -ms-transform: rotateX(-15deg) rotateY(8deg);
  }
  85%{
    -ms-transform: rotateX(20deg) rotateY(-2deg);
  }
  100%{
    -ms-transform: rotateX(0);
  }
}
@keyframes turn {
  0%{
    transform: rotateX(90deg);
  }
  20%{
    transform: rotateX(-30deg) rotateY(10deg);
  }
  35%{
    transform: rotateX(20deg) rotateY(-3deg);
  }
  55%{
    transform: rotateX(-15deg) rotateY(8deg);
  }
  85%{
    transform: rotateX(20deg) rotateY(-2deg);
  }
  100%{
    transform: rotateX(0);
  }
}

demodownload

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

登录表单的案例，在w3cplus上已经有很多个，但我们一直没有放下这一块的效果制作，虽然结构与制作方法是类似的，但有很多效果实现的技巧还是略有差别，因为我们有一个目标，希望这上面展示的案例效果，能直接拿到项目中使用，另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验，来回馈广大前端人员一直对w3cplus的大力支持，希望大家喜欢。

demodownload

HTML CODE

<div class="tabs">
  <h2 class="tabs_nav"><a class="active" href="#">Log In</a><a href="#">Sign Up</a></h2>
  <div class="tabs_content_wrap">
    <div class="tabs_content">
      <form class="form">
        <p>
          <label for="login">Username</label>
          <input type="text" name="login">
        </p>
        <p>
          <label for="password">Password</label>
          <input type="password" name="password" class="showpassword">
        </p>
        <p class="form_btn">
          <input type="submit" name="submit" value="Log in">   
          <span>
            <input type="checkbox" class="showpasswordcheckbox" id="showPassword" checked="checked">
            <label for="showPassword">Remenber Me</label>
          </span>
        </p>
      </form>
    </div>
  </div>
</div>	

CSS CODE

body {
  background-color: #004c5a;
}
.demo {
  width: 410px;
  margin: 40px auto 0;
}
.tabs {
  width: 400px;
  height: 260px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.1);
}
.tabs h2 {
  padding: 10px 10px 0;
  border-radius: 4px 4px 0 0;
  background-color: #000f12;
}
.tabs_nav a {
  display:inline-block;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  padding: 0 15px;
  margin-right: 1px;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 0 #feb261 inset;
  background-color: #fc8302;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.tabs_nav .active,
  .tabs_nav a:hover {
  color: #333;
  text-decoration: none;
  box-shadow: none;
  background-color: #fff;
}
.tabs_content {
  padding: 20px 85px;
  line-height: 24px;
}
.tabs_content input[type="text"],
.tabs_content input[type="password"] {
  width: 100%;
  height: 30px;
  padding-left: 5px;
  border: 1px solid #ddd;
  border-radius: 2px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08) inset;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.tabs_content label {
  display: block;
}
.form_btn {
  margin-top: 20px;
}
.form_btn input[type="submit"] {
  width: 100px;
  height: 30px;
  border: 1px solid #b5b5b5;
  border-radius: 2px;
  background: -webkit-linear-gradient(top,#fefefe,#e6e6e6);
  background: -moz-linear-gradient(top,#fefefe,#e6e6e6);
  background: -o-linear-gradient(top,#fefefe,#e6e6e6);
  background: -ms-linear-gradient(top,#fefefe,#e6e6e6);
  background: linear-gradient(top,#fefefe,#e6e6e6);
}
.form_btn input[type="submit"]:hover {
  color: #fff;
  border: 1px solid #fca84d;
  background: -webkit-linear-gradient(top,#ff9320,#fa8200);
  background: -moz-linear-gradient(top,#ff9320,#fa8200);
  background: -o-linear-gradient(top,#ff9320,#fa8200);
  background: -ms-linear-gradient(top,#ff9320,#fa8200);
  background: linear-gradient(top,#ff9320,#fa8200);
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.form_btn span {
  float: right;
}
.form_btn span input,
  .form_btn span label {
  display: inline-block;
  vertical-align: middle;
}
.tabs_content input:focus{
  outline: 0 none;
  box-shadow: inset 0 1px 3px rgba(252,197,138,0.1), 0 0 8px rgba(252,197,138, 0.6);
}

demodownload

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

上次花一天的时间写了一篇《Responsive设计的十个基本技巧》，在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧，其中涉及的面也非常的广，一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度，为了能帮助大家进一步的了解和学习Responsive，今天我为大家整理了一篇《Responsive Web Design》，这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

对于今天而言，大家常见的固定布局、自适应布局，都是一种反应迟钝的Web设计，并不一种优秀的Web设计。换过话来说，如果你不能接受内在适应性的Web页面（此处的内在适应性网页是指，你的Web页面能自动的适应各种设备的显屏，并且能够轻构的实现内容在不同设备的显示与否），你就不是一位优秀的Web设计师。那么此时大家会问？那么我们是不是真的有必要学好Responsive设计呢？如果让我来回答，那是肯定的。就当今的信息科技，我们制作出来的Web页面不在是仅停留在当初的PC设备上，而且随着移动端的高速发展，使用移动端设备访问Web页面的用户群体会越来越多，也就是说，当初制作的Web页面无法满足用户的需要了，这时在大家都需要一种设计，让你的Web页面能在各种设备显屏上都得到最好的渲染。如此一来,Web页面的未来就是Responsiv设计。

一、Responsive的优势

扯了这么多，很多人肯定会问？Responsive究竟有什么优势呢？根据我个人对Responsive设计的学习，我总结了一下（总结的不好之处希望大家多多指点）：

1. 一个Web页面能适应各种显屏；
2. 较大的缩短了开发者开发网站的周期；
3. 具有良好的SEO功能，易于google搜索；
4. 给用户更多的选择。

知道了Responsive设计的优势，你是否有一种想深入的冲动呢？如果你有的话，我建议你花点时间继续往下阅读，我想你会有所收获的。

二、Responsive的术语

在学习Responsive设计时，有几个术语大家很有必要先了解一下，因为这几个术语是Responsive设计中很关键的部分，了解他们，对于学习Responsiv设计会有很好的帮助。

1、流体网格(Fluid Grids)

流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是能让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

扩展阅读：

1. 30+ CSS Grid System
2. 8个实用的响应式设计框架
3. CSS布局——960gs
4. Design by grid
5. Rolling Your Own Grid Layouts on the Fly Without a Framework
6. Setting Type on the Web to a Baseline Grid
7. Fluid Grids
8. Contextual Fluid Grids
9. Adaptive CSS-Layouts: New Era In Fluid Layouts?
10. CSS Grids

2、弹性图片（Flexible Images）

弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情：

img {
  max-width:100%;
}

如果在reset.css样式中直接重置了的话，要非常小心，因为上面的样式会在IE8中存在一个严重的问题，让你的图片不会显示，所以最好在样式中为IE8浏览器重新设置过一个样式，以免造成图片不显示。

当然除了上述简单的方法之外，还可以使用一个相对复杂的方法，使用图片img的自定义的“data-”属性来实现图片在不同设备的显屏下的图片文件。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

那么我们要样式中可以这样使用，以达到弹性图片的设置：

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

扩展阅读：

1. Adaptive images: solving the responsive image problem
2. Responsive Images Without JavaScript
3. How to style flexible images for RWD
4. Adaptive Images for Responsive Designs
5. Rundown of Handling Flexible Media
6. On Responsive Images
7. Responsive images: what's the problem, and how do we fix it?
8. Responsive Images: How they Almost Worked and What We Need
9. Responsive images without Javascript
10. Responsive Image Techniques & Resources

3、CSS3 Media Queries

Media早在CSS2中就有，但Media Queries在CSS3中得到了强大的扩展。这个属性能让你在制作Web页时根据用户的设备判读不同的样式文件。简单的说，他可以根据浏览器窗口的大小，方向、屏幕规格选择对应的样式文件。这也是Responsive设计中最关键的一个应用。

简单的可以看看下面的示意图：

这个时候可能会问？如何设置其中的尺寸临界点呢？这方面不用害怕，有人整理过了，我也收集了一些关于Media Queries的模板，感兴趣的可以点击这里。

扩展阅读：

1. Responsive设计和CSS3 Media Queries的结合
2. CSS3 Media Queries
3. CSS3 Media Queries模板
4. 使用em单位创建CSS3的Media Queries
5. Responsive Web Design: Layouts and Media Queries
6. Create a Responsive Web Design with Media Queries
7. Responsive Web Design in Sass: Using Media Queries in Sass 3.2
8. The EMs have it: Proportional Media Queries FTW!
9. Media Queries In Responsive Web Design
10. A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
11. Responsive Design and Media Queries

4、屏幕分辨率（Screen Resolutions）

屏幕分辨率从字面上大家应该很好理解，简单点说就是用户显示器的分辨率，深一点说，屏幕分辩率指的是用户使用的设备浏览您的Web页面时的显屏分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。从前面的Media Queries得知，Responsive设计利用Media Queries属性针对浏览器使用的分辨率来选择对应的CSS样式文件。因此屏幕分辨在Responsive设计中是一个很重要的东西，因为只有你知道了你的Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式文件。

5、主要断点（Major breakpoint）

主要断点，大家对于这个词来说应该是陌生的，在Web开发中，很少有听到过这个词，我也是最近才听到的，并做了一个简单的了解。前面在介绍Media Queries时，有人应该在想，其中的min-width和max-width对应的属性值是怎么来的。其实我们的断点就是为他们服务的。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。我截了几个关键图，用来帮大家了解断点与Media Queries的关系

上图简单的告诉我们，这里有三个主要断点，每个断点调用了一个不同的样式文件？那么我们如何来确定主要断点和次要断点呢？继续看下图：

上图告诉我们，一个style.css样式文件运用在我们的Web页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然我们还可以使用另外一种方法，也就是在不同的断点加载不同的样式文件，如下图所示：

这样主要的断点直接就影响了Web的主要布局，如图所示：

上图中的（P=portrait）、（L=Lndscape）、（L*=landscae w/ native viewport adaptions）。

我们还可以在上面的主要断点上做一定的细化：

在这张示意图上，很明显的可以看出，除了三个主要断点，还在这个基础上添加了三个次要断点，服务于另外三种情况下的分辨率布局效果。除此之外，还可以继续细化：

正如大家所看到的，虽然在主要断点的基础上增加了许多次要断点，但还是会存在一定的风险，如下图所示：

此时或许你会思考，有那么多的未知尺寸，为了适应这些不同分辨率浏览器的显示，我们有必要添加那么多的次要断点？或者说设置这么多断点，值得？这上问题让大家去思考，因为我无法找到答案。

通过对Responsive优势和常用术语的了解后，我们对Responsive多少有些了解，但你是否有想过下面几个问题呢？要是你没有想过，我觉得我们很有必要的做下来起一下，然后思考一下，最好还能进行碰撞一下，这样大家对Responsive设计才有更深的了解。

一、Adaptive和Responsive的PK

Adaptive就是我们常说的自适应布局，使用这种布局就是我们常见的百分比布局，他能让你的布局在不同的分辨率下适应其大小，但这种布局往往我们需要一个最小宽度来辅助实现，不然在一定尺寸下，整个布局就会出现问题，简单点说，这种布局也是让你的列设置了一个固定值，只不过这个固定值不是“px”而是“%”。Responsive是一个多列的流体布局，其利用Media Queries来实现Web页面在不同分辨率下达到完美的呈现形式。从页面展现的效果，往往给人造成的视觉误差就是，Responsive就是自适应布局，这也是常常有人说Responsive是一种自适应布局，但当你真正了解了他与自适应布局的差别后，你就会完全改变这种看法。有关于他们两者详细的对比，你要是感兴趣的话，可以狠狠的点击ADAPTIVE AND RESPONSIVE WEBSITE DESIGN，你会了解的更清楚些。

二、有用的EM宽度

em是css是的另一个度量单位，其和font-size有很大的联系，那么这个em单位，和Responsive扯上什么样的关系呢？简单点说，em值比px值做为Responsive的断点会更有灵活性。他能让你的断点根据不同的字号大小来相对调整其值，比如说，“body”的“font-size”为默认的16px时，断点值可以：

20em  =  20 * 16 = 320px
30em  =  40 * 16 = 480px

这个时候，我们的模板就可以换成：

/* ===== == = === 20em (320px) === = == ===== */

@media only screen and (min-width : 20em) {

}

/* ===== == = === 30em (480px) === = == ===== */

@media only screen and (min-width : 30em) {

}

/* ===== == = === 37.5em (600px) === = == ===== */

@media only screen and (min-width: 37.5em) {

}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {

}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {

}

/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width : 68.75em) {

}

/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {

}

为了让大家对Responsive有一个更好的理解，我引用了几段话：

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Resonsive web design represents a fundamental shift in how we'll build websites for the decade to come.

Jeffrey Veen

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

Ethan Marcotte

Web design is responsive design,Responsive Web Design is web design, done right.

Andy Clarke

Stop Thinking in Pages. Start Thinking in Systems.

Jeremy Keith

除了他们说的之外，Google也这样建议：

Google recommends webmasters follow the industry best practice of using resonsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

看到这里，你有没有收获？同时你有没有想继续学习Responsive的冲动呢？如果有的话，我在这里为大家推荐一些学习资源：

优秀文章

1. RESPONSIVE DESIGN WEEKLY
2. All Responsive web design articles
3. Responsive Web Design
4. 5 Really Useful Responsive Web Design Patterns
5. Responsive Web Design: What It Is and How To Use It
6. How To Tune-Up Responsive Design Websites To Improve Mobile SEO
7. Responsive Web Design Interactive Infographic
8. Beginner’s Guide to Responsive Web Design
9. How to get started with Responsive Web Design
10. Posts Tagged ‘Responsive Web design’

优秀教程

1. Responsive Web Design, Most Complete Guide
2. 5 Useful CSS Tricks for Responsive Design
3. How to Turn Any Site Into a Responsive Site
4. Create a Responsive Web Design with Media Queries
5. RESPONSIVE IMAGE GALLERY WITH THUMBNAIL CAROUSEL
6. Handling typography for responsive design
7. 30+ Responsive Web Design Tutorials
8. 35 Responsive Web Design and Development Tutorials
9. 15 Detailed Responsive Web Design Tutorials
10. 30 Useful Responsive Web Design Tutorials

Responsive技巧

1. CSS Transitions and Media Queries
2. Responsive Data Tables
3. Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens
4. CSS Media Queries and Using Available Space
5. A introduction to Responsive design techniques

RESPONSIVE IMAGES, RESPONSIVE VIDEOS

1. Fluid Images
2. Responsive Image: Experimenting With Context-Aware Image Sizing
3. Responsive Images and Context-Aware Image Sizing
4. Responsive Images Right Now
5. Responsive Images Using CSS3
6. Responsive Images Using Cookies
7. Responsive Images With ExpressionEngine
8. CSS: Elastic Videos
9. Resizeable Images (At Full Resolution!)

Responsive工具

1. 15+ Responsive设计的测试工具
2. Respond.js
3. WebPutty: Scientific Progress CSS Editing
4. Debugging CSS Media Queries
5. Responsive Design Testing
6. Responsive Containers: Selector Queries
7. Resize My Browser
8. Media Query Bookmarklet
9. Responsivepx
10. ProtoFluid
11. Fluid Grid Calculator
12. Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko
13. Scherzo, a Responsive WordPress Theme

Responsive模板

1. 320 and Up
2. Media Queries for Standard Devices
3. Mobile Boilerplate
4. Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Responsive框架

1. 30+ CSS Grid System
2. 8个实用的响应式设计框架
3. 16个优秀的Responsive CSS框架

Responsive工作流和策略

1. The Responsive Designer’s Workflow
2. The Goldilocks Approach to Responsive Web Design
3. Content Choreography
4. Structured Content First
5. Design for a Target Experience First
6. More Responsive Design, Please
7. Breaking Development
8. Patterns for Multiscreen Strategies
9. Responsive Web Design from the Future
10. Developing a Progressive Mobile Strategy
11. How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

W3cplus上的Responsive教程与资源

1. Responsive设计的十个基本技巧
2. Responsive设计的关键三步
3. 了解Responsive网页设计的三个特性
4. Responsive设计和CSS3 Media Queries的结合
5. 使用em单位创建CSS3的Media Queries
6. CSS3 Media Queries模板
7. CSS3 Media Queries案例——A List Apart
8. CSS3 Media Queries案例——Hicksdesign
9. CSS3 Media Queries案例——Tee Gallery
10. 20款Responsive Menu教程
11. 手机上网站导航的制作
12. 8个实用的响应式设计框架
13. 30+ CSS Grid System
14. 12个优秀的Responsive LightBox特效
15. 15+ Responsive设计的测试工具
16. 16个优秀的Responsive CSS框架
17. 37个极具创意的响应式布局网站

上面这些是我整理的一些教程与资源，希望大家喜欢，更希望这些资源与教程对大家学习Responsive设计能起到实质性的帮助，不过为了随时掌握Responsive设计最新资源和相关案例，我特别推荐两个站点，希望大家今后能观注：

1、RESPONSIVE DESIGN WEEKLY

2、Media Queries

那么有关于Responsive设计，今天就和大家聊到这里，希望今天这篇博文大家喜欢，如果你有更好的资源或者想法，随时欢迎一起探讨，我们后期也会继续为大家推荐一些有关于Responsive相关资源与教程，希望大家继续观注W3cplus相关更新。

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

css3一个重要的部分就是引入了多种颜色格式。各种颜色的使用在透明度/css3渐变等应用非常广泛。(css3背景渐变的讲解可见)
但是我们写样式的时候常常被颜色的写法弄晕。

今天就教大家实现一个简单的颜色转换器。

关于css3颜色的详细介绍可以点击这里，也可以看看本站的玩转CSS3的颜色

目标：实现一个颜色转换器，支持rgba颜色，hex颜色与滤镜颜色互相转变。

思路：

我们首先要明确转换的规则。

rgb与hex的一个简单对照：

关键字      hex颜色      rgb
yellow      #FFFF00      255 255 0
white       #FFFFFF      255 255 255
red         #FF0000      255 0 0

更加详细的英文颜色对照表请参考网页颜色英文代码全集,大家可以看到rgb颜色其实是r g b 三个部分组成的。

其实是hex颜色 每两位分组，之后从16进制转为十进制即可。

同样，我如果知道rgb颜色，想把它转为hex，只需要把r,g,b三个部分分别转为十六进制即可。rgba的a主要是操纵的透明度。范围从0-1.
而ms渐变滤镜支持单一颜色。也支持透明度，他的形式是这样的

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000')

其中StartColorStr 和 EndColorStr颜色组成:

# + 透明度 + hex颜色。透明度是通过下列公式计算出来的：

算法: Math.floor(opacity(0-1)* 255).toString(16);

举个例子。我们想得到透明度30%的背景色#000000。则用Math.floor(0.3* 255).toString(16)=4c 之后拼起来：

#4c000000
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000')

关于ie滤镜的详细用法参考Gradient Filter

实现方法

可以看出上述思路的核心是“进制转换”，而进制转换在javascript中我们可以利用toString方法。

方法:Number.toString()

将数字转换为字符串。用它的参数指定的基数或底数（底数范围为2-36）。如果省略参数，则使用基数10。当参数值为2时，返回二进制数。

var a = 34;
document.write(a.toString() + "<br />");
document.write(a.toString(2) + "<br />");
document.write(a.toString(8) + "<br />");
document.write(a.toString(16) + "<br />");

补充toString相关(javascript中，toString方法是每个对象都有的方法，并且是一个非常强大的方法。他的使用范围也很广 。方法的基本用法：JavaScript toString() 方法、JavaScript函数补完：toString()而实际应用的时候，javascript内部很多方法都会调用对象自身的toString方法。

1. 如 alert() toString()，一个会自动调用的方法
2. 如 加运算（javascript高级程序设计第二版 p42加性操作符之加法）
3. 减运算（注意区别）（javascript高级程序设计第二版 p43加性操作符之减法）
4. 一元加减操作符(注意与+号的区别)（javascript高级程序设计第二版 p31-p33 操作符部分第一节）

而对象自身的toString方法可以被重写。另外呢，覆盖对象的toString方法不会被for in遍历出来，这个感兴趣的可以自己了解。各浏览器中用 for in 可以遍历对象中被更新的内置方法存在差异

注意toString还有一点，数字的字面值（literal）不是对象

2.toString(); // 出错：SyntaxError

解决方法：

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算

扯了这么多，我们来讲讲写法：首先呢，接收用户的参数。这个参数可能是hex颜色(#fff,#ffffff)之类,可能是rgba颜色 (rgba()),那么首先我们就要去分出三种情况。仍然可以利用正则表达式来判断。

1. 可以利用/r/.test(val) 判断是否含有"r"这样就可以判断用户输入是rgba颜色。
2. 可以利用/#/.test(val) 判断是否含有“#”(hex颜色）
3. 之后可以用 val.match(/\d+/g)，他的意思是，匹配一个或者多个数字。

那比如'rgba(255,255,255)'.match(/\d+/g),结果就是:["255", "255", "255"]，利用数组下标就可以方便的进行处理。上代码吧~

/**这个函数主要是把rgb颜色转为hex颜色**/
function toHex(r, g, b) {
  Pr = r.toString(16).length == 1 ? (0 + r.toString(16)) : r.toString(16)
  Pg = g.toString(16).length == 1 ? (0 + g.toString(16)) : g.toString(16)
  Pb = b.toString(16).length == 1 ? (0 + b.toString(16)) : b.toString(16)
  return Pr + Pg + Pb
}
/**这个函数是主要入口**/
var parseColor = function (val, op) {//接收两个参数：颜色值跟透明度
var r,
    g,
    b,
    op = op || 1,
    hex,
    filter;//我们利用var 多个变量名逗号的方式定义多个变量
// 默认rgb
if (/r/.test(val)) {//抽出rgb
var arr = val.match(/\d+/g);
r = parseInt(arr[0]);
g = parseInt(arr[1]);
b = parseInt(arr[2]);
op = op;
hex = '#' + toHex(r, g, b);//转到hex方法，拿到hex颜色。
filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
// 进制转换
else if (/#/.test(val)) {
hex = val
var len = val.length;
// #ffffff
if (len === 7) {//输入的是七位#ffffff 那么利用slice方法，每两位分组。去掉前面的#
  r = parseInt(val.slice(1, 3), 16);
  g = parseInt(val.slice(3, 5), 16);
  b = parseInt(val.slice(5), 16);
  op = op;
  filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
// #fff
else if (len === 4) {//输入的是四位#fff 那么利用charAt方法，每一位分组，补全成两位，去掉前面的#
  r = parseInt(val.charAt(1) + val.charAt(1), 16);
  g = parseInt(val.charAt(2) + val.charAt(2), 16);
  b = parseInt(val.charAt(3) + val.charAt(3), 16);
  op = op;
  filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
 } else {//容错
  alert('颜色格式不正确,请重新输入');
}
return {//这里我们的结果返回了一个对象。可以利用对象+属性名即可取到
  'r' : r,
  'g' : g,
  'b' : b,
  'op' : op,
  'hex' : hex,
  'filter' : filter
}
};
//console.log(parseColor('#ffffff',1))
//console.log(parseColor('#fff',0.5))
//console.log(parseColor('#000000',0.3))
//console.log(parseColor('rgb(122,34,214)',0.2))

以上函数有个很重要的就是结果返回的是一个对象是键值对的形式。我们取对象值的时候，既可以利用 a.r属性来取，也可以利用a['r']属性来取，注意a['r']的引号！另外这里我们用var定义了一个函数，这叫做函数表达式。以后的文章会讲解到。

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

冒泡排序

冒泡的原理是让最大元素或者最小元素”浮起来“插入排序，选择排序，快速排序，冒泡排序都是比较排序

思路

依次比较相邻的两个数，将小数放在前面，大数放在后面。

1. step1：比较第1个和第2个数，将小数放前，大数放后。比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个数，将小数放前，大数放后。
2. step2：在第二趟：仍从第一对数开始比较（因为可能由于第2个数和第3个数的交换，使得第1个数不再小于第2个数），将小数放前，大数放后，一直比较到倒数第二个数（倒数第一的位置上已经是最大的），第二趟结束，在倒数第二的位置上得到一个新的最大数（其实在整个数列中是第二大的数）。

如此下去，重复以上过程，直至最终完成排序。由于在排序过程中总是小数往前放，大数往后放，相当于气泡往上升，所以称作冒泡排序。冒泡排序的动画效果

实现：此段代码比较简单，是属于算法里面最基础最基础最基础的代码。。。

要注意三点

1.交换类的方法在javascript中可以用 a=[b,b=a][0] 这个非常巧妙的方法来解决，

代替

var,a,b,temp
temp = a;
a=b;
b = temp

这种交换方法

2.要注意循环变量的缓存，这里缓存了array.length

3.要注意内嵌的那个循环，是从第一个数比较到倒数第n个数，n则为比较的step数

function bubbleSort(array) {
  var l=array.length;
  for (var i = 0; i < l; i++) {//比较的step数为数组的长度
    for (var j = 0; j < l-i; j++) {//内嵌交换的次数是从第一个数比较到倒数第总长-n个数，n则为比较的step数
      if (array[j] < array[j - 1]) {
       array[j] = [array[j - 1], array[j - 1] = array[j]][0]//在这里交换元素
      }
    }
    for (var k = 0; k < l; k++) {
      console.log(array[k] + ",");
    }
   console.log('这是第'+(i+1)+'次排序')
  }
}
var a = [6,54,6,22,5,7,8,2,34];
bubbleSort(a);

动画效果

插入排序（Insertion Sort）

常简单，就是我们摸牌插牌的步骤！

思路：

1. 首先假设我们摸了一张牌，我们手里目前所有牌设为empty = []摸了一张push(arr[0])
2. 取出下一个牌，设为a，在我们所有的牌empty(已经排序)从后向前扫描
3. 如果手里这张牌empty[empty.length-n]（已排序）大于新元素，将该牌移到下一位置(腾空间)empty[empty.length-n]= empty[empty.length-n+1]
4. 重复步骤3，直到找到已排序的牌empty[empty.length-n]小于或者等于a
5. 将a插入到该位置中 empty[empty.length-n]=a
6. 重复步骤2

但是javascript代码实现起来还是稍微有些难度的，代码如下：

function insert(arr) {
  var l = arr.length;
  var empty = [];//空数组，表示我们的手
  empty.push(arr[0]);//我们先摸起来一张
  for (var i = 1; i < l; i++) {//注意这里起点是1，因为我们已经摸了一张了！
    if (arr[i] > empty[empty.length - 1]) {
      empty[empty.length] = arr[i]
    } //如果比有序数组empty还大，直接放到末尾
    for (var j = empty.length; j > 0 && arr[i] < empty[j - 1]; j--) { //从最大值跟arr进行比较，为了给arr腾空。当arr<有序数组的某一位时，就不用移动了。
      empty[j] = empty[j - 1]; //向右移动
      empty[j - 1] = arr[i]; //把值放到空出来的位置上
    }
    //console.log(empty)
  }
  return empty
}

那么这里比较重要的知识点是&&符号，表示“与”，即两边的条件都要满足，表达式才成立。&&符号也可以代替if比如 if(a){fun()} 等于 a&&b,另外一点非常重要设数组是arr，则他的“最后一项” 是arr[arr.length-1]。

排序动画

选择排序(Selection sort)

也是一种简单的排序算法。

思路：

1. 把最小元素找出来-扔到数组里-再找次小的-扔到数组里，以此类推。
2. 首先在未排序数组中找到最小元素，找的方法可以利用不断判断并赋值的手段，即：设数组第一个元素array[0]为最小元素，那么“最小元素”在数组中的序号就为0
3. 之后遍历数组，若数组第二个元素比他还要小，那么说明第二个为最小元素，把“0” 更新为“1”。
4. 遍历完毕后，我们就知道这一系列的最小元素下标为“n”；直接拿出来存放到排序序列的起始位置(array[n])
5. 然后，再从剩余未排序元素中继续寻找最小元素，然后放到排序序列末尾。注意，此时遍历的下标就从1开始了。因为我们已经挑出了一个最小元素了。

以此类推，直到所有元素均排序完毕。

function selectSort(array) {
  var min;
  var l = array.length;//缓存长度
  for (var i = 0; i < l; i++) {//开始进行循环，一共循环l次，就可以找出l个元素了
    min = i;//假设第一个为最小元素
    for (var j = i + 1; j < l; j++) {//从第一个开始循环，遍历
      if (array[min] > array[j])//判断之后的是否比前面的小
        min = j;//更新“最小”的下标
      }
      if (min != i) {//这里因为是在同一个数组内进行操作，所以直接交换元素即可。比如数组第一项是i，那么我找出了最小元素为array[min],那么我就需要把这个min跟i交换。以此类推。
        array[i]= [array[min],array[min]=array[i]][0];//交换元素
      }
    }
  return array;
}

这里仍然注意的是交换的写法

array[i]= [array[min],array[min]=array[i]][0]

可以方便的把array[i]与array[min]交换~

排序动画

快速排序

快速排序是目前最强大的排序算法，算法利用了递归的思想。

思路

1. 从数组中挑出一个元素，称为 "基准"，这个可以直接利用length/2挑出来
2. 遍历数组，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。通俗来讲：男的站左边，女的站右边。。
3. 之后我们得到了一个这样的数组 array= 比基准小的部分组成的数组lArray+基准+比基准大的部分组成的数组rArray。
4. 那么我们之后只需要再把lArray,rArray进行“同样的”处理即可~
5. 这就需要用到 递归 的写法了。处理之后，lArray又分成了 lArray的基准，比lArray基准还小的，比lArray基准还大的。。
6. 那么我们不断的进行操作，男的站左边，女的站右边。。
7. 直到我们发现，lArray的长度变成1了，不足以再分下去了，我们认为排序结束。

function quickSort(arr) {
  var l = arr.length;//缓存数组长度
  if(arr.length <= 1){return arr}; //如果我们拿到的lArray,rArray长度比1都小，那就不用排了~
    var num = Math.floor(arr.length / 2);//取数组中间的那个数。注意length/2不一定是整数，用Math.floor取整
    var numValue = arr.splice(num, 1)[0];//利用splice方法，取一个元素出来，注意语法
    var left = [];//创建左边基准容器
    var right = [];//创建右边基准容器
    for (var i = 0; i < l; i += 1) {//开始遍历数组
      arr[i] < numValue ? left.push(arr[i]) : right.push(arr[i]);//男的站左边，女的站右边。。
    }
    return quickSort(left).concat([numValue], quickSort(right))//递归，继续对左右数组进行操作。
}

动画效果：

这里注意 arr.splice(num,1)虽然只抽了一个数，但splice的结果也是数组，需要[0],要不然结果就会很奇葩的出现一堆array(1)的数组了。。。splice的参考：http://www.w3cschool.cn/jsref_splice.htmlMath.floor即Math对象的参考http://www.w3cschool.cn/js_obj_math.html递归是什么：http://baike.baidu.com/view/96473.htm

以上四个算法除了快速排序，都是简单排序算法，而这四个算法在面试中考的都非常频繁~

在这里仍然要强调一点，以上的算法大量使用了循环及数组的相关知识，一定要背熟！

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

这篇文章是99翻译Nicolas Gallagher的CSS background image hacks一文。大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。

正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法实现的效果，在开始了解怎么实现这些效果之前，我们一起来看一些DEMO效果，让我们最初一个概念。

伪元素技巧不需要添加额外的HTML标签就可以填补浏览器对一些CSS特性支持的真空，甚至可以模拟一些还未进入w3c草案的CSS特性，比如今天要说的背景变换、背景透明等等。

今天这篇文章中利用到的伪元素的大部分技巧均在早前的文章Multiple Backgrounds and Borders with CSS 2.1(如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)有做过详细介绍，在这篇文章中已经详细讲解了怎样利用伪元素模拟CSS的多背景特性和CSS多边框的特效，文章的Multiple Backgrounds with CSS 2.1和Multiple Borders with CSS 2.1页也展现了一些利用伪元素来实现其他特性的基本原理。

模拟背景剪裁(DEMO)

这种方法制作的背景剪裁，目前知道的就支持：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

利用css2.1即可模拟背景裁切效果。原理是把背景图片作为伪元素的背景，而不是作为原本容器的背景。下面第一个例子的效果是裁剪一部分背景，第二个效果可以裁剪css sprite，利用这个特性来制作文字旁边的小图片:

某种程度上，相比其他可用的方法使用伪元素是有优势的，伪元素结合了一些方法的优点，而某种程度上又可以规避他们的缺点

Google、facebook、 twitter均使用空白dom元素来裁切他们复杂sprites，用来实现界面上链接旁的图标效果。

伪元素也可以用类似空白dom元素应用的方式来使用。同时，使用伪元素不需要依赖额外的html标签，而且不会过分依靠sprites。此方法的缺点是ie6，7浏览器不支持。利用此种方式，可以实现渐进增强，加强支持此特性浏览器页面的表现效果，而低版本浏览器仍采用空白元素的办法，同样可以完美的得到我们想要的效果。

这个例子展示了如何从一张排列紧密的雪碧图中裁切出你需要的图标。裁切尺寸为16*16。只需要创建一个ul列表，在需要生效的部分指定一个class即可

<ul class="actions">
  <li class="save"><a href="#">Save</a></li>
  <li class="delete"><a href="#">Delete</a></li>
  <li class="share"><a href="#">Share</a></li>
  <li class="comment"><a href="#">Comment</a></li>
</ul>

应用样式可以以各种方式展示这个列表，在此基础上我们利用伪元素，这里你完全可以把伪元素当作空白标签来使用 比如span标签。

:Before伪元素的尺寸正好可以匹配sprites的一个网格（即16*16）。同样你可以根据所裁切的部分，随意设置伪元素的尺寸

.actions a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}

.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}

有的时候你可能不只在一种状态下设置背景图片，比如说悬浮状态下需要改变背景图片的等。其实，增加hover, focus, active, 与 “.saved”的情况是为了让列表在这些情况下也能正确渲染背景位置。

.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}
.saved a:before {background-position:-32px -16px;}

将来的替代方案

将来可以用另一种方式来实现。火狐浏览器的私有属性 -moz-image-rect可以裁切背景。但这个属性不被其他浏览器支持，而且可能会被属于css3背景属性草案中的一个标识所取代。据我所知就位图图像而言，现代浏览器对于这个属性没有任何稳定的支持。

模拟背景变换(DEMO)

伪元素结合css3 transform的rotate,scale,skew属性，可以模拟背景变换。目前没有提案要求支持背景变换属性，所以伪元素技巧是唯一可以模拟此效果的方法。

旋转背景图片

刚刚讲解的背景图片裁切技术可以减少精灵图中的图片个数。我们也可以用css来实现图片的变形，而不需要使用图形软件处理。

实现上图的效果，其实很简单，其代码如下所示：

.accordion a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.accordion.open a:before {
   -webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -o-transform:rotate(90deg);
   transform:rotate(90deg);
}

若想对背景图片应用变换，而不会影响到其他元素，需要使用定位来调整背景图片的位置，详细的可以参考：Multiple Backgrounds and Borders with CSS 2.1(如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)一文。

这里我们利用了伪元素，给伪元素使用图片，之后利用绝对定位跟z-index属性定位伪元素到内容层的下面即可。

背景图片倒影效果

有时候会对背景图有这样的需求，方法类似，不过这次使用的是transform：scale属性

通过伪元素 利用transform:scaleX(-1), transform:scaleY(-1), transform:scale(-1,-1) 这三个属性你可以沿着x轴，y轴或者沿着中心轴做镜像对称。

下面的例子展示了伪元素模拟的背景变换是怎样应用在一个翻页链接上的。伪类显示了一张单独的图片，或者一张精灵图的一部分，之后进行变换。

注意rotation不能得到我们想要的效果，需要使用scale操作

.prev a:before,
.next a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.next a:before {
   float:right;
   margin:0 0 0 5px;
   -webkit-transform:scaleX(-1);
   -moz-transform:scaleX(-1);
   -ms-transform:scaleX(-1);
   -o-transform:scaleX(-1);
   transform:scaleX(-1);
}

注：这个属性ie8以下不支持，即使你用ie的变换滤镜，伪元素上也不会生效。

未来的解决方案

貌似css草案中没有相关的方案，你不需要依靠额外的标签，只需要伪元素就可以实现背景变换跟背景透视的效果。

模拟背景位置（DEMO）

Css2.1的background-position属性计算图片偏移只能从元素左侧跟上侧开始计算。这里可以给伪元素设置背景图片，之后把伪元素作为附加的背景层，即可实现从右侧跟下侧来计算背景偏移了

这个技巧可以很容易的结合其他技巧使用。更多利用伪元素实现background-position的细节可以参考:Multiple Backgrounds and Borders with CSS 2.1(如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)一文。

在这个例子里伪元素放置到内容层的下面。给伪元素设置的背景图片的大小是500px × 300px，因此我们也要设置伪元素的宽高。

利用绝对定位，我们也可以调整伪元素的位置。

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

未来解决方案

这里的css草案CSS Backgrounds and Borders module 增强了background-position的效果，使其可以从盒子模型的任何一侧开始计算。到现在为止opera11是唯一可以稳定支持这个属性的浏览器。

模拟背景透明度(DEMO)

改变伪元素的透明度跟直接操纵元素的透明度一样容易。

注：Ie8及以下利用滤镜对伪元素设置透明度是无效的

我们可以利用定位把伪元素定位在内容层下面，这样就不会影响内容了。之后利用坐标或者宽高调整伪元素的大小，使其适配内容。之后给伪元素设置背景图片，改变伪元素的透明度就可以了。

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(image.jpg);
   opacity:0.7;
}

这几种方法可以说将伪元素运用的是炉火纯青，当然他还是有一些限制的，比如说低版本浏览器的不兼容，就算是在现代浏览器中，伪元素有些效果也不被支持，比如说CSS3的animation属性在Webkit内核下就会有问题，但话又说回来，他的用处还是很多的，使用伪元素来制作阴影效果，如23 Box-shadow Effects，使用伪来制作对话气泡效果，如Pure CSS speech bubbles。当然还有很多其他的效果。这里就不一一说了。

最后希望这篇译文对大家有所帮助，特别是帮助大有增长思维。

特别声明原文地址：http://nicolasgallagher.com/css-background-image-hacks/(如需转载这篇文章请附上英文教程网址)

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