CSS3图标图形生成技术我的攻略

1、人生如戏、工做亦如戏，且戏且珍惜

坊间有云：“人生如戏，全靠演技”。意思是：人生坎坎坷坷，曲曲折折，跌宕起伏，不可预知，扑朔迷离，比如是戏同样；若是演技好，能够获得人生中最重要的一张卡片——奥斯卡。

“工做如戏”是什么意思呢？此语既非来自茅草间，也非来自坊间，更非来自美利坚。虽然民间可能略闻一二，但意思与这里大不同——这里意思是：“把工做任务的完成设计成一场精彩绝伦的游戏”。

人生如戏，不尽满意。

你可能会以为你所作的工做并非本身最想要的（我想作设计，但是领导让我捣鼓代码），你可能以为你作的工做没有什么技术含量（我想写JS，但领导老是让我切图重构没有技术含量的页面），而后你以为工做缺少激情，工做得不到成长。此时，你可能不知不觉陷入一种称为”loser心态”中。

黑暗中寻找曙光，绝望中寻找但愿，枯燥中寻找激情，永不放弃，永远积极，这样的心态会让你克服一个个困难，走得更高更远。

提及来容易，作起来难。如何才能让你以为“重构”不是一门枯燥的工做呢？

前段时间看到个新闻，一个10岁很会游泳的小男孩被泳池过滤设备吸住了手，工做人员所有死命往外拉（大吸力，显然拉不出来），而没有一我的想到去切断电源，结果将来的游泳之星就这样陨落了！

人老是不自禁关注眼前，而忽略问题解决之根本。工做以为枯燥了，想到的就是换份工做，多吐槽和抱怨，而不是想办法让本来枯燥的工做变得funny~

想一想本身，你有没有以下的古怪或不古怪的行为：

1. 每次使用不一样的方式实现；
2. 寻找规律，制做工具；
3. 尝试本身发现的或业界流行的新技术；
4. 故意去犯错去看看会不会有精彩的事情发生；
5. 藏个彩蛋自娱自乐；
6. 故意给本身出难题，去攻克它；
7. 跟本身的爱好套近乎，动漫 or 游戏？

最现实的例子就是我写文章。每次都是一个调调的技术文章，很枯燥，如何变得funny~

1. 尽可能使用不一样主题；
2. 制做一些传图工具，表情集；
3. 关注新技术，多些新段子；
4. 抛出犀利话题引起争论快速成长；
5. 我会告诉你右侧栏能够收起？
6. 小tip也能写出大文章；
7. 本文走“游戏”主题~

因此，若是有哪位盆友以为成天切图无聊，没有技术含量，那是你本身没有让切图变得有趣，变得充满挑战。

拿我本身当板栗，鄙人不才，重构页面多年，经手的图标可估计以绕地球2圈了。而我如今的工做内容基本上仍是如此，若是处理图标是枯燥，拿我岂不是要枯成荒草！然而，我如今依旧水灵灵帅锅锅一枚啊！//zxx: 我仿佛听到了我老婆在家里吐的声音

最近一个项目，有不少图标须要处理，最简单最省心的方式就是搞个格栅背景，蜂窝结构，把设计图上的图标一个一个放进去。CSS定个位，任务完成，跟设计图效果同样，保证没人会提bug.
可是，你们不以为这样很不funny吗？

2年前我以为不够funny的时候，基本上是国内很是早在实际项目中使用font-face自定义字体图标的。我刚查了下，原来不止2年了，11年时候就使用了。

可是，PC小尺寸下的锯齿以及额外的请求以及维护成本，也让我以为也没那么funny. 目前在PC上更多的是小范围base64格式使用，既没有额外请求，也能够Gzip.

听说阿里巴巴推出的矢量图标库，Iconfont.cn.
其中涵盖了1000多个经常使用图标，并在持续更新中，提供了如
在线图标搜索、图标分捡下载、在线储存、矢量格式转换、图标库管理
等功能。很相似于我几年前介绍的
IcoMoon,
不过早已屡次换代整容不识旧貌了。

如今我又以为不够funny, 我把眼光投向了CSS3图形生成，即没有严重的锯齿问题，也支持Retina, 也没有额外请求，自身维护也更方便。//zxx: 过两年，我说不定又以为不够funny, 眼光投向了SVG图形生成。

