前言

一、縮小前端和設計之間的距離

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

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

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

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

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

二、更有效的CSS學習方法

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

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

三、本書針對的讀者

本書適合所有對網頁設計和網頁開發感興趣的讀者閱讀。

設計師 本書不涉及JavaScript代碼，而且所有實戰項目都是使用CSS創作的藝術作品，設計師可以把CSS當作一種藝術創作工具。

前端工程師 前端工程師通過學習用CSS表現復雜視覺效果的技巧，能夠深刻理解CSS特性，在開發商業網站和交互組件時將變得游刃有余。

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

四、本書的講解方式

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

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

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

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

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

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

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

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

五、本書資源

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

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

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

張偶

2019年8月