Clippy - Web上で画像の表示する形を自在に設定 // MOONGIFT Archived

画像をWebサイトに表示する際には、四角くか画像自体を起動する形に切り抜かないといけないとお思いでしょうか。実際にはCSS3を駆使することで元の画像は変えずに表示する形状を変えることができます。とはいえそのような表示指定を手作業で行うのはとても面倒です。そこで使ってみたいのがClippyです。

Clippyの使い方

こちらがメイン画面です。画像と形を選ぶだけの簡単操作です。

シェイプは色々と用意されています。

十字架型なんてのも。

背景を透かして表示させることもできます。

指定された形状だけでなく自分でカスタマイズもできます。

画像はあらかじめ用意されているものから選んでもいいですし、自分で画像を指定することもできます。結果はCSS3の設定で表示されますのでコピーして自分のプロジェクトで使えるでしょう。

ClippyはHTML5/JavaScript/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。