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

パターン背景+ロゴのスプラッシュ(静止)

小さなドットを敷き詰めた背景に、ロゴを載せたカードを中央配置した起動画面。テクスチャで単調さを避けたいアプリ風サイトの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-05-card">
          <svg viewBox="0 0 40 40" width="26" height="26"><rect x="6" y="6" width="28" height="28" rx="7" fill="#fff"/></svg>
        </div>

CSS

.d11-12-05{ background-color:#0ea5e9; background-image:radial-gradient(rgba(255,255,255,.28) 1.5px, transparent 1.5px); background-size:16px 16px; padding:0; }
        .d11-12-05-card{ width:70px; height:70px; border-radius:20px; background:#0284c7; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(2,132,199,.4); }

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