ふみぃ~.何だか虚しい・・・
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Date:--/--/--(--) --:--:--
スポンサー広告 | Edit |
CSSで影を付ける方法でグラデーションのことに触れたら,いつも大変お世話になっている “Inside Out” のretroさんを困らせてしまったようで,申し訳なく思っております.

で,今度は本物とはちょっと違うけどAppleっぽいグラデーションのかけ方を!
(ちなみに,下のサンプルはSafari 4とChrome 4以外のブラウザでは一部指定したとおりのスタイルで表示されなかったりします.ご了承下さい.)

ボタンみたいだけど押せませぬ

今回は,こんな感じでボタン風にしてみました.
このCSSのグラデーションは以下のように記載してあります.

background: rgb(110, 125, 152);
background-image: linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(1, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));


この指定方法の便利な点は,ベースの背景を変えるとグラデーション部分をいじらなくても良いところ.
例えば,これをグレーのボタンにしたければ,一行目を以下のように変更するだけ.

background: rgb(153, 153, 153);


すると...

ボタンみたいだけど押せませぬ

このようになります.

これを見るとFirefoxでも対応しているように思えるかもしれませんが,実際にはまだベータ版の3.6以降でないと対応してないので,それ以前のバージョンをお使いの方はのっぺりした青色や灰色にみえるだけです.
あとOperaでどうするのかは知らないです.

それと,上には入ってないけど,めずらしくIEでもグラデーションをかけることができて,その時は以下のように記載します.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#FFFFFFFF", EndColorStr="#7FFFFFFF");


retroさんも上手く行きますよーに!!
Date:2010/01/13(Wed) 20:25:56
Net | Edit | Comment:0 | Trackback:0
Comment
Posted Comment
Comment to This Entry
URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 
Trackback
Trackback URL
http://doubleko.blog18.fc2.com/tb.php/4334-c2d54ef1
この記事にトラックバックする(FC2ブログユーザー)
Trackback

Powered by FC2. Designed by Double KO.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。