[CSS]Clippy:快速幫你製作 CSS Clip-Path 圖片變形的雲端工具

Clippy
習慣使用 CSS 來設計網頁後,
基本上很自然的就會希望,
可不可以任何的設計想法,都直接以純CSS的語法來完成呢?
 
其實並不確定是不是真的可以把『每一個』腦海中想要完成的技法,
都用純CSS的方法完成,
雖然CSS語法是真的很強大(而且是越來越強大),
但是設計師的在創意上的天馬行空,
感覺可是要更勝一籌,總有些技術追不上想像的地方,是吧?
 
不過今天我們要跟大家分享一個很便利又很厲害的CSS語法工具:Clippy(http://bennettfeely.com/clippy/)。
 
Clippy 這個網站,可以幫我們很快速的,利用 CSS 的語法:Clip-Path,
來針對一個圖片產生各種變形,
我們知道 CSS 中的這個 clip-path 語法,
可以讓設計師製作很複雜的多邊型,
不過要設定這些參數那真是抓瞎要人命 >"<
而這個 Clippy 就可以幫我們直接完成,
他不僅有提供很多個預設的各種形狀,
大家也可以在暨有的形狀下,在來微調出自己要的變化。
 
就像下面這些例子:

這是原圖
 

 

 

 
有趣嗎?
大家可以上去試試看喔 :)
 

Readers comment