CSS3图标图形的生成的灵感要追溯到差很少2年前，当时浏览过一个名叫one-div的网站，顾名思意，一层DIV实现各类各样的图标。来，给你们截个图瞅瞅：

当时扁平之风还未盛行，设计师的图标仍是多彩+渐变，one-div的作法还实现不了；现在的设计趋势让font-face以及CSS3图形在web重构史上添加了浓重的一笔。或者多是font-face以及CSS3图形的发展促使了设计的扁平化盛行。

font-face愈加被人关注，使用日趋成熟。可是，CSS3图形想要实际应用，面向广大用户，仍是须要一些挑战的，阻碍必定不小，挫折必定很多，犯错也逃脱不了。可是，这就是我想要的。有挑战的不枯燥的工做，充满funny, 有不断犯错的机会，这会让我更快速成长。

So, 若是你以为切图无聊，究竟是切图自己无聊，仍是你本身就抱着那点通俗技术作重复工做而以为无聊呢？机会是本身创造的，这点都不认识的人，还期望别人带你快速成长，期望呆在一个土豪团队，拜托，这跟小妹妹看童话故事没什么差异！

工做如戏

如今，不妨把CSS图标图形生成看作是本身设计的一款精彩游戏。有限资源高保真实现设计师全部图标为游戏通关，每个技术难度为一个关卡。让咱们像玩游戏同样，出色地完成咱们的工做吧\~\~

//zxx: 本文篇幅不小，若是时间不充足，建议mark下下次时间充足时候再看，以避免遗漏一些tips.

2、游戏的基本装备与道具

one-div所展现的图形实现只能称之为概念版，我的站点，内部项目能够直接套用。面向实际，则考虑的问题就多了——

1. 兼容 IE7-IE8不支持CSS3, 如何向下兼容（IE6被砂糖变成玩具了）；
2. 工业化 如何大规模使用，如何规范化，如何传播与普及；
3. hover态变化 图标有时候是按钮，须要hover态颜色变化，如何方便实现；
4. 设计匹配 逼真模拟设计师图标，肉眼范围内看不出差别；

看来难度不小，因此，游戏开始的时候，咱们须要准备适合的装备和道具。

装备

为了兼容，咱们的装备只能是经过旧装备升级。

首先要明确咱们游戏中的新旧对象分别指：IE9+/Chrome/FireFox/Opera/Safari和IE7-IE8.

之前，咱们使用Sprite背景图片实现一个图标，多是这样：

<i class="ico-example"></i>

.ico-example { display: inline-block; width: 20px; height: 20px; background: url(example.png) no-repeat 0 -20px; }

IE9+等现代浏览器显然不使用背景图片，所以，须要这么一句CSS：

:root .ico-example { background-image: none; }

配合特定道具，就能够开始咱们正确的游戏征程了！

道具

CSS3图形生成的主要道具就是::before和::after伪元素，这里的双冒号伪元素IE9+以及其余现代浏览器浏览器认识。IE7/IE8不能识别。//zxx: IE8只认识:before, :after.

所以，伪元素图形对旧方法实现的IE7/IE8浏览器不会产生任何影响。

可是一个标签最多::before和::after两个伪元素。若是图标略复杂，两个标签是无法使用简单的方法模拟出来的，因而，咱们须要新增一个装备，用来图形生成，同时，这个装备IE7/IE8浏览器不认识。

很简单，使用HTML5自定义标签。

我使用的标签是<z>. 你可使用<m>, <n>, 或者<ico>等等，只要是IE7/IE8不认识，同时非标准HTML5标签便可（考虑到有些项目会使用html5shiv）。

我之因此使用<z>是由于我以为比较简单以及霸气！

因而，<z>自身，以及<z>自身的::before和::after伪元素，咱们总共有5个元素供咱们作图形生成，绰绰有余了！

综合一下~~

装备+道具

<i class="ico-example"><z></i>

.ico-example { display: inline-block; width: 20px; height: 20px; background: url(example.png); }
/* 下面均IE9+ */
:root .ico-example { background-image: none; position: relative; }
.ico-example::before {}
.ico-example::after {}
.ico-example > z {}  /* 不必定用获得 */
.ico-example > z::before {}  /* 不必定用获得 */
.ico-example > z::after {}  /* 不必定用获得 */

