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

立体レイヤーシャドウ見出し

text-shadowを重ねて奥行きを作り、色相がゆっくり移り変わりながら揺れ続ける立体文字。WordPressのゲーム・エンタメ系サイトの目立たせたい見出しに。

css3d

プレビュー

ソースコード

HTML

<h4 class="d02-01-12-h">DEPTH</h4>

CSS

.prev.d02-01-12{ background:#12141c; }
        .d02-01-12 .d02-01-12-h{
          font-size:44px;
          font-weight:900;
          letter-spacing:.06em;
          color:#f5f5f7;
          text-shadow:
            1px 1px 0 #6366f1,2px 2px 0 #6366f1,3px 3px 0 #6366f1,
            4px 4px 0 #6366f1,5px 5px 0 #6366f1,6px 6px 10px rgba(0,0,0,.5);
          animation:d02-01-12-shift 5s ease-in-out infinite,d02-01-12-hue 6s linear infinite;
        }
        @keyframes d02-01-12-shift{
          0%,100%{ transform:translate(0,0); }
          50%{ transform:translate(-4px,-3px); }
        }
        @keyframes d02-01-12-hue{
          0%{ filter:hue-rotate(0deg); }
          100%{ filter:hue-rotate(360deg); }
        }

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