[装飾系]下線見出し グラデーションの下線

CSS HTML
 
 

グラデーションの下線

左から右に色の変わるグラデーションで下線を作った見出しです。

グラデーションの設定について。
linear-gradient(135deg, #1E88E5 0%,#039BE5 25%,#00ACC1 50%,#00897B 75%,#43A047 100%);
135度に傾いたグラデーションで
青（#1E88E5）から25%で青緑（#00ACC1）、50%で緑寄りの青緑（#00ACC1）、75%でさらに緑寄りの青緑（#00897B）、100%で緑色（#43A047）で終わる
browser:  ✔︎ ✔︎ ✔︎ 
ニャン易度 

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
    .cp_h1title{
      position: relative;
    }
    .cp_h1title::before {
      position: absolute;
      content: '';
      bottom: 0;
      width: 100%;
      height: 5px;/*ラインの太さ*/
      background: linear-gradient(135deg, #1E88E5 0%,#039BE5 25%,#00ACC1 50%,#00897B 75%,#43A047 100%);/*グラデーションの設定*/
    }

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？