CSSでグラデーションの背景

CSSでグラデーションの背景

Check

http://source-marine.net/css-mania/archives/866CSSでグラデーションの背景スタイルシートマニア

ここでちょっと小技を紹介。

グラデーションの背景ってちょっとあこがれませんか？
単色べた塗よりなんだか高級感があってちょっとすごいホームページみたいに見られそうな気がしますよね？（笑）
僕もホームページの勉強をはじめたころグラデーションの背景を作りたくてめちゃくちゃ悩んだ事があります。
巡り巡った結果jacascriptでグラデーションを作るなんてものに行きあたって、チャレンジしてめんどくさくてやめてしまった経験があるくらいです。

しかし！答えはものすごく簡単だったのです！

たとえば下記画像のようなグラデーションの背景を作るとします。

この時は、画像をこのように切り取ります。

完成品

それから、cssで背景の設定をします。
僕は、だいたいbodyに設定をしますので、

body {

 background: url(../img/bg.jpg) repeat-x #0e0e0e;
 --省略--
 }

という感じです。
ここのポイントは、背景画像をrepeat-xでリピートさせている事と背景色をグラデーションの最後の色#0e0e0eに設定している事です。

要は、グラデーションの画像を横にリピートさせてグラデーションを作り、一番下の色と背景の色を合わせているだけなのです。
簡単ですねぇ。
javascriptでやってみようとしていた自分が馬鹿らしくなります。

そして、勘が良い人ならもう気づいていると思いますが、今やったのは上から下へのグラデーション。
右から左（まあ、左から右でもいいんですが）のグラデーションはどうするのか！
これも答えは簡単！背景画像をrepeat-yでリピートさせればいいだけです。
後は、背景色を同じようにグラデーションの最後の色に合わせればOK！

body {
background: url(../img/bg.jpg) repeat-y #0e0e0e;
--省略--
}

～09/10/06～

タグ: css, tips, グラデーション, 作り方, 小技

前の記事

次の記事