パーツ番号 02-10-21 ・ CSSのみ

シャドーストライプ見出し

見出し文字の背後にごく薄い横縞を重ねるスタイル。派手さを抑えつつ質感を出したいコラムやコラムタイトルに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">ストライプ見出し</h4>
        </div>

CSS

.d02-10-21 .wrap{ text-align:center; padding:18px 0; }
        .d02-10-21 .ttl{ all:unset; display:inline-block; font-size:22px; font-weight:800; color:#1f2937; background-image:repeating-linear-gradient(0deg, rgba(99,102,241,.1) 0 6px, transparent 6px 12px); padding:4px 10px; }

クラス名 .d02-10-21 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。