【CSS3】 グラデーションを表現する gradient を試してみた。

CSS3では、画像を使わなくてもグラデーションを表現できるそうだ。ということで、遅まきながらやってみた。

以下いきなりだが、参考にさせていただいたウェブページ。

• CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
• CSS3グラデーションを簡単に作成できる -CSS3 Gradient Generator | コリス
• CSS3サンプル / gradient

ざっとググってみた感触だと、対応しているのは Webkit系 と Gecko系 のみだし、この2者の間でも実装がぜんぜん違う。まだぜんぜん仕様が詰まってないんじゃないかという印象で、使うにしても将来どうなるかわからない前提で使った方がよさそうだ。

・・・という感じだけど、でもまぁやってみることに。

一番基本っぽい実装

とりあえず、Gecko系とWebkit系とで、もっとも基本となるだろう実装をしてみる。
黒(#000000)から始まり、白(#ffffff)で終わるグラデーション。

• 実装サンプル gradient_1.html

<style type="text/css">
  .gradient1{
    background:#000000;/*未対応ブラウザへの代替指定*/
    /* Gecko系 */
    background: -moz-linear-gradient(
      top,     /*方向*/
      #000000, /*開始色*/
      #ffffff  /*終了色*/
    );
    /* Webkit系 */
    background: -webkit-gradient(
      linear,
      left top,      /*開始位置*/
      left bottom,   /*終了位置*/
      from(#000000), /*開始色*/
      to(#ffffff)    /*終了色*/
    );
  }
</style>
<div class="gradient1">
    グラデーションテスト。<br />
    グラデーションテスト。<br />
    グラデーションテスト。<br />
</div>

まずここまでで驚いたのは、gradientはプロパティ名じゃないんだということ。background は、確か背景系プロパティのショートハンドだったような・・・。とすると、本当は background-gradient とか background-color とかに適用するんじゃないかと思って試したが、どちらもハズレだった。この点は謎だ。

グラデーションに未対応のブラウザに対して代替表現を提供する方法については、gradientを指定する前に、background:#000000; として背景色を指定しておくなどすれば大丈夫そうだ。

Firefox(Gecko系)の -moz-liner-gradient()

Gecko系では、-moz-liner-gradient() の括弧の中に引数を指定して、細かい動作を指定するようだ。

第1引数に 方向 を指定する。

top

上から下へ

bottom

下から上へ

left

左から右へ

right

右から左へ

left top

左上から右下へ

left bottom

左下から右上へ

right top

右上から左下へ

right bottom

右下から左上へ

基本的に、開始位置を指定すると、その反対側へ向かってグラデーションするという感じなようだ。

第2引数は開始地点の色、第3引数は終了地点の色を指定している。後に実験するが、この間に複数のポイントを挟むと、複数色のグラデーションができるようだ。

Safari/Chrome(Webkit系)の -webkit-gradient()

Webkit系の方は、-webkit-gradient() という名前になっている。Gecko系にあった liner の部分は、第1引数に指定する形になっているようだ。

第2引数に開始位置、第3引数に終了位置の指定を与える。Gecko系と違って終了地点を勝手に決めてくれないようだ。

第4引数、第5引数が、開始色、終了色になっている。色指定が from() と to() というので囲まれている点が気になる。

こちらも、開始色、終了色の間に複数の地点の色を指定できるようだ。後述。

グラデーションを横方向にする

グラデーションの方向を、左から右への横方向に変更してみた。

Gecko系では第1引数を left に、Webkit系では、第2引数、第3引数を、それぞれleft top、right top にした。

• 実装サンプル gradient_1left.html

<style type="text/css">
  .gradient1left{
    color:#666666;
    background:#000000;/*未対応ブラウザへの代替指定*/
    /* Gecko系 */
    background: -moz-linear-gradient(
      left,
      #000000,
      #ffffff
    );
    /* Webkit系 */
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#000000),
      to(#ffffff)
    );
  }
</style>

複数のポイントを設定する

黒→赤→緑→青→白 というグラデーションを指定してみる。

• 実装サンプル gradient_2.html

<style type="text/css">
  .gradient2{
    /* Gecko系 */
    background: -moz-linear-gradient(
      top,
      #000000,
      #ff0000 25% ,
      #00ff00 50% ,
      #0000ff 75% ,
      #ffffff
    );
    /* Webkit系 */
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#000000),
      color-stop( 0.25 , #ff0000 ),
      color-stop( 0.5  , #00ff00 ),
      color-stop( 0.75 , #0000ff ),
      to(#ffffff)
    );
  }
</style>

Gecko系では、第2引数 開始色と第3引数 終了色との間に、 #ff0000 25% , という項目を足していく。
左側は色、右側は地点を示している。25% は、開始地点と終了地点の間の25%地点のこと。

Webkit系では、第4引数、第5引数の間に color-stop( 0.25 , #ff0000 ), を足していく。こちらは左が位置指定で右が色指定。
位置指定は終点を1として、そこまでの割合を少数で指定するようだ。

半透明のグラデーション

Gecko系、Webkit系ともに、色の指定を rgba という単位で指定すると、透明度を指定できるようだ。(rgba は Red, Green, Blue, Alpha のこと)

• 実装サンプル gradient_3.html

<style type="text/css">
  .gradient3{
    color:#666666;
    background:#000000;/*未対応ブラウザへの代替指定*/
    /* Gecko系 */
    background: -moz-linear-gradient(
      top,
      #000000,
      rgba(255,255,255,0.5)
    );
    /* Webkit系 */
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#000000),
      to(rgba(255,255,255,0.5))
    );
  }
</style>

上の例では、背景に敷いたアミアミ模様が透けて見えている。

まとめ

このサンプルを試してみたブラウザを列記。

この時点で、Gecko系(Firefox) と Webkit系(Safari, Chrome) がそれぞれ独自に実装している段階ということを考えると、標準仕様として1本で使えるまでにはまだだいぶ時間がかかりそうだ。

いまこれを何かに使うとすれば、Mobile Safari でも動作するので、iPhone向けに特化した場合などは利用できるだろうが、iPhoneに特化すること自体どうかと思うので、あまりお勧めできない。

もう少し成熟を待ったほうがよい機能だと思う。