藤藤每日一练——Ligature Icon UI
发布于
藤藤
大家好久没有看到藤藤的每日一练了吧，会不会觉得少了什么？难道藤藤同学不写案例了吗？不是的，因为最近我和藤藤一起在整理ICON UI的库，希望这些UI的库能帮助大家解决一些ICON的制作时间，做到拿来就可以用。这些ICON UI我们都是使用字体来制作的，用到的就是ＣＳＳ３的＠font-face属性，制作方法简单。只是类名和实体符的对应，大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature Symbols，希望大家喜欢。
HTML CODE
<a href="#" class="icon file"> <span> <em>file</em> <em></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;
}
如需转载，烦请注明出处：https://www.fedev.cn/demo/ligature-icon-ui.html
Off White X Max 97