心得

为了更简单实现hover态颜色变化，尽可能使用border实现。why? 后面会解释。

强势插入——Boss全攻略战果展现

对着游戏战果下面的更好讲，因而，此处强势插入战报。

您能够狠狠地对这里放大招：CSS3图标图形生成彻底攻略演示demo

从效果上看，浏览器彻底兼容（HTML骨架一致）。

例如，IE9浏览器下截图（CSS3生成）：

IE8浏览器下截图（传统Sprite背景图）：

有个2倍放大按钮，咱们点击一下，就看以看出CSS3生成的好处了：

2倍放大IE9浏览器：

2倍放大IE8浏览器：

看以看到，CSS3生成的小图标在放大的时候，依然犀利哥的模样，可是IE8传统Sprite图标放大时候一副捣糨糊的模样。

Retina视网膜屏幕相似于2倍或其余倍数的放大效果。CSS3生成的图标在这些屏幕上的显示效果会让你爱不释手；传统的Sprite背景图标你须要准备2套尺寸，之后再来个设备像素比为3的屏幕，某非还要维护3套？！

咱们还要认清一个事实，目前，凡是出现的Retina视网膜屏幕都不可能使用IE8浏览器。哦，原来你的mac装了win xp系统，抱歉，我纠正下，除了一些极品状况，咱们能够放心使用这里的Sprite+CSS3兼容策略，毫不会玷污你的Retina屏幕的。

3、攻克点线关卡

有些小boss图标关卡是有点和线构成的。CSS生成点或者线方法不少，尤为咱们这里是面向IE9+.
边框、背景色、盒阴影。正如我上面建议的，尽可能使用border实现。一个元素能够准确控制两个平行对称的点或者线。

因而，下面这个图标，咱们须要4个标签搞定（同色的为一个标签实现）。

例如，左边的两个绿色点：

