↓ 一度使ったら手放せません ＾＾； とにかく動作が軽くて安心！オススメです ↓
最近良くみかけるパターンですが、角丸に切ってある画像に角丸の枠線がついているものです。
こういうこと↓
たぶんフォトショップとかで出来ると思うのですけど、
やり方がわからないので、完璧に独自の方法です ＾＾；
手順としては、htmlのページを作業用に一つ作ります。（スクリプトを使います）
curvyCorners から一式をダウンロードして解凍すると出てくる
curvycorners.src.jsを設置
<script type="text/javascript" src="http://youdomein/js/curvycorners.src.js"></script>
以下のように読み込みます。（上記に続けて記述）
<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>
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 },
上記の部分の数値で角丸の大きさが変わります。
数値が大きいほど大きくなります。
スタイルシートに下記をプラス↓
.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;/* 線の太さ 種類 色を指定 */
}
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は以下のように↓
<div class="myBox">
<!-- ここは関係ありませんが・・＾＾； -->
</div>
<!-- ここは関係ありませんが・・＾＾； -->
</div>
上記で作ったHTMLをブラウザで見ると角丸の枠線で切り取られた画像が表示されますので、
プリントスクリーンでコピー、あとは画像加工ソフトなんかでペーストして切り取ればOKです。
これ一度作ってしまえば、画像の横幅、高さ、角の大きさ、線の種類、
画像の保存先のパスだけ変えればコピー・ペーストでいかようにも作れちゃいます ＾＾♪
たぶん、フォトショップとかで簡単にやる方法あるかも
しれないんですけど、まあこれでも簡単にできるからヨシと 笑
ちょっとCSSとHTMLを調節すれば、画像でなくても枠線だけとか、
枠線の中身がテキストとか、画像に文字を入れて切り取るのも簡単ですう♪
ちなみにCSS3の
-moz-border-radius: 11px; /* Firefox用 */
border-radius: 11px; /* Chrome用 */
border-radius: 11px; /* Chrome用 */
っていうのを使っても作れますけど、角の部分が今回紹介したやり方のほうが、綺麗に出ます ＾＾*
Categories: javascript, ショップ作成
うわぁ、これはいいです！
フォトショップで角丸枠線作ったつもりが右側の線と下線が引けていなくって
どうやるんだろうって思ってました。
角丸で枠線引いていると、ちょっとプロっぽいですよね～♪
> 塚越様、
画像だけを単に角丸にするなら便利なフリーソフトがあるんですけど、
周りに枠線つけるとなると、ちょっとどうやってやるのか不明だったもので、
無い頭絞って考えました ＾＾；
これだったら綺麗に出来ますし、枠の大きさも思いのまま。
一度HTMLを作って保存しておけば、何度でも手軽に利用できますし。
このプロっぽい技、使えるようになって良かったです。
使われるようでしたら便利に使っちゃってください ＾＾♪