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

エ・ビスコム・テック・ラボ
2009-03-06 11:57:01
  • このエントリーをはてなブックマークに追加

 今回は、グラディエントの機能と-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(終了色));

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

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]