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

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

グラデーションの途中に色を追加する

 -webkit-gradient()では、グラデーションの途中に色を追加することもできる。たとえば、サンプル01のグラデーションの中央に黄色(#ffff00)を追加すると次のようになる。

グラデーションの中央に黄色を追加したもの グラデーションの中央に黄色を追加したもの
div{
background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.5, #ffff00), to(#00aaff));
}
ブラウザで表示を確認する

 途中に追加する色は「color-stop(追加位置, 色)」で指定する。追加位置は割合(%)または数値(0〜1.0)で指定することが可能だ。グラデーションの中央に追加したい場合、追加位置は「50%」または「0.5」と指定する。

 また、color-stop()の指定を増やせば複数の色を追加することもできる。たとえば、サンプル01のグラデーションに黄色(#ffff00)とピンク(#ff00ff)を追加すると次のようになる。

グラデーションの中に黄色とピンクを追加したもの グラデーションの中に黄色とピンクを追加したもの
div{
background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]