CSSのclip-pathで画像にマスクをかけることができるジェネレーター「Clippy」

2017/01/28

こんにちは。
今回はCSSのclip-pathで画像にマスクをかけることができるジェネレーター「Clippy」です。

CSSのclip-pathを使って、画像にマスクをかけることができるWebサービスを紹介します。

CSSのclip-pathで画像にマスクをかけることができるジェネレーター「Clippy」

Clippy

clippy

http://bennettfeely.com/clippy/

 

Clippyの使い方

clippy2

使い方は簡単で、右上からどの形にするか選びます。
左側にデモが表示され、サイズと背景画像を選択できますよ。
また、左下にコードが生成されるので、コピーすることができます。

 

鬼速PDCA
鬼速PDCA

 

いかがでしたか。IEとFirefoxが非対応なのですが、スマホサイトなどで使えそうですね。
以上でCSSのclip-pathで画像にマスクをかけることができるジェネレーター「Clippy」でした。

topへ戻る