前言

一、縮小前端和設(shè)計之間的距離

近年來，得益于HTML5、ECMAScript 2015規(guī)范的發(fā)布和移動設(shè)備的普及，Web應(yīng)用越來越復(fù)雜，Web前端也取得了突飛猛進(jìn)的發(fā)展。在開發(fā)流程上，前端介于設(shè)計和后端之間，前端負(fù)責(zé)把后端數(shù)據(jù)展示在從設(shè)計稿轉(zhuǎn)換來的頁面元素上。這些年前端的發(fā)展離后端越來越近了，前端不僅通過Ajax和MV*框架完全實現(xiàn)了前后端分離，使后端工程師不用再把精力放在UI界面上，而且還用Node.js“侵入”了原本屬于后端的業(yè)務(wù)邏輯開發(fā)領(lǐng)域，前端工程師已經(jīng)變得越來越像后端工程師了。但是，前端本應(yīng)該站在設(shè)計和后端的中間，現(xiàn)在卻離設(shè)計越來越遠(yuǎn)了。

是否還有人記得，16年前的2003年，CSS Zen Garden（中文譯為CSS禪意花園）網(wǎng)站提供了一個固定的HTML文件，僅憑更換CSS文件就可以讓網(wǎng)站呈現(xiàn)完全不同的風(fēng)格。那些CSS作者大多身兼兩職，他們既是設(shè)計師，也是網(wǎng)頁工程師，正是他們推動了CSS和Web標(biāo)準(zhǔn)的普及。時至今日，JavaScript在網(wǎng)頁開發(fā)中的比重越來越大，已經(jīng)鮮見設(shè)計師去寫代碼。這誠然是行業(yè)成熟分工細(xì)化的結(jié)果，但是相比前端工程師正在不斷從后端的工程化中借鑒經(jīng)驗，把諸如設(shè)計模式、單元測試、持續(xù)集成這些概念引入前端開發(fā)中，前端工程師與設(shè)計師之間的借鑒、影響和促進(jìn)卻少得多。

盡管CSS3規(guī)范已經(jīng)推出，但是大多數(shù)前端工程師仍然僅使用CSS2.1的特性，在實際工作中對CSS3的運用并不充分，CSS3的潛力遠(yuǎn)沒有被發(fā)掘出來。

以手機(jī)為代表的電子消費品的普及，對應(yīng)用程序的交互體驗提出了越來越高的要求，可是前端工程師的視覺表現(xiàn)能力貧乏，設(shè)計師被JavaScript擋在應(yīng)用開發(fā)的大門之外。他們之間缺少充分的交流，難以在交互設(shè)計和用戶體驗上獲得突破，最終的結(jié)果是不論是什么應(yīng)用，看起來都是千篇一律，缺乏美與個性。

如何促進(jìn)前端向設(shè)計方向靠攏，增進(jìn)前端與設(shè)計的融合，是每個Web開發(fā)者都應(yīng)該思考的問題。要想縮小前端與設(shè)計之間的距離，就要從CSS著手，讓設(shè)計師與前端工程師能使用相同的技術(shù)語言進(jìn)行溝通。

二、更有效的CSS學(xué)習(xí)方法

CSS不像是JavaScript那樣的通用編程語言，更像是SQL（用于查詢數(shù)據(jù)庫的專門語言）這樣的特定領(lǐng)域的描述語言。因為CSS專門用于解決頁面視覺問題，所以它具有很強(qiáng)的視覺表達(dá)能力。

寫CSS和寫JavaScript程序需要完全不同的語法，也有著完全不一樣的設(shè)計思路。筆者個人的經(jīng)驗是先靠模仿掌握語法，再逐步升級理論知識。而要模仿，首先要有合適的項目和代碼，在反復(fù)練習(xí)中熟悉和掌握基本知識。用于練習(xí)的項目，應(yīng)該滿足兩點要求，一是項目本身是有趣的，是美的，當(dāng)你完成一個項目之后，可以把它展示在公眾面前，獲得朋友的稱贊；二是它不能太復(fù)雜，每個項目的代碼量宜在50～100行，每次練習(xí)大約需要半小時。代碼量再多一點兒，有可能一天消化不完，影響學(xué)習(xí)的積極性。當(dāng)你學(xué)習(xí)一個新的CSS特性時，可以模仿一個項目，就像學(xué)習(xí)寫字一樣，多練習(xí)幾遍，從臨摹到默寫，從形似到神似，仔細(xì)觀察，體會其中的技巧與方法，鍛煉自己的思維方式。

