cssでグラデーションをつける

css

今まで li要素などにグラデーションをつけるには小さいグラデーション画像を作って background-image に設定していたけど、cssでもグラデーションを付けられることがわかったのでやってみる。
cssの方が画像読み込みの時間が省略できるし、画像読み込み時のぱらぱらした遅延描画がなくなるのがいい。最初からグラデーションされた画面を表示できる。

  • 変更前。ちっちゃい画像をリピートで背景に設定していた
  background-image: url("/img/todo/doing_gra.jpg");
  background-position: center bottom;
  background-repeat:  repeat;
  • 変更後。様々なブラウザへの対応を書かないといけないけれど、画像はいらなくなる。
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#e0f0f6), to(#90c0c6));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #e0f0f6, #90c0c6);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e0f0f6, endColorstr=#90c0c6);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFe0f0f6, endColorstr=#FF90c0c6)";

最大のメリットは、li要素が縦に長くなった場合に画像の場合は縦方向へのリピート表示でグラデーションが段々になってみっともなくなるけれど、cssではいくら伸ばしてもグラデーションを維持してくれる。こういう些細な表示って使う側のモチベーションに多少影響するから結構重要だと思った。

ただ、IE6 での表示がうまくいかない。なぜだろう‥。

参考