[Javascript/CSS]tripleb.jsの設定項目分析

新しくとりかかったサイトで、どうしてもJavascriptで角丸というのをやってみたくて、色々探してみました。

新しそうなやつの方がよかろうということで、
PHPSPOTさんの方で9月に紹介されていた「tripleb.js」を最初に試してみたのですが、
実際のページに組み込むときに、IEでの表示がどうしてもうまくいかずあきらめました。clomeとfirefoxではうまくいきました。

http://phpspot.org/blog/archives/2009/09/css3jstriplebjs.html

どこをどう直せばよいのかというのは説明してるページが見当たらず、
自分で分析してみたよ。これがすごい疲れた。

■サンプルの記述三種

http://www.netzgesta.de/tripleb/
こちらのサンプルページで3種の角丸が使われてるのですが、その記述です。
右上の!の丸にも設定されてますが、それは割愛。
外側→内側の順番です。

■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 (上部の透明度?) 

あくまで憶測ですので、正しい情報があげられるのを心待ちにしております。

未分類

Posted by ponnao