[CSS3]グラデーション その１

[CSS3]グラデーション　その１

2014年4月28日(月曜日)

スクールが引越ししてから（といっても同じビルで１階→５階になっただけですが）、早くも１ヶ月以上が経ちました。

さすがに最近は、エレベーターに乗って無意識に「１」を押すことが少なくなってきたスタッフ「ほ」です。

─────

お題は前回の角丸に引き続き「CSS3」で行ってみたいと思います。

今回は、結構奥が深いグラデーションの設定です。

かなりボリュームがある話題ですので、全部で３，４回に分けてご紹介しようかと思っています。

─────

これまでWebページの背景にグラデーションを設定する際には、グラデーションの画像を背景画像として敷き詰めて設定していました。

ですが、CSS3から登場したグラデーション指定によって、画像を使わなくてもグラデーションが設定できるようになりました。

画像を利用しないため、データが軽くなり、また色の変更も容易になります。

さて、一番簡単な記述からご紹介します。

手ごろなボックスをひとつ用意しましょう。

CSSグラデーションに対応していないブラウザでは、背景色が表示されるように背景色（単一色）を指定しておきます。

その上で、以下の記述を追加します。


.gradient-box {
      background:linear-gradient(yellow,red);
}

サンプルファイルを確認

どうでしょう？以下のようなグラデーションができているはずです。

グラデーションの種類を指定

例の通り、背景にグラデーションを設定する際には「background」プロパティを利用します。

その後ろに記述した「linear-gradient」部分が、線状のグラデーションを生成している部分です。

グラデーションには、ここで指定している線状のグラデーションだけでなく、放射状のグラデーションを指定することも出来ます。

グラデーションの指定を以下のように変更してみましょう。


.gradient-box {
      background:radial-gradient(yellow,red);
}

サンプルファイルを確認

中央から放射状に広がるグラデーションが適用されます。

色の指定

()の中にグラデーションの開始位置の色と終了位置の色をカンマで区切って指定します。上記例の場合は開始位置の色が黄色、終了位置の色が赤色ということになります。

色には、もちろんカラーコードを利用することもできます。


.gradient-box {
      background:linear-gradient(#ff0,#f00);
}

また、グラデーションには３つ以上の色を指定することもできます。


.gradient-box {
      background:linear-gradient(green,yellow,red);
}

サンプルファイルを確認

7色を指定すれば虹色に！

向きの変更

特に指定をしなければ、グラデーションは上から下に向かったグラデーションになります。


.gradient-box {
      background:linear-gradient(yellow,red);
}

上記の指定の場合、上端の色が黄色、下端の色が赤、ということになります。

グラデーションの向きを変更するには、()内の先頭に向きの指定を追加します。

たとえば、今の方向とは逆に下から上に向かうグラデーションにする場合は「to top」と記述をします。


.gradient-box {
      background:linear-gradient(to top,yellow,red);
}

横方向のグラデーションにするには、「to right」「to left」を利用します。


#box1 {
      background:linear-gradient(to right,yellow,red);
}
#box2 {
      background:linear-gradient(to left,yellow,red);
}

サンプルファイルを確認

さらに、斜めの指定も可能です。


#box1 {
      background:linear-gradient(to right bottom,
yellow,red);
}
#box2 {
      background:linear-gradient(to right top,
yellow,red);
}
#box3 {
      background:linear-gradient(to left bottom,
yellow,red);
}
#box4 {
      background:linear-gradient(to left top,
yellow,red);
}

to right bottom	左上から右下に向かって
to right top	左下から右上に向かって
to left bottom	右上から左下に向かって
to left top	右下から左上に向かって