パーツ番号 11-12-02 ・ CSSのみ

グラデーション背景+ロゴのスプラッシュ(静止)

斜めのブランドグラデーションを全面に敷き、白抜きロゴを中央に置いた起動画面。会員サイトやECアプリのブランディングを起動画面から印象づけたい場合に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-02-wrap">
          <div class="d11-12-02-logo">
            <svg viewBox="0 0 40 40" width="30" height="30"><circle cx="20" cy="20" r="16" fill="none" stroke="#fff" stroke-width="3"/><circle cx="20" cy="20" r="6" fill="#fff"/></svg>
          </div>
          <p class="d11-12-02-name">Nozomi</p>
        </div>

CSS

.d11-12-02{ background:linear-gradient(135deg,#6366f1,#a855f7); padding:0; }
        .d11-12-02-wrap{ text-align:center; }
        .d11-12-02-logo{ width:58px; height:58px; margin:0 auto; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); }
        .d11-12-02-name{ margin:12px 0 0; font-size:14px; font-weight:700; letter-spacing:.05em; color:#fff; }

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