今回はcssでグラデーションを作る方法について紹介していきたいと思います。
昔はグラデーションを再現するために画像を使用していた時代がありましたが今では画像を使わずにcssでグラデーションの指定をすることができます。（便利な世の中になりました）
CSSでグラデーションの基本
CSSでグラデーションを作る場合はbackgroundプロパティに対して指定をしてあげます。
グラデーションには線形と円形の2種類があります。
線形グラデーション
background:linear-gradient(#4169e1, #fff);線形グラデーションは上記のようにlinear-gradientを指定します。
円形グラデーション
background:radial-gradient(#4169e1, #afeeee);線形グラデーションは上記のようにradial-gradientを指定します。
グラデーションの各パターン
方向を指定する場合は下記の構文を参考にしてください。
background: linear-gradient(to 方向, 開始の色, 終了の色);上から下にグラデーションをかける
上から下にグラデーションをかける場合は「to bottom」と方向を指定します。
background: linear-gradient(to bottom, #FFC778, #FFF);左から右にグラデーションをかける
左から右にグラデーションをかける場合は「to right」を指定します。
background:linear-gradient(to right, #0000ff, #fff);【斜め】左上から右下にグラデーションをかける
左上から右下にグラデーションをかける場合は「to bottom right」を指定します。
background:linear-gradient(to bottom right, #0000ff, #fff);グラデーションの角度を指定する
グラデーションの角度を指定する場合は「deg」を指定します。
下の例では45degを指定することによって左下から右上へ45度の角度でグラデーションがかかります。
background:linear-gradient(45deg, #0000ff, #fff);グラデーションの色が変わる位置を指定する
background:linear-gradient(to right, #0000ff 90%, #fff);複数の色でグラデーションの作る
background:linear-gradient(#0000ff, #ffdab9, #fff);グラデーションの繰り返し（線形）
線形でグラデーションを繰り返したい場合は、「repeating-linear-gradient()」を使います。
background: repeating-linear-gradient(#0000ff 0%, #fff 50%);グラデーションの繰り返し（円形）
線形でグラデーションを繰り返したい場合は、「repeating-radial-gradient ()」を使います。
background: repeating-radial-gradient(#0000ff 0%, #fff 50%);
コメント