三、本書針對的讀者

本書適合所有對網(wǎng)頁設(shè)計和網(wǎng)頁開發(fā)感興趣的讀者閱讀。

設(shè)計師 本書不涉及JavaScript代碼，而且所有實戰(zhàn)項目都是使用CSS創(chuàng)作的藝術(shù)作品，設(shè)計師可以把CSS當(dāng)作一種藝術(shù)創(chuàng)作工具。

前端工程師 前端工程師通過學(xué)習(xí)用CSS表現(xiàn)復(fù)雜視覺效果的技巧，能夠深刻理解CSS特性，在開發(fā)商業(yè)網(wǎng)站和交互組件時將變得游刃有余。

后端工程師 幾乎所有的后端開發(fā)工程師都對CSS感興趣，但又對CSS感到陌生和無力，通過閱讀本書，將能領(lǐng)略到CSS的魅力，從全新的角度重新理解CSS。

四、本書的講解方式

本書以CSS3為基礎(chǔ)，細(xì)致地剖析與視覺效果相關(guān)的重要語法。但只懂語法是遠(yuǎn)遠(yuǎn)不夠的，就像學(xué)習(xí)繪畫，不僅要學(xué)習(xí)色彩、透視或構(gòu)圖這些理論知識，還必須通過大量的練習(xí)把理論知識融入實踐中。本書不會面面俱到地講解全部CSS屬性，即使書中講到的屬性，也不會講解它的所有語法細(xì)節(jié)。我不想讓讀者變成五金店的伙計——那種知道了所有配件的規(guī)格，卻不會做家具的伙計。相反，我想讓大家先享受作品帶來的喜悅，再進(jìn)一步把這種喜悅轉(zhuǎn)化成學(xué)習(xí)的動力。

書中的章節(jié)也不完全按照語法來組織，例如偽元素一般是放在選擇器的章節(jié)里，但本書把它獨立成章，因為偽元素對于實現(xiàn)語義化作用重大，有必要單獨討論；另外，一些稍有跳躍的安排還有drop-shadow()濾鏡被放到“陰影”一章，outline屬性被放在了“邊框”一章等。

本書沒有討論廠商前綴和瀏覽器兼容問題，因為這些問題都會隨著時間的推移，隨著廠商對規(guī)范的實現(xiàn)而自動解決。

本書分為13章，第1章回顧了CSS的基礎(chǔ)知識，第2章～第10章每章討論一個主題內(nèi)容，第11章～第13章探討CSS藝術(shù)作品的設(shè)計思路。如果把這本書比作一本旅行手冊的話，相當(dāng)于是先介紹旅行目的地的風(fēng)土人情，然后再單獨解說各個景點，最后把本次旅程的點滴記憶制作成精美的紀(jì)念頁。

在講解過程中，本書提供了一百多個基于視覺藝術(shù)設(shè)計的實例，這些實例的演示文件可以在電子資源中找到。

哪怕你不是剛剛學(xué)習(xí)CSS，也建議你從第1章讀起，因為即使是簡單的知識點，它們的示例也是很有意思的。為了避免出現(xiàn)無法理解的色值，示例中盡量使用顏色名稱，你可以通過附錄查看顏色名稱對應(yīng)的色彩。

除講解過程中給出的實例之外，本書提供了30個實戰(zhàn)項目，你可以通過“本書實戰(zhàn)項目一覽表”找到感興趣的項目所在的章節(jié)，這些項目還配有同步講解的視頻，幫助你找到新的靈感。

書中的實戰(zhàn)項目都有一定的難度。當(dāng)我演示一種特性的實際用途時，也許要結(jié)合其他特性一起使用才能實現(xiàn)一種視覺效果。有的特性可能你還不熟悉，你要先把還不熟悉的部分暫時跳過，在學(xué)習(xí)過后面的知識之后，再轉(zhuǎn)回頭來，慢慢地加以理解。

五、本書資源

掃描下面的“資源下載”二維碼，就可以獲取本書配套電子資料包的下載方式。

掃描下面的“云課”二維碼，可以觀看全書視頻。你也可以掃描正文中的二維碼觀看對應(yīng)章節(jié)的視頻。

我們精彩的CSS藝術(shù)之旅就要正式開始了，祝你旅途愉快！

張偶

2019年8月