工夫のあるUIがいい!CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy
Post on:2015年1月7日
CSSの「clip-path」を使い、円・楕円・多角形などのさまざまな形状のクリップパスが簡単に生成できるオンラインサービスを紹介します。
UIも随所に工夫がある非常に使いやすいデザインになっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010701.png)
使い方は簡単です。
まずは、背景になる画像(オリジナルも可)を選択します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010701.png)
右サイドバーから、形状を選択。
このUIで「おっ!」と思う人も多いと思います。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010704.png)
形状一覧
あとは必要があれば、サイズや各ポイントを調整します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010702.png)
サイズ調整
各ポイントのカラーはコードの値に対応しており、リアルタイムに変更を確認できます。
始動時に波紋のエフェクトが表示されるのいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010702-02.png)
完成したら、左下のエリアから「codepen」のアイコンをクリックすると、コードが生成されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010703.png)
codepenでコードと表示を確認
clip-pathのブラウザのサポート状況は、以下の通り。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010705.png)
IEは全滅って感じです。
sponsors