來铃辖，干了這碗安利
寫這篇文章的目的其實(shí)就是為了安利一下我的圖標(biāo)庫：iconoo，所以猪叙，開門見山娇斩，star吧少年少婦們Ｈ示怼（這樣的我是不是應(yīng)該要加個github互星的團(tuán)伙了？）
正題說完了犬第，下面說說主題锦积。
在web開發(fā)中，我們經(jīng)常要用到一些小圖標(biāo)（加減勾叉等）歉嗓。通常做法就兩種：
- 直接使用圖片丰介；
- 使用css/svg直接在瀏覽器中繪制圖標(biāo)。
方案1：由于圖標(biāo)圖片比較多鉴分，而且體積很小哮幢，為了減少請求所以很多時候我們會用雪碧圖這種技術(shù)來將圖標(biāo)拼湊在同一張圖片里面。你也能想到志珍，一堆圖標(biāo)的雪碧圖橙垢，修改維護(hù)會相當(dāng)麻煩！現(xiàn)在比較好的方案是使用webpack引入圖片碴裙，小圖直接轉(zhuǎn)換成base64插入css中钢悲。直接使用圖片比較簡單，這也是目前比較主流的做法舔株。
方案2： 相比方案1莺琳，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標(biāo)载慈，而且不受圖片尺寸限制惭等，可大可小非常靈活。初看方案2的一堆代碼可能會覺得非常難办铡，但其實(shí)很多簡單的圖標(biāo)都是非常容易實(shí)現(xiàn)的辞做。
接下來就是妹子們最期待的茄果叔叔手把手教學(xué)時間啦。
手抓手教學(xué)時間
使用CSS繪制線條寡具，用到的不外乎兩個屬性：border & box-shadow秤茅。而形狀則可以用border-radius、transform控制變形童叠，位置則會用到絕對定位框喳、transform、margin等屬性來調(diào)整厦坛。CSS的繪圖五垮，做過幾個就知道大概是怎么回事了，歸根到底杜秸，還是幾何放仗。如果覺得幾何燒腦，那就直接用 iconoo 吧~~~
基本原理說了撬碟，下面來擼一發(fā)诞挨，先看看最簡單的加號：
.plus {
box-sizing : border-box;
display : inline-block;
position : relative;
font-size : 20px;
}
.plus:before, .plus:after {
content : '';
pointer-events : none;
position : absolute;
left : 50%;
top : 50%;
transform : translate(-50%, -50%);
box-shadow : inset 0 0 0 1em;
}
.plus:before {
width : 1em;
height : 2px;
}
.plus:after {
height : 1em;
width : 2px;
}
代碼還是非常簡單的莉撇，首先我們這里用到了before和after兩個偽類增加可用的標(biāo)簽，不然只有一個標(biāo)簽亭姥，要玩出花來實(shí)在是太難稼钩。content顧名思義就是內(nèi)容顾稀，里面可以加各種字符达罗，甚至是換行之類的控制符。而pointer-events:none則是消除了鼠標(biāo)指針事件静秆，這樣元素就具有穿透性了粮揉，具體細(xì)節(jié)還請自行搜索哈，這里就不多說了抚笔。繪圖的核心扶认，就是通過設(shè)置兩個偽類的寬高和陰影來繪制橫豎兩條線，位置方面是通過絕對定位+反向偏移的方式殊橙，巧妙利用了這兩個屬性百分比參照的不同實(shí)現(xiàn)了橫豎的居中辐宾。所有尺寸除了線寬（2px）外都使用em這個相對單位，所以調(diào)整font-size的值就可以調(diào)整圖標(biāo)的大小了膨蛮。要調(diào)整線寬呢叠纹，就將所有px單位的尺寸都一并改了即可。
進(jìn)階玩法
首先來看看這個圖片圖標(biāo)：
這個圖形網(wǎng)上說的應(yīng)該還是比較多的了敞葛，然而我第一眼看到的時候還是懵逼了誉察。。惹谐。分析一下持偏，最外層的邊框明顯可以用border來做，然后用個before來做圓點(diǎn)也非常簡單氨肌，關(guān)鍵是兩座大山要如何繪制呢鸿秆？box-shadow貌似可以做多層邊框呢，然后加個旋轉(zhuǎn)是不是就出來了呢怎囚？最后隱藏邊框之外的部分就可以了卿叽。繪制流程如下：
.icon-img {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 90px;
height: 80px;
border: 5px solid;
border-radius: 10px;
color: #2ba5bb;
overflow: hidden;
}
.icon-img:before,.icon-img:after {
content: '';
pointer-events: none;
position: absolute;
}
.icon-img:before {
width: 10px;
height: 10px;
top: 18px;
right: 20px;
box-shadow: inset 0 0 0 1em;
border-radius: 50%;
}
.icon-img:after {
width: 60px;
height: 50px;
left: 0;
bottom: -27px;
box-shadow: inset 0 0 0 50px,30px -20px 0 0;
transform: rotate(45deg);
}
代碼是臨時拼的，就沒做成em單位了桩了。呃附帽，為什么要做成em單位呢？
我們在使用圖標(biāo)的時候井誉，可能尺寸每次都不一樣蕉扮，但圖標(biāo)的尺寸都是有關(guān)聯(lián)的，調(diào)整起來相當(dāng)費(fèi)勁颗圣。當(dāng)然你可以會想到用zoom喳钟、scale來做縮放屁使，但是這樣的縮放線寬也會隨之變化了。設(shè)置em的話奔则，在icon級設(shè)置font-size蛮寂，然后icon本身以及后代都以這個font-size為參照，只調(diào)整font-size就完成了圖標(biāo)的等比縮放了易茬。
再來看一個帶變形的：
這個一看其實(shí)就能猜到是怎么畫的酬蹋，幾何關(guān)系貌似也比較簡單，但是要映射到css的規(guī)則里面卻非常復(fù)雜抽莱。先看看流程：
.icon-codepen {
display: inline-block;
position: relative;
box-sizing: border-box;
color: #2ba5bb;
width: 2px;
height: 10px;
box-shadow: inset 0 0 0 32px,0 15px,-11px 7px,11px 7px;
}
.icon-codepen:before,
.icon-codepen:after {
content: '';
pointer-events: none;
position: absolute;
width: 11px;
height: 4px;
}
.icon-codepen:before {
right: 2px;
top: 3px;
transform: skew(0,-35deg) scaleY(0.6);
box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px;
}
.icon-codepen:after {
left: 2px;
top: 3px;
transform: skew(0,35deg) scaleY(0.6);
box-shadow: inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px;
}
難點(diǎn)就在長寬的變形上范抓，對于變形比較簡單的方法是使用變換矩陣來求解。圖形學(xué)學(xué)的不好的話食铐，那就比較痛苦了匕垫，如果不追求單標(biāo)簽的話，可以將每條邊用一個標(biāo)簽表示虐呻，這樣就很好處理了象泵。
叔叔，我想裝逼
怎么樣斟叼？覺得上面這些都是小玩意偶惠？想裝逼了？好犁柜，叔叔教你洲鸠！
蒙娜麗莎？什么鬼馋缅？我會告訴你這也可以用一個單標(biāo)簽純CSS畫出來的嗎扒腕？
http://codepen.io/jaysalvat/pen/HaqBf ，自己看去萤悴，幾千條box-shadow構(gòu)成的蒙娜麗莎瘾腰，看的我內(nèi)分泌都失調(diào)了。覆履。蹋盆。
靜態(tài)的還不夠，那來點(diǎn)動態(tài)的：
http://codepen.io/fbrz/pen/iqtlk 硝全，不多說栖雾，拿去不謝！
更多CSS玩意兒伟众，請到codepen上去探寶吧析藕！如果codepen都打不開，可以到我博客園去下載相應(yīng)的css文件吧凳厢！什么账胧，沒有提供下載鏈接竞慢？F12大法搞起！
首尾呼應(yīng)
語文老師說了治泥，文章要首尾呼應(yīng)升華主題筹煮，so one more time：寫這篇文章的目的其實(shí)就是為了安利一下我的圖標(biāo)庫：iconoo，所以居夹，開門見山败潦，star吧少年少婦們！
