そして伝説になりたかった

働きたくない男の雑記・備忘録

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

投稿日:2019/1/8 最終更新日:2019/11/19 閲覧数:1477

カテゴリー: システム・WEB>

昔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#スタイルシート#ハイライト表示#もっと早く知りたかった#下半分#背景

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す