cssのみで背景にグラデーションを適用する(応用編あり)

昔webサイト製作会社で働いていた頃、ベタ塗り以外のグラデーション入り背景とか、 細いライン入りの背景は画像を使うしかないと思っていました。
でも調べてみると、cssだけでも実装できるんですよね。新人研修の段階で教えて欲しかった…

    <style>
        /*グラデーション*/
        .bg01{
            background: linear-gradient(#0bb,#055);
        }
        /*角度変更*/
        .bg02{
            background: linear-gradient(-90deg, #0bb,#055);
        }
        /*色切り替え幅指定*/
        .bg03{
            background: linear-gradient(#0bb 50%,#055 50%);
        }
        /*連続*/
        .bg04{
            background: linear-gradient(-90deg, #0bb,#055,#0bb,#055);
        }
        /*幅指定＋連続*/
        .bg05{
            background: linear-gradient(#0bb 25%,#055 75%);
            background-size: 4px 4px;
            background-repeat: repeat repeat;
        }
        /*透明グラデーション*/
        .bg06{
            background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 187, 187, 1));
        }
    </style>

• グラデーション
• 角度変更
• 色切り替え幅指定
• 連続
• 幅指定＋連続
• 透明グラデーション

はい、linear-gradientの存在を知っているだけで、これだけ様々なスタイルを実装できるんですね。

ぜひ覚えておいてください

応用編としてこちらもどうぞ

テキストの背景に下半分だけ色をつけるハイライト表示

タグ：#css#スタイルシート#ハイライト表示#もっと早く知りたかった#下半分#背景