CSSグラデーションのちょっとしたテクニック #1

リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204

[nantan]

グラデーション

[wacky]

CSSでbutton要素にグラデーションをかけるサンプル。マウスオーバーで背景色が変わる効果あり。RGBaの透明度を利用するのでコードがシンプル。IEにも対応。

[mooz]

かっこいい。ボタンっぽくみせられるのか。

[hiro_y]

CSSでグラデーション。

[psychedesire]

ゴージャス！

[kaminoaki]

「IEでは色の指定にrgba()は利用できないが、#AARRGGBBという形でアルファ付きで指定できる」ほえ

[sw_lucchini]

cssでグラデーション。めんどくさそう。

[csslecture]

CSS3 ボタン