今回はCSSでグラデーション表現について勉強していきます・・・
グラデーションできるとかっこいいよね。
SVGにもグラデーション表現はあるんですが、最近、やはりどのブラウザにも対応するCSSで何でも出来るようになった方がいいのでは…？と思い始め、CSSも力を入れていこうと思いなおしています…。
CSSのグラデーション関数
MDN Web Docs によるとグラデーションは
線形 (linear)・・・ linear-gradient() 関数によって生成
放射 (radial) ・・・radial-gradient() 関数によって生成
扇形 (conic) ・・・conic-gradient() 関数によって生成
の3種類があり、背景など、<image> が使えるところならば、どこでも利用できる。
線形グラデーション
線形グラデーションは直線に沿ったグラデーションです。
background: linear-gradient(blue, red);
グラデーションの方向はデフォルトが下に向けて↓の方向になっています。色の値の前に方向を指定することができます。
background: linear-gradient(to right, blue, red);
この方向は以下の表のような指定で記述できます。
| to top left | to top | to top right |
| to left | to right | |
| to bottom left | to bottom | to bottom right |
しかしこれでは斜め45°しか表現できません。角度を入力すればもっと細かい制御が可能です。
background: linear-gradient(160deg, blue, red);
0deg は下から上への垂直グラデーション、 90deg は左から右への水平グラデーションを生成します。
３色以上のグラデーション
複数の色を指定することで何色ものグラデーションを作ることができます。
background: linear-gradient(yellow, white, blue, red);
デフォルトは各色が等分の幅になっています。
色経由点の配置をすることにより、各色の幅を調整することができます。
background: linear-gradient(to right,yellow,white 70%,blue 80%,red);
パーセント値で指定する場合は、0％が開始点を示し、100％が終了点を示します。
隣合う色の色経由点を同じ位置に設定することにより、不連続なグラデーション、つまり縞模様のようにもできます。
background: linear-gradient(to right,yellow 20%,white 20% 50%,blue 50% 80%,red 80%);
グラデーションの変化の中心点を変更することもできます。
background: linear-gradient(blue, 10%, red);
デフォルトは中心点50％ですが、10％に変更することで青の上の方で赤と混ざっています。
グラデーションの重ね合わせ
透明色を重ね合わせることによってグラデーションの重ね合わせも可能です。
background:
linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,0)),
linear-gradient(to right,rgba(0,0,255,.8), rgba(0,0,255,0));
上下方向と左右方向のグラデーションが混ざっています。
放射グラデーション
放射状に広がるグラデーションです。
background: radial-gradient(blue, red);
放射グラデーションを作成するために必要なのは 2 色だけ。中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合うようになっています。
放射色経由点、複数色グラデーションも線形グラデーションと同様に可能です。
グラデーション中心位置の移動
グラデーション中心位置を指定することができます。
background: radial-gradient(at 0% 20%, blue, red);
at 左からの位置 上からの位置 の順で指定します。
扇型グラデーション
扇型グラデーションもCSSで表現できます。
注：扇型グラデーションは Internet Explorerではサポートされていません。
background: conic-gradient(blue, red);
デフォルトはグラデーションの中心は 50% 50% の位置で、グラデーションの開始点は上向きです。
コメント