(cache) コピペでどうぞ。けものフレンズ風な見出しデザインのカスタマイズ

f:id:tsubasa123:20170223163527j:plain

こんにちは、つばさ（@_tsubasa123_）です。

前回に引き続き、またしても「けものフレンズ」ネタです。見出しのデザインを作ってみましたのでお気に召した方がいらっしゃいましたら一度お試しください。

すごーい！たーのしー！

こんな感じです。いかかでしょうか？我ながらよくこんなことで記事を書いたなと思います。

これ、けものフレンズに便乗しているのでなんかくだらないことをやっているように見えますが、何気にCSSだけでこのように複数の色を利用した線を表現できるというのは結構勉強になりましたし、応用したりアレンジしたりでかなり実用できそうな気がします。たーのしー！

コピペでどうぞ。

使ってみたいという方がいらっしゃいましたら、下記のCSSをコピペしてください。

h2 {
    position: relative;
    padding: 0 0 .5em 0 !important;
    background-color: #fff !important;
    color: #444 !important;
    font-size: 22px;
}

h2::before, h2::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    height: 4px;
}

h2::before {
    z-index: 2;
    width: 15%;
    background-color: #333;
    border: none;
}

h2::after {
    width: 100%;
    background: repeating-linear-gradient(45deg, #23AC69 0px, #23AC69 3px, #91C132 3px, #91C132 6px, #F19726 6px, #F19726 9px, #E8552D 9px, #E8552D 12px, #1AAB8E 12px, #1AAB8E 15px, #E1147F 15px, #E1147F 18px, #2980C1 18px, #2980C1 21px, #1BA1E6 21px, #1BA1E6 24px, #9FA0A0 24px, #9FA0A0 27px, #F19726 27px, #F19726 30px, #E30B20 30px, #E30B20 33px, #E30B20 33px, #E30B20 36px, #A3338B 36px, #A3338B 39px);
}