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 張鑫旭