CSSでグラデーションを表現する

エ・ビスコム・テック・ラボ
2009-03-06 11:57:01
Safari 4（ベータ版）とGoogle Chrome（開発版）が対応したグラディエント（Gradient）の機能を利用すると、CSSで簡単にグラデーションを表現することができる。グラデーションは透過することもできるため、対応ブラウザが増えれば表現の幅が大きくアップするだろう。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　今回は、グラディエントの機能と-webkit-gradientプロパティについて詳しく紹介していきたい。-webkit-gradientプロパティの基本的な機能については、前回の「Safari 4が対応したCSSの新機能：グラディエント、反転、マスク」を参照してほしい。

グラデーションの表示：-webkit-gradient()

　グラデーションを表示するには、-webkit-gradient()を利用して次のように指定する。ここでは

の背景に黄緑色（#66ff00）から水色（#00aaff）に変化するグラデーションを表示した。このように直線的に変化するグラデーションを「線形グラデーション」と呼ぶ。

サンプル01 サンプル01 
div{
background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), to(#00aaff));
}


GRADIENT
※ブラウザで表示を確認する

　-webkit-gradient()では線形グラデーションに関する設定を次のような形式で指定する。

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色));

　さて、次ページではグラデーションの開始位置と終了位置、開始色と終了色の指定方法を紹介していきたい。

  • 新着記事
  • 特集
  • ブログ