{ width: 2px; height: 8px; border-top: 2px solid #777; border-bottom: 2px solid #777; }

CSS2.1时代就兼容的生成小tip, 都懂的，就再也不刷油漆了。

//zxx: 4标签生成建议使用后面四个选择器，便于定位。.example::before, .example::after, .example z::before, .example z::after.

4、攻克矩形关卡

有些小boss图标关卡是多条线合体的矩形。第一反应确定就是border实现。

因而，下面这个图标，咱们须要3层标签实现：

例如，左上的绿色折线：

{ width: 5px; height: 10px; border-top: 1px solid #777; border-left: 1px solid #777; }

//zxx: 3标签 建议使用后面3个选择器，便于定位。.example::before, .example::after, .example z.

5、攻克圆形关卡

有些小boss图标关卡是矩形整容的圆形。跟矩形相比，无非就是多了个border-radius.

因而，下面这个图标，咱们须要2层标签实现：

圆圈圈实现：

width: 14px; height: 14px; border: 1px solid #777; border-radius: 14px;

里面的感叹号使用border真正好：

width: 2px; height: 1px; border-top: 2px solid #878787; border-bottom: 5px solid #878787;

//zxx: 2标签 能够将z标签除去。直接.example::before, .example::after控制。

6、攻克三角关卡

border生成满色三角可参见我10年文章：“CSS border三角、圆角图形生成技术简介”。

本文攻略demo的那个三角是我本身P的，实际设计师设计的图标是三角折线（这个实现有难度，须要1像素折线拉伸），为了演示，因此这里为色块三角，因此风格略不入。

因而，下面这个图标，咱们须要4层标签实现：

其实彻底实现上面效果，彻底线模拟是最好的。可是，咱们是演示，演示，那句话怎么说来着。。。认真你就输了~~

例如，绿色三角实现：

{ width: 1px; height: 0; border: 3px solid; border-bottom-color: transparent!important;  border-left-color: transparent!important; border-right-color: transparent!important; border-top-color: #777; }

//zxx:上面的!important是为了能够通用hover变化CSS. 1像素的宽度是为了棒棒正好查到两腿的正中间。

7、攻克旋转关卡

越日后，boss越强。以前的boss都是傻不拉几方方正正规规矩矩的，例如会出现斜线，咱们须要新技能，例如，旋转：

跟我一块儿念：“巴拉巴拉小魔仙，转转转……”

.ico-share::before, .ico-share::after { border-top: 1px solid #6d6d6d; width: 7px; }
.ico-share::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
.ico-share::after { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }

因而，魔法生效，boss被攻略，上面绿色斜线效果实现，捡钱捡装备。

//zxx: transform变换中的-ms-前缀不能省，不然IE9浏览器它不认识。

8、攻克拉伸关卡

boss原来越强，愈来愈变态，怎么办？例如，梯形线，或者非对称折线。立刻，奥特曼附体，新技能走起，例如，拉伸：

上面图标2标签实现，可是，下面的小尾巴是实现的难点。咱们能够直角折线（矩形两邻边）skew拉伸一下下：

width: 3px; height: 3px; border-right: 1px solid #777; border-bottom: 1px solid #777; border-bottom-right-radius: 1px; border-bottom-right-radius: 1px; -webkit-transform: skewY(45deg); -ms-transform: skewY(45deg); transform: skewY(45deg);

//zxx: 1像素的border-radius能够去除部分浏览器下border交叉残留的杂点。

9、攻克弧线关卡

这个boss好生厉害，弧线，与“狐仙”谐音，莫非是狐仙女朋友所幻化，怪不得如此了得。

怎么破？

此时必需要开挂了！猪脚光环起~~潜力暴走，以前的border-radius技能瞬间照亮整个宇宙。

border-radius不只仅生成圆和椭圆那么简单，还能够生成标准弧线。下面修正图（原图有错误）来自Vivien的border-radius不只仅是圆角一文。

显然，设定不一样的纵横圆角大小，就能实现咱们想要的弧线效果：

width: 5px; height: 10px; border-top: 1px solid #6d6d6d; border-left: 1px solid #6d6d6d; border-top-left-radius: 5px 10px; border-bottom-left-radius: 5px 0;

若是一时间脑子没扭过来，能够本身再慢慢体味下~~非本文重点，不展开 。

10、无敌大招

若是遇到终极开挂，系统bug级的大boss, 前面的任何技能、大招、哪怕是挂上加挂都无论用，能够试试这个自损八百的大招——box-shadow终极生成。

继续下文以前请先参阅“CSS3 box-shadow盒阴影图形生成技术”一文，提供了一个box-shadow生成工具。简言之，box-shadow能够1个标签生成任意图形，小小图标boss更是不在话下。

这里也可使用4标签border生成，演示须要，这里box-shadow实现，你们不要太认真。

咱们能够把上图全部的灰色当作是绿色小矩形的投影，因而，以下技能攻略boss:

height: 2px; width: 0; border-left: 1px solid #777; box-shadow: 1px -1px #777, 2px -2px #777, 3px -3px #777, -1px -1px #777, -2px -2px #777, -3px -3px #777;

11、结语与其余补充

其余transform技能

有时候，设计师设计的线条不是很干净的1像素或2像素，此时，单纯1像素模拟就显细，2像素又过粗。试试transform scale 1.5倍。利用浏览器自身的渲染。

以上全部技能几乎没有应付不了的小图标。包括这样子的：

所谓图形生成，本质上就是些零件的组装，技能的组合。

background-clip技能

单纯border只能2条平行线。活用background-clip + background-color能够3跳平行线，并且，中间那根能够不等宽，不等间距。

例如：

<div style="height: 1px; width: 20px; padding: 5px; border-top: 1px solid #777; border-bottom: 1px solid #777; background-color: #777; background-clip: content-box;"></div>

效果为：

关于为什么推荐border模拟

单纯生成，咱们能够大肆使用background以及box-shadow. 可是，实际开发的时候，图标常按钮，还有一个hover态，并且一个站点图标十几二十来个是很正常的。使用background或box-shadow的问题在于，虽然hover上去变化的都是一个颜色，可是不能一段CSS通用。只有border能够解决，由于，没有宽度的border即便赋予的border-color也不会有任何变化.

demo通用hover CSS代码以下：

一块儿加入CSS3图标图形生成的游戏中吧~~

对了，首先，你得有一个靠谱的设计师同事……

---

by 张鑫旭