2008年9月26日金曜日

 

【CSS】角丸まとめ【Javascript】

JavaScript の角丸ライブラリまとめComments - てっく煮ブログ
角丸に関するあれこれ - WWW WATCH
25 Rounded Corners Techniques with CSS - CSS Juice
iPhone風ボタンデザインまとめ - DesignWalker
なんとなくまとめてみた。多分意味ないけど。
色々議論されてた気がするが、どれがベターなのか。画像の作り方も多種あったし。
下のは簡単だしまぁまぁ良さげ。角丸ボックスにシャドウが付くので。
じゃなきゃjQueryで空の要素追加でかな。
ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ - ユージック
ライブラリの配布元。 ShadedBorder - JavaScript Round Corners with Drop Shadow 動作確認デモ 詳細デモ シンプル・デモ download:shadedborder-0.6.1.zip(MITライセンス)
ライブラリを読み込む。

<script type="text/javascript" src="shadedborder.js">
効果を適用したい要素を与える。要素より後に記述されてないと無効のようなのでソースの最後にでも書く。p要素が必要なわけではない。

<script type="text/javascript">   border.render('round_me');   var border = RUZEE.ShadedBorder.create({ corner:5, shadow:10, border:2 }); </script>
いくつかの要素によって角丸が表現されてるので「class="sb"」を付けておくとボーダなど細かくスタイルが指定できる。
/*  HTML  */

<div id="round_me" class="sb"> <p>&nbsp;</p> </div>
/*  CSS  */

.sb-inner{      /*ボックス内の背景色はここで指定*/
    background:#FFF;
}
.sb-border{     /*ボックスのボーダー色はここで指定*/
    background:#EEE;
}
デフォルトのスタイルは「shadedborder.js」の最後の方に指定してある。
/*  shadedborder.jp  */
// add our styles to the document
document.write('\
  <style type="text/css">\
  .sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }\
  * html .sb, * html .sbi { height:1%; }\
  .sbi { display:inline-block; }\
  .sb-inner { background:#ddd; }\
  .sb-shadow { background:#000; }\
  .sb-border { background:#bbb; }\
  </style>

ラベル: ,


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google