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

2010 年 2 月 3 日 by     2 Comments    Posted under: javascript, ショップ作成

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

こういうこと↓

恵方巻きもどき

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

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

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

1
<script type="text/javascript" src="http://youdomein/js/curvycorners.src.js"></script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/JavaScript">
 
  addEvent(window, 'load', initCorners);
 
  function initCorners() {
    var settings = {
      tl: { radius:6 },
      tr: { radius:6 },
      bl: { radius:6 },
      br: { radius:6 },
      antiAlias: true
    }
 
    /*
    Usage:
 
    curvyCorners(settingsObj, selectorStr);
    curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);
 
    selectorStr ::= complexSelector [, complexSelector]...
    complexSelector ::= singleSelector[ singleSelector]
    singleSelector ::= idType | classType
    idType ::= #id
    classType ::= [tagName].className
    tagName ::= div|p|form|blockquote|frameset // others may work
    className : .name
    selector examples:
      #mydiv p.rounded
      #mypara
      .rounded
    */
    curvyCorners(settings, ".myBox");
  }
 
</script>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
.myBox {
  margin: 0.5in auto;
  color: #ffffff;
  width: 600px;/* 画像の横幅 */
  height: 225px;/* 画像の高さ */
  padding: 0;
  text-align: left;
  background-image: url(使いたい画像までのパス);
  background-repeat: no-repeat;
  border:1px solid #ccc;/* 線の太さ 種類　色を指定 */
}

htmlは以下のように↓

1
2
3
<div class="myBox">
<!-- ここは関係ありませんが・・＾＾； -->
</div>

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

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

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

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

ちなみにCSS3の

1
2
-moz-border-radius: 11px; /* Firefox用 */
border-radius: 11px; /* Chrome用 */

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


posted by そば富泉


こちらも合わせてご覧ください - このページの内容と関連がある記事 -

  1. 個人的に便利なCSSタグの簡単コピペのページ
  2. ブックマークボタンをオリジナルで作ってみたのですが・・
  3. http と https で同じスクリプトを使い分ける!?
  4. ある程度スクロールすると出現するページの先頭へボタンのスクリプト
  5. copyright（コピーライト）表記を自動で更新するスクリプト
タグ:

2 Comments + Add Comment

  • 翁屋塚越 2010年2月4日 6:10 PM

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

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

  • とみせん 店長 2010年2月4日 7:25 PM

    > 塚越様、

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

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

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

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

TrackBack URL for this entry

コメントをいただけると励みになります！よろしくお願いします。

13 + 6 =
Please leave these two fields as-is: