2012/05/17更新

[HTML5] CSS3でグラデーションを表現する

今日はCSS3のgradientというものを利用して、グラデーションを表現してみました。縦グラデーション、横グラデーション、円形グラデーションなど、色々なグラデーションの例と実装サンプルを記載しました。

http://www.yoheim.net/labo/html5/gradient.html

CSS3のgradientとは

gradientとは、HTMLの要素にグラデーションを掛けた色使いを施す事の出来るプロパティです。グラデーションの種類、開始色、途中色、終了色などを指定することで、様々なグラデーションを表現することが出来ます。上画像は、グラデーションをH１要素に掛けたサンプルです。実際のブラウザでの表現は、画像下のリンクから確認してみて下さい。なお、Safari, Chrome, Firefoxに対応しています。

グラデーションを指定する方法

グラデーションを指定する方法は、webkit系ブラウザ(Safari,Chrome)と、Firefoxとで異なるようです。それぞれの指定方法を記載したいと思います。

縦方向のグラデーションを指定する

以下のようなCSSを記載します。

.horizon-gradient {
  /* for firefox */
  background: -moz-linear-gradient(top, #FFFFFF, #91D0D8 3%, #003366);
  /* for safari and chrome */
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.03, #91D0D8), to(#003366));
}

firefox用CSSでは、「-moz-linear-gradient(開始位置, 開始色, 途中色途中色位置, 終了位置」、webkit用CSSでは、「-webkit-gradient(種類, 開始位置, 終了位置, 開始色, 途中色, 終了色」を指定する事で、グラデーションを表現出来ます。

横方向のグラデーションを指定する

以下のようなCSSを記載します。

.vertical-gradient {
  /* for firefox */
  background: -moz-linear-gradient(left, #FFFFFF, #91D0D8 3%, #663300);
  /* fore safari and chrome */
  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(0.03, #D8D091), to(#663300));
}

linearグラデーションの場合、開始位置や終了位置の指定を変える事で、縦方向や横方向のグラデーションを表現出来るようです。

円形のグラデーションを指定する

次の円形のグラデーションを指定するサンプルを記載します。

.round-gradient {
  /* for firefox */
  background: -moz-radial-gradient(top right, circle, #91D0D8 0px, #144976 35px, #32698D 40px, #144976 70px, #32698D 75px, #144976 110px);
  /* for safari and chrome */
  background: -webkit-gradient(radial, right top, 0, right top, 110, from(#91D0D8), color-stop(35%, #144976), color-stop(40%, #32698D), color-stop(70%, #144976), color-stop(75%, #32698D), to(#144976));
}

firefox用CSSでは、「-moz-radial-gradient(開始位置, circle, 開始色開始色の半径, 途中色途中色の半径, ・・・, 終了色終了色の半径」を指定し、webkit用CSSでは、「-webkit-gradient(種類, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, 開始色, 途中色, ・・・, 終了色」という指定をする事で、円形グラデーションが出来るようです。

Safari, Chrome, Firefox以外にもグラデーションを行うには

IEでグラデーションを表現するには、IE専用のCSSが必要になるようです。以下のサイトにちょこっとサンプルが記載されていました。

http://www.uka-blog.com/web/html_css/entry_001292.php

Operaでのグラデーションは、線形グラデーションが利用出来るようです(2011年8月現在）。「-o-linear-gradient(開始色, 終了色)」の指定をすると出来るようです。詳しくは以下のサイトを参考にしてみて下さい。

http://dev.opera.com/articles/view/css3-linear-gradients/

W3Cのページ

W3CではCSS3のgradientの仕様確定中のようですね。以下ページから現在の状況を確認出来ます。

http://www.w3.org/TR/css3-images/#gradients

最後に

CSS3のグラデーションや、丸っとした角や、背景画像の細かい指定が可能となった事で、Web上での表現が広がっているんですね。表現力があれば、より魅力的なサイトが作れそうです。