本サイトはアフィリエイト広告を利用しています

CSSのお勉強:グラデーションの基本(3)【conic-gradient】

- スポンサーリンク -

backgroundに指定できるグラデーションの種類

グラデーションには、線形グラデーション、放射グラデーション、扇形グラデーションがあります。

▼ 線形

▼ 放射

▼ 扇形

こちらの記事では、扇形グラデーションについてまとめています。

扇形グラデーション:conic-gradient

conic-gradient()は、中心点を軸に、時計回りに回転しながら円錐状のグラデーションを生成する関数です。日本語では扇形と訳されていますが、実際には円錐を真上から見た状態のグラデーションになっています。

conic=円錐

中心点の規定値はcenterで要素の真ん中ですが、任意の位置を指定することもできます。

記述方法

基本的には、異なる2色を指定すれば、領域の中心点から時計回りにグラデーションが表示されます。任意で、開始位置(角度)や中心点の位置を指定できます。

background: conic-gradient(角度,中心点の位置,始点の色,終点の色);

2色のみ

▼ Sample

background: conic-gradient(skyblue, pink);

複数の色を指定

▼ Sample

background: conic-gradient(skyblue, yellow, lightgreen, orange, pink);

開始位置と終了位置の指定

linear-gradientやradiul-gradientと同様に、色の開始位置と終了位置を指定することができます。

扇形グラデーションの色経由点は角度を指定します。使用する単位には「度」を表す deg、回転数を表す turn などがあります。

▼ Sample

/* カラーストップ(経由点)指定 */
    background: conic-gradient(
        skyblue 0, 
        yellow 90deg, 
        lightgreen 180deg, 
        pink 270deg);

/* 開始点と終了点を指定 */
    background: conic-gradient(
        skyblue 0 90deg, 
        yellow 90deg 180deg, 
        lightgreen 180deg 270deg, 
        pink 270deg 360deg);

border-radiusを追加して要素を円形にすれば、円形グラフのようになります。

border-radius: 50%; /* 要素の丸み */

開始位置(角度)の指定は [from]

from」に続いて角度を指定すると、グラデーションの開始位置を設定できます。

▼ Sample

background: conic-gradient(from 45deg, skyblue, pink);

中心点の位置は [at]

at」に続いてキーワード(top、bottomなど)、数値+単位(px)、%値を入力すると、任意の場所に中心点を移すことができます。

数値と%値で指定する場合、要素の左上を基準にして、X/Y 座標を定義します。先に記述したほうが水平方向、後に記述したものが垂直方向を示します。

▼ Sample

background: conic-gradient(
    at 30px 40px, 
    skyblue 120deg, 
    yellow 120deg 240deg, 
    pink 240deg);

▼ Sample

background: conic-gradient(
    at 40% 60%, 
    skyblue 120deg, 
    yellow 120deg 240deg, 
    pink 240deg);

実践編

扇形グラデーションを生成するconic-gradientを使ったデザインです。

▼ Sample

アンケート結果

  • 20代~30代: 60%
  • 40代~50代: 25%
  • 60代~70代:10%
  • 80代以上: 5%
width: 150px;
height: 150px;
background: conic-gradient(
   skyblue 60%, 
   pink 60% 85%, 
   lightgreen 85% 95%, 
   yellow 95%);
border-radius: 50%;

解説

  • 経由点を利用して、円グラフ風に表示してみました。
  • border-radiusを使って、ボックスを円形にしています。

▼ Sample

ドーナツ風グラフ

グラデーションを複数重ねることができる特徴を活かして作ります。

扇形グラデーション自体は上と同じですが、radial-gradientで作成した円形グラデーションを上に重ねて中心を隠し、ドーナツタイプのグラフにしています。

アンケート結果

  • 20代~30代: 60%
  • 40代~50代: 25%
  • 60代~70代:10%
  • 80代以上: 5%
width: 150px;
height: 150px;
background: 
   radial-gradient(white 40%, transparent 41%),
   conic-gradient(skyblue 60%, pink 60% 85%, lightgreen 85% 95%, yellow 95%);
border-radius: 50%;
border: none;

解説

  • transparentは「透明色」を指定するキーワードです。
  • transparentの開始点は、1番目の色(white)の終了点と同じ値にするとギザギザしたので、1%を加えてぼかし効果にしています。

repeatingをつけて反復グラデーション

repeating-conig-gradientを使うと、扇形グラデーションを繰り返し表示することができます。


- スポンサーリンク -
HTML&CSS
タイトルとURLをコピーしました