手把手教你打造一個純CSS圖標庫

來，乾了這碗安利

寫這篇文章的目的其實就是爲了安利一下個人圖標庫：iconoo，因此，開門見山，star吧少年少婦們！（這樣的我是否是應該要加個github互粉的團伙了？）

主題說完了，下面進入正題。

在web開發中，咱們常常要用到一些小圖標（加減勾叉等）。一般作法就兩種：

1. 直接使用圖片；

2. 使用css/svg直接在瀏覽器中繪製圖標。

方案1：因爲圖標圖片比較多，並且體積很小，爲了減小請求因此不少時候咱們會用雪碧圖這種技術來將圖標拼湊在同一張圖片裏面。你也能想到，一堆圖標的雪碧圖，修改維護會至關麻煩！如今比較好的方案是使用webpack引入圖片，小圖直接轉換成base64插入css中。直接使用圖片比較簡單，這也是目前比較主流的作法。

方案2： 相比方案1，明顯能夠減少資源的體積，只須要幾條css/svg命令就能夠繪製出精美的圖標，並且不受圖片尺寸限制，可大可小很是靈活。初看方案2的一堆代碼可能會以爲很是難，但其實不少簡單的圖標都是很是容易實現的。

接下來就是妹子們最期待的茄果叔叔手把手教學時間啦。

手抓手教學時間

使用CSS繪製線條，用到的不外乎兩個屬性：border & box-shadow。而形狀則能夠用border-radius、transform控制變形，位置則會用到絕對定位、transform、margin等屬性來調整。CSS的繪圖，作過幾個就知道大概是怎麼回事了，歸根到底，仍是幾何。若是以爲幾何燒腦，那就直接用 iconoo 吧~~~

基本原理說了，下面來擼一發，先看看最簡單的加號：

.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兩個僞類增長可用的標籤，否則只有一個標籤，要玩出花來實在是太難。content顧名思義就是內容，裏面能夠加各類字符，甚至是換行之類的控制符。而pointer-events:none則是消除了鼠標指針事件，這樣元素就具備穿透性了，具體細節還請自行搜索哈，這裏就很少說了。繪圖的核心，就是經過設置兩個僞類的寬高和陰影來繪製橫豎兩條線，位置方面是經過絕對定位+反向偏移的方式，巧妙利用了這兩個屬性百分比參照的不一樣實現了橫豎的居中。全部尺寸除了線寬（2px）外都使用em這個相對單位，因此調整font-size的值就能夠調整圖標的大小了。要調整線寬呢，就將全部px單位的尺寸都一併改了便可。

進階玩法

首先來看看這個圖片圖標：

這個圖形網上說的應該仍是比較多的了，然而我第一眼看到的時候仍是懵逼了。。。分析一下，最外層的邊框明顯能夠用border來作，而後用個before來作圓點也很是簡單，關鍵是兩座大山要如何繪製呢？box-shadow貌似能夠作多層邊框呢，而後加個旋轉是否是就出來了呢？最後隱藏邊框以外的部分就能夠了。繪製流程以下：

.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單位呢？

咱們在使用圖標的時候，可能尺寸每次都不同，但圖標的尺寸都是有關聯的，調整起來至關費勁。固然你能夠會想到用zoom、scale來作縮放，可是這樣的縮放線寬也會隨之變化了。設置em的話，在icon級設置font-size，而後icon自己以及後代都以這個font-size爲參照，只調整font-size就完成了圖標的等比縮放了。

再來看一個帶變形的：

這個一看其實就能猜到是怎麼畫的，幾何關係貌似也比較簡單，可是要映射到css的規則裏面卻很是複雜。先看看流程：

.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;
}

難點就在長寬的變形上，對於變形比較簡單的方法是使用變換矩陣來求解。圖形學學的很差的話，那就比較痛苦了，若是不追求單標籤的話，能夠將每條邊用一個標籤表示，這樣就很好處理了。

叔叔，我想裝逼

怎麼樣？以爲上面這些都是小玩意？想裝逼了？好，叔叔教你！

蒙娜麗莎？什麼鬼？我會告訴你這也能夠用一個單標籤純CSS畫出來的嗎？

http://codepen.io/jaysalvat/p... ，本身看去，幾千條box-shadow構成的蒙娜麗莎，看的我內分泌都失調了。。。

靜態的還不夠，那來點動態的：

http://codepen.io/fbrz/pen/iqtlk ，很少說，拿去不謝！

更多CSS玩意兒，請到codepen上去探寶吧！若是codepen都打不開，能夠到我博客園去下載相應的css文件吧！什麼，沒有提供下載連接？F12大法搞起！

首尾呼應

語文老師說了，文章要首尾呼應昇華主題，so one more time：寫這篇文章的目的其實就是爲了安利一下個人圖標庫：iconoo，因此，開門見山，star吧少年少婦們！