CSSでグラデーション


実行例

CSS(CSS3)だけでグラデーションをつけられます。

コードは下記の通り。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.bg-grad
{
    width: 400px;
    height: 150px;
    padding: 25px;
    border: 5px solid #000000;
    background: #000099;
    /* Webkit系 */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccccff), to(#000066));
    /* Mozilla系 */
    background: -moz-linear-gradient(top, #ccccff, #000066);
    /* IE10+ */
    background: -ms-linear-gradient(top, #ccccff, #000066);
    /* IE8-9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0)";
    /* IE5.5-7 */
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0); */
}
</style>
</head>
<body>
<p class="bg-grad">グラデーション</p>
</body>
</html>

解説

ブラウザーによって、指定方法が異なります。

  • webkit は Chrome、Safari
  • moz は Firefox
  • ms は IE

さらに IE の場合、

  • IE10 以降は background: -ms-linear-gradient ...
  • IE8、9 は -ms-filter: "progid:DXImageTransform ...
  • IE5.5~7 は filter: progid:DXImageTransform ...

と分かれます。ただし、filter: は新しいIEでも解釈されるため、-ms-filter: と filter: を同時指定するのはあまり意味がないそうです。

「じゃあ filter: だけ指定すればいいのでは?」とも思いますが、filter: はCSSの正しい書式( 属性:値; )に従っておらず、コロンが2回登場します。そのため、ブラウザーによってはスタイルが崩れる危険性があるため、使用は控えたほうがいいそうです。-ms-filter: のほうはダブルクォーテーションで囲む書式に改良されたため問題ありません。

ちなみに、左から右へのグラデーションはこんな感じ。

/* Webkit系 */
background: -webkit-gradient(linear, left top, right top, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(left, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(left,  #ccccff,  #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1)";
/* IE5.5-7 */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1);

参考URL

画像を使わないで、CSSを使ってグラデーションする!!(IE対応)
http://infinityforest.net/home/archives/830

-ms-filterは無意味
http://sayurin.blogspot.jp/2012/12/ms-filter.html