前言
開啟這個系列的原因主要是反粥，很多設計師與技術溝通有障礙咒钟，對一些基礎的網(wǎng)頁樣式代碼吹由、框架結(jié)構(gòu)、動效很陌生朱嘴，不利于前端快速開發(fā)倾鲫。
其實設計師懂一些基礎代碼是很有必要的。pc網(wǎng)站萍嬉、手機h5很多使用了 html+css乌昔，這是用來做web開發(fā)最常用最基本的技術，對設計師來說門檻很低壤追、上手也很快磕道。
實際上，在PS和Sketch中行冰，我們做的一些效果已經(jīng)可以直接導出css代碼溺蕉。
越來越多的UI設計師開始跟上潮流學習前端知識為自己充電。從本篇開始悼做，我們將以html+css為例疯特，一起了解下那些設計師經(jīng)常用但又不明白怎么實現(xiàn)的效果，提高UI設計的效率肛走。
box-shadow陰影
在UI界面中漓雅，投影或者叫陰影，是一個經(jīng)常使用的效果，很多網(wǎng)站也都使用了投影效果邻吞。
有道精品課的商品hover效果
百度網(wǎng)盤的按鈕投影
設計師做投影效果很簡單组题，直接勾選投影樣式，然后調(diào)節(jié)對應參數(shù)即可抱冷。
在Sketch中是這樣的
設計師都很熟悉崔列。陰影其實不用做切圖處理，技術同學簡單幾個代碼就可以搞定徘层。
那么程序員用什么方法實現(xiàn)投影呢峻呕？
在css中這個投影叫做box-shadow，是給盒子（或者叫容器）增加投影的樣式趣效。它的屬性代碼是這樣的：
和Sketch的展現(xiàn)基本一致瘦癌，唯一不同的是，css顏色代碼是放在最后的跷敬。
看到這里讯私，大家會發(fā)現(xiàn)css和Sketch有著驚人的相似之處，其實Sketch中的各種屬性基本上都可以導出對應的css代碼西傀，甚至可以說斤寇，Sketch是css的可視化設計工具。這也是為什么Sketch是目前最適合UI設計師使用的界面設計工具拥褂。
多重投影
在Sketch中娘锁，我們可以在一個矩形外面加多個投影，比如這樣
css也能實現(xiàn)這樣的效果饺鹃，原理和sketch一模一樣莫秆，就是在原先基礎上去增加新的投影。
內(nèi)部投影
以上是外部投影悔详，投影出現(xiàn)在按鈕的下面镊屎，有時候我們會根據(jù)需要添加按鈕的內(nèi)部投影，比如按鈕高光效果茄螃。在sketch中投影和內(nèi)部投影是分開的
在css中同樣也有內(nèi)部投影
只是在前面的例子中缝驳，我們沒有寫出來inset這個屬性值，如果為空則表示默認外部陰影归苍。同樣內(nèi)陰影也可以增加多個用狱，方法和外陰影一樣。
總結(jié)
以上就是陰影效果設計樣式和css代碼的區(qū)別和關系拼弃，實際上css的陰影還有一些更深層次的理論知識夏伊，跟設計師關系不太大，屬于程序員的工作范疇肴敛。
Sketch和PS已經(jīng)可以把簡單的效果導出css樣式署海，說明設計與技術正在緊密結(jié)合，甚至一定程度上可以互相轉(zhuǎn)化∫侥校現(xiàn)在已經(jīng)有一些插件可以把Sketch界面轉(zhuǎn)化成html代碼砸狞，隨著技術進步，以后設計的頁面不需要前端來切圖镀梭，直接就可以變成網(wǎng)頁刀森，讓我們拭目以待。
更多UI設計干貨文章請關注UI黑客
微信公眾號 uihacker
UI黑客官網(wǎng)http://www.uihacker.com/
UI黑客論壇http://bbs.uihacker.com/
