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

手描き風不均一下線見出し

太さが均一でない歪んだ線を見出し下に敷き、手描きのような柔らかさを演出するスタイル。カフェやハンドメイド系サイトの見出しに合う。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">手描き風見出し</h4>
          <div class="hand-line"></div>
        </div>

CSS

.d02-10-31 .wrap{ text-align:center; }
        .d02-10-31 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1f2937; margin-bottom:6px; }
        .d02-10-31 .hand-line{ width:140px; height:6px; margin:0 auto; background:#f97316; border-radius:255px 15px 225px 15px/15px 225px 15px 255px; opacity:.8; }

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