角丸画像で切り抜いた写真に角丸の枠線を付ける方法

最近良くみかけるパターンですが、角丸に切ってある画像に角丸の枠線がついているものです。

こういうこと↓

たぶんフォトショップとかで出来ると思うのですけど、
やり方がわからないので、完璧に独自の方法です ^^;

手順としては、htmlのページを作業用に一つ作ります。(スクリプトを使います)

curvyCorners から一式をダウンロードして解凍すると出てくる
curvycorners.src.jsを設置

以下のように読み込みます。(上記に続けて記述)

tl: { radius:6 },
tr: { radius:6 },
bl: { radius:6 },
br: { radius:6 },

上記の部分の数値で角丸の大きさが変わります。
数値が大きいほど大きくなります。

スタイルシートに下記をプラス↓

htmlは以下のように↓

上記で作ったHTMLをブラウザで見ると角丸の枠線で切り取られた画像が表示されますので、
プリントスクリーンでコピー、あとは画像加工ソフトなんかでペーストして切り取ればOKです。

これ一度作ってしまえば、画像の横幅、高さ、角の大きさ、線の種類、
画像の保存先のパスだけ変えればコピー・ペーストでいかようにも作れちゃいます ^^♪

たぶん、フォトショップとかで簡単にやる方法あるかも
しれないんですけど、まあこれでも簡単にできるからヨシと 笑

ちょっとCSSとHTMLを調節すれば、画像でなくても枠線だけとか、
枠線の中身がテキストとか、画像に文字を入れて切り取るのも簡単ですう♪

ちなみにCSS3の

っていうのを使っても作れますけど、角の部分が今回紹介したやり方のほうが、綺麗に出ます ^^*

:: スポンサーリンク ::

posted by そば富泉

2 thoughts on “角丸画像で切り抜いた写真に角丸の枠線を付ける方法

  1. うわぁ、これはいいです!
    フォトショップで角丸枠線作ったつもりが右側の線と下線が引けていなくって
    どうやるんだろうって思ってました。

    角丸で枠線引いていると、ちょっとプロっぽいですよね~♪

  2. > 塚越様、

    画像だけを単に角丸にするなら便利なフリーソフトがあるんですけど、
    周りに枠線つけるとなると、ちょっとどうやってやるのか不明だったもので、
    無い頭絞って考えました ^^;

    これだったら綺麗に出来ますし、枠の大きさも思いのまま。
    一度HTMLを作って保存しておけば、何度でも手軽に利用できますし。

    このプロっぽい技、使えるようになって良かったです。

    使われるようでしたら便利に使っちゃってください ^^♪

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)