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

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

グラデーションの開始位置と終了位置

 グラデーションの開始位置と終了位置は、それぞれ「横方向の位置 縦方向の位置」という形で指定する。たとえば、サンプル01では開始位置を「left top」、終了位置を「left bottom」と指定しているため、上から下へのグラデーションとなる。

 開始位置を「right bottom」、終了位置を「left top」と指定すれば、右下から左上へのグラデーションを表示できる。

右下から左上へのグラデーション 右下から左上へのグラデーション
div{
background: -webkit-gradient(linear, right bottom, left top, from(#66ff00), to(#00aaff));
}
ブラウザで表示を確認する

 なお、位置指定に利用できる値は上記のようなキーワード(left、right、top、bottom、center)か、数値(ピクセルなど)、または割合(%)となっている。CSSに馴染んでいれば、「background-positionプロパティと同じ形で値を指定できる」と考えればわかりやすいだろう。

グラデーションの開始色と終了色

 「from(〜)」ではグラデーションの開始色を、「to(〜)」では終了色を指定する。たとえば、サンプル01をオレンジ色(#ff6600)から黄色(#ffff00)に変わるグラデーションにするためは、次のように色の値を指定する。

オレンジ色から黄色に変わるグラデーション オレンジ色から黄色に変わるグラデーション
div{
background: -webkit-gradient(linear, left top, left bottom, from(#ff6600), to(#ffff00));
}
ブラウザで表示を確認する

 以上が、-webkit-gradient()の基本的な使い方だ。次に、グラデーションの途中に色を追加する方法、グラデーションを透過する方法を紹介する。

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