画像をユニークな形に切り抜くCSSジェネレーター「FANCY-BORDER-RADIUS」

画像をユニークな形に切り抜くCSSジェネレーター「FANCY-BORDER-RADIUS」

FANCY-BORDER-RADIUS」は、CSSプロパティ「border-radius」のジェネレータです。

WEBサイトに載せる画像やボックスなどを、CSSを使ってユニークな形に変化させることが可能です。
実質、CSSによる画像切り抜きみたいなものと思ってください。

FANCY-BORDER-RADIUS

今回は以下の画像を切り抜きます。

「FANCY-BORDER-RADIUS」を使ってみる

FANCY-BORDER-RADIUS」のサイトを開きます。

楕円状の上にある4つの□をドラッグさせて、お好きな形を作ります。

下の数値が、ドラッグにともなって変化するのが分かると思います。

楕円のビューワーは横1:縦1の縦横比なので、これをカスタマイズしたい場合は「Custom size」にチェックを入れます。

で、最後に「COPY」ボタンを押して、数値をコピー。

コピーした数値。
例「70% 30% 64% 36% / 72% 72% 28% 28%

これを以下のようにCSS「border-radius」の値にします。

border-radius:70% 30% 64% 36% / 72% 72% 28% 28% ;

早速、画像に「border-radius」をかけてみました。

実際のデモサイトはこちら

おむすび形に切り抜かれました。
簡単ですね\(^o^)/

「border-radius」について

CSSプロパティ「border-radius」について深く知りたい方は、下記サイトをご参照ください。

border-radius-CSS3リファレンス

 

ken
最近は、保育園や歯科医院などのサイトで、楕円切り抜きの画像をよく見かけます。子供向けの措置なのでしょう。ほのぼのした独特の味わいがありますね。

 

PRリンク