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

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

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

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

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

一番基本っぽい実装

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

<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_1.htmlを表示した図

まずここまでで驚いたのは、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 にした。

<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_1left.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>

gradient_2.htmlを表示した図

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

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

半透明のグラデーション

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

<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>

gradient_3.htmlを表示した図

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

まとめ

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

ブラウザ 動作
Internet Explorer 8 ×
Firefox 3.6.3
Safari 4.0.5
Google Chrome 5.0.375.86
Opera 10.60 ×
iPhone 3GS (iOS4) Mobile Safari

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

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

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


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る