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

エ・ビスコム・テック・ラボ
2009/03/06 11:57

Safari 4（ベータ版）とGoogle Chrome（開発版）が対応したグラディエント（Gradient）の機能を利用すると、CSSで簡単にグラデーションを表現することができる。グラデーションは透過することもできるため、対応ブラウザが増えれば表現の幅が大きくアップするだろう。

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

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

　グラデーションを表示するには、-webkit-gradient()を利用して次のように指定する。ここでは<div>の背景に黄緑色（#66ff00）から水色（#00aaff）に変化するグラデーションを表示した。このように直線的に変化するグラデーションを「線形グラデーション」と呼ぶ。

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

<div>
GRADIENT
</div>
※ブラウザで表示を確認する

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

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

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

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
仮想化 Microsoft iPhone Firefox 3 データベース google HTML linux javascript Safari Ajax リファレンス アプリケーション WebKit Webサービス Mac OS X インストール java Webデザイン Opera php Windows 7 プログラミング言語 iPhone 3G iPod touch マイクロソフト Off Topic RIA 開発環境 Flash Mozilla 小技 OS クラウド セキュリティ Tips Windows Windows XP CSS Internet Explorer UI Windows Vista オープンソース Chrome 脆弱性 ブラウザ Database ソフトウェア開発 Firefox Apple
  • 話題のタグを見る »