藤藤每日一练——Ligature Icon UI

藤藤每日一练——Ligature Icon UI

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

demodownload

HTML CODE

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

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

CSS CODE

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

demodownload

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

Off White X Max 97

如需转载,烦请注明出处:https://www.w3cplus.com/demo/516.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部