読者です 読者をやめる 読者になる 読者になる

CSS3のグラデーションを使って雀を描く

CSS3 のグラデーションを使ってすずめを描いてみました。Firefox などレンダリングエンジンに Gecko を採用しているブラウザのみ対応。


Webkit に対応していない理由はグラデーションの指定方法が違うため、表現できない部分があるからです。先行実装のため Webkit を使用している SafariGoogle Chrome でも実装が異なります。
以下に指定方法の違いを簡単にまとめておきます。

線形グラデーション

-webkit-gradient(
  linear,
  <point1>, <point2>,
  <stops>...)
-moz-linear-gradient(
  <point> <angle>,
  <stops>...)

Webkit では開始点と終了点を指定します。left, top, right, bottom, center を組み合わせた値が使えるほか、%値、単位なしのピクセル値も使用できます。
一方 Gecko では開始点と角度を指定します。 には left, top, right, bottom, center を組み合わせた値、%値、20em など単位つきの値が使用できます。 は 30deg や -0.6rad のように指定します。
線形グラデーションに関しては、表現可能な範囲に差はありません。ただし Gecko では終了点を指定できないため、ボックスの大きさを考慮に入れる必要があります。Webkit のほうが指定しやすいといえるでしょう。

円形グラデーション

-webkit-gradient(
  radial,
  <position1>, <radius1>, <position2>, <radius2>,
  <stops>...)
-moz-radial-gradient(
  <position> <angle>,
  <shape> <size>,
  <stops>...)

Webkit では開始点、終了点の位置とその半径を指定します。こちらも left や top などの値、%値、単位なしのピクセル値を使用します。なお、開始・終了点の位置が異なる場合の表示は規定されていないので、同じ値にする必要があります。
Gecko では開始点、形状 (circle または ellipse)、大きさ (ボックスの四辺に依存) を指定します。 は機能していないようです。
Webkit はボックスの形状に依存しない円形グラデーションが可能です。一方 Gecko はボックスの形状に依存するぶん面倒ですが、楕円形のグラデーションが可能です。一長一短ですね。というかこんな使い方ふつうしませんね。

参考

Webkit と Gecko で異なるグラデーションの指定方法ですが、将来的には Gecko の指定方法を採用するようです。Webkit のナイトリービルドではすでに -webkit-linear-gradient と -webkit-radial-gradient が実装されています。これまでの -webkit-gradient も使えるので心配無用。

技術資料はこちら。