［Javascript/CSS］tripleb.jsの設定項目分析
新しくとりかかったサイトで、どうしてもJavascriptで角丸というのをやってみたくて、色々探してみました。
新しそうなやつの方がよかろうということで、
PHPSPOTさんの方で９月に紹介されていた「tripleb.js」を最初に試してみたのですが、
実際のページに組み込むときに、IEでの表示がどうしてもうまくいかずあきらめました。clomeとfirefoxではうまくいきました。
http://phpspot.org/blog/archives/2009/09/css3jstriplebjs.html
どこをどう直せばよいのかというのは説明してるページが見当たらず、
自分で分析してみたよ。これがすごい疲れた。
■サンプルの記述三種
http://www.netzgesta.de/tripleb/
こちらのサンプルページで３種の角丸が使われてるのですが、その記述です。
右上の！の丸にも設定されてますが、それは割愛。
外側→内側の順番です。
■id設定
idでは、outer（外側）、inner（内側）というのが指定されているので、
凸ってるか、凹んでいるかの形状を決めているようだ。
以下は上ページ下部の、「Classes」というタブを開くと、
英語でclass内の項目の設定方法が書かれているようなので、
赤字の部分を元に、どの部分でなんの設定がされているのか分析してみました。
■角丸の大きさ設定
bradius_8
「bradius」は項目名のようです。
「radius」が半径という意味なので、角の大きさという意味じゃないかねぇ。
■影の設定
bshadow_000000_100_0_0_10
「bsshadow」 はまたも項目名みたいっす。
そのあとのは順番に下のような内容の数値が入っているようです。
000000 ：color（影の色？）
100 ：opacity（不透明）0だと透明？
0 ：x-position おそらく影の位置の座標
0 ：y-position おそらく影の位置の座標
0 ：blur-radius ぼやけの半径?
■背景の角丸設定
bgradient_0_ffffff_100_ffa500_50
「bgradient」 は項目名です。背景の角丸って意味かな。
0 ：angle
ffa500 ：from-color （上部のグラデーションカラー）
100 ：from-opacity （下部の透明度？）
ffffff ：to-color （下部のグラデーションカラー）
100 ：to-opacity （上部の透明度？）
あくまで憶測ですので、正しい情報があげられるのを心待ちにしております。