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

ドットグラデーション背景見出し

見出しの背景に淡い水玉模様を敷いたスタイル。セールやキャンペーン告知のバナー見出しに華やかさを加えられる。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="box">
            <h4 class="ttl">キャンペーン開催中</h4>
          </div>
        </div>

CSS

.d02-10-26 .wrap{ text-align:center; }
        .d02-10-26 .box{ display:inline-block; padding:20px 30px; border-radius:8px; background-color:#fef2f2; background-image:radial-gradient(#fca5a5 1px, transparent 1px); background-size:12px 12px; }
        .d02-10-26 .ttl{ all:unset; display:block; font-size:20px; font-weight:800; color:#7f1d1d; }

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