背景をグラデーション風にする方法

質問

OkWaveのマイページとかヤフートップ
http://www.yahoo.co.jp/
で右上のヘルプの横の色を選択すると
背景がグラデーション風になります。

CSSやHTMLだけでできるのでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

＞背景をグラデーション風にする方法
ではなくて、背景画像そのものを変更しています。
javascriptを使って、スタイルシートを切り替えているだけです。
カスケーディングスタイルシートのカスケーディングの仕組みを利用して、適用されるプロパティを変えることができます。この場合は、「同じ詳細度の場合、あとから登場する設定で上書きされる」部分を使えば容易でしょう。

お礼

ご回答有り難うございます。
HTMLのページサイズに合わせてのグラデーションは
JAVAScriptでできるかもしれないけど、
普通は単純に画像を入れ替えているだけなんですね。

特に拘る必要性もないので、この件に関しては見送りと
させて頂きます。どうもご回答有り難うございました。

回答No.2

tracer

グラデーション効果自体は、CSSで実装できます。
ただし、No.1さんの回答通り、対応していないブラウザもあるため、Yahooで実装されている程度の効果なら画像で作ってしまったほうが確実ですね。

質問の内容が、グラデーション効果ではなく、切り替える機能を指しているのなら、これもやはり、ブラウザを限定するならCSSだけで実装できます。具体的にはCSS3の:targetあたりを使えばできると思いますが、同様にブラウザが限定されるので、JavaScriptで実装する場合が多いかと思います。

お礼

No1の方の返信でも書きましたが、
二段構成の背景を考えています。

ブラウザが限定されるのであれば諦めます。
普通に背景をrepeatで表示した方が良さそうですね。

JAVAScriptの実装でもいいのですが、
ローカルで使いたいものですから、
セキュリティの設定とかが関門になるのでは？
とちょっと疑問に思い始めています。

回答No.1

松本 海月（@k_sight）

簡潔にまとめると、″カーソル（矢印）をボタンの上に載せると背景が変わるけれど、それってどうやって実現するの？″
ということで宜しいでしょうか？

　CSSでグラデーションを実現することも可能ですが、CSSのグラデーションはあらゆるブラウザに対応させるのが面倒なので、
通常はグラデーションの画像を用意して、背景に指定します。

　背景に指定した画像を、CSSを使って別の画像と入れ替えることで実現します。

　詳しくはhttp://hac-design.com/css/rollover.htmlをご覧ください。

　なお、″カーソルを載せると背景が変わる″動作を「ロールオーバー」といいます。検索するときにも便利なのでぜひ覚えて
ください。

お礼

いえ、カーソルの背景ではなくてＨＴＭＬそのものです。
周囲の枠と本文の２段構成を考えていました。

デザインセンスがほとんどないので（泣）、
簡単に実装できるのなら色々試してみようと思ったところです。

hoverの使い方は参考になりました。
ご回答有り難うございます。