パーツ番号 09-08-10 ・ CSSのみ

準備中・Coming Soonイラスト(静止)

時計モチーフのCSS図形で公開準備中であることを伝える静止イラスト。近日公開ページやメンテナンス案内に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-10-wrap">
          <div class="d09-08-10-clock">
            <span class="d09-08-10-hand d09-08-10-hand-h"></span>
            <span class="d09-08-10-hand d09-08-10-hand-m"></span>
          </div>
          <p class="d09-08-10-text">Coming Soon</p>
          <p class="d09-08-10-sub">近日公開予定です</p>
        </div>

CSS

.d09-08-10-wrap{ text-align:center; }
        .d09-08-10-clock{ position:relative; width:64px; height:64px; margin:0 auto 14px; border-radius:50%; border:6px solid #d7dbe3; background:#f5f6f9; }
        .d09-08-10-hand{ position:absolute; left:50%; bottom:50%; background:#9aa0ac; transform-origin:bottom center; border-radius:2px; }
        .d09-08-10-hand-h{ width:3px; height:16px; margin-left:-1.5px; transform:rotate(35deg); }
        .d09-08-10-hand-m{ width:2px; height:22px; margin-left:-1px; transform:rotate(120deg); }
        .d09-08-10-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-10-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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