你用ps.我用css
【摘自wisewrong的cnblog】
還在上大學那會兒,我就喜歡玩 Photoshop。後來寫網頁的時候,由於自己太菜,好多花裡胡哨的效果都得藉助 Photoshop 實現,當時就特別希望 CSS 能像 Photoshop 一樣處理圖片。
隨著對 CSS 的瞭解越多,我發現 CSS 有很多平時用得少(或者不會用),但非常厲害的屬性。這些屬性實現了很多 Photoshop 的功能,比如濾鏡、混合模式。
我簡單整理了一下,由於這些屬性的功能十分強大,每一個屬性都能單獨成文,所以這裡只是做一個目錄。
一、漸變 Gradient
漸變在 PS 裡面是一個很常用的功能,在工作中用到 CSS漸變的場景也不少
但除了簡單的線性漸變、徑向漸變之外,還可以用漸變做出這樣的效果:
甚至是用漸變做一個進度條:
相關文章:
《使用 CSS 漸變》
二、倒影box-reflect
這個屬性可以使某個 DOM 元素產生一個倒影,並且可以規定倒影的方向和距離
另外還可以給這個倒影新增一個遮罩,比如一個透明漸變:
-webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba(0,0,0, 0.4));
相關文章:
三、陰影box-shadow /text-shadow
又是一個很常見的屬性,但通常都是用來做一些簡單的陰影,比如:
但結合animation 與 transform,就可以做出這樣的動畫:
CodePen Demo -- CSS Checker Illusion( By David Khourshid )
相關文章:
四、 裁剪clip-path
這個屬性可以建立一個裁剪區域,讓元素只顯示區域內的內容,有點像 Photoshop 中“路徑+蒙版”的效果
這個屬性值最強大的地方在於,可以非常自由的繪製多邊形:
相關文章:
五、蒙板 mask
蒙板的效果是在原圖形上面,在蒙上一層圖形,得到一個新的圖形
由於蒙板圖形可以是透明的,所以有些用 clip-path 實現的效果,也可以用 mask 實現
在我看來,mask 和 background 是高度類似的,區別在於 background 位於底層,而 mask 在頂層
相關文章:
《CSS3 的一對孿生兄弟之 background & mask》
六、濾鏡 filter
濾鏡應該也算比較常用的屬性了,同一張圖疊加不同的濾鏡之後,能呈現各種各樣的效果:
但這只是基本用法!
filter 可以做出很多漂亮的效果,特別是結合animation 之後,這些高階技巧可以參考下面的“相關文章”,看完之後我都驚呆了
相關文章:
《QQ 未讀訊息的拖拽動態效果是如何實現的? - 祥子的回答 - 知乎》
七、混合模式 blend-mode
如果對 Photoshop 的混合模式很熟悉的話,這個屬性也非常好理解
在 CSS 裡面,有mix-blend-mode和background-blend-mode兩種用法
呈現的效果和上面的 filter 類似,也是讓原圖形疊加之後產生化學反應,比如用 CSS 做一個抖音的 LOGO:
CodePen Demo -- 使用 mix-blend-mode 實現抖音 LOGO
相關文章: