CSSで円形のグラデーションを作成する

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

 前回紹介した-webkit-gradient()を利用すると、線形グラデーションだけでなく円形のグラデーションを作成することもできる。そこで今回は、円形グラデーションの機能を紹介していきたい。

 なお、ブラウザはSafari 4(ベータ版)とGoogle Chrome(開発版)が対応しているが、輪郭のぼかし具合などがきれいなので、今回はGoogle Chromeを使って表示を確認していく。

円形グラデーションの表現

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

の背景に黄色(#ffff00)から緑色(#008844)に変化する円形グラデーションを表示した。

円形グラデーションの表示 円形グラデーションの表示
div{
background: -webkit-gradient(radial, center center, 20, center center, 100, from(#ffff00), to(#008844));
}
GRADIENT
ブラウザで表示を確認する

 -webkit-gradient()では円形グラデーションに関する設定を次のような形式で指定する。線形グラデーションでは1つ目のパラメータを「liner」と指定したが、円形グラデーションでは「radial」と指定するのがポイントだ。

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), to(終了色));

位置と半径の指定

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