CSSでグラデーションを実現する方法、主要ブラウザ全対応

Robert’s talk

Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。

グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。

CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Chrome、Safari)で指定方法が違うという状況にある。最終的にはFirefoxで実装された指定方法で一本化していくのではないかとみられるが、それまでは個々に対応する必要がある。


Firefox 3.6 - CSS gradients for all web browsers, without using imagesサンプルのレンダリング例	Chrome - CSS gradients for all web browsers, without using imagesサンプルのレンダリング例


IE8 - CSS gradients for all web browsers, without using imagesサンプルのレンダリング例	Safar4 - CSS gradients for all web browsers, without using imagesサンプルのレンダリング例

Opera 10.5 - CSS gradients for all web browsers, without using imagesサンプルのレンダリング例

Robert Nyman氏がCSS gradients for all web browsers, without using images - Robert's talkにおいて、IE5.5-7、IE8、Firefox 3.6、Safari4、Chromeのそれぞれで同じグラデーションをレンダリングするためのCSSのサンプルを公開している。ブラウザごとにどのように指定が違っているのか比較できて参考になる。CSS gradients for all web browsers, without using images - Robert's talkに掲載されているサンプルをそのままためせるようにまとめたものを次に掲載しておく。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>グラデーションデモ</title>
<style type="text/css">
#gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
</style>
</head>
<body>
<div id="gradient">
グラデーション
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>グラデーションデモ</title>
<style type="text/css">
#gradient-with-stop {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(left top, #00f, #fff 70%);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
}
</style>
</head>
<body>
<div id="gradient-with-stop">
グラデーション
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>グラデーションデモ</title>
<style type="text/css">
#gradient-radial {
  color: #fff;
  width: 100px;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
  /* For Internet Explorer */
  /* As if... */
}
</style>
</head>
<body>
<div id="gradient-radial">
グラデーション
</div>
</body>
</html>