글자 바로 아래에 두께만큼 그림자를 촘촘히 쌓아, 마치 입체 블록을 깎아 만든 것처럼 보이게 하는 기법.
디자인 아틀라스<div class="stage3d"><h1 class="ext">3D</h1></div>.stage3d{perspective:600px}
.ext{margin:0;font-size:clamp(70px,22vmin,110px);font-weight:900;color:#ffd23f;
font-family:Arial,Helvetica,sans-serif;transform-style:preserve-3d;animation:tilt 4s ease-in-out infinite;
text-shadow:0 1px 0 #d1a220,0 2px 0 #c49a1e,0 3px 0 #b8911c,0 4px 0 #ab871a,0 5px 0 #9e7e18,
0 6px 0 #927416,0 7px 0 #856b14,0 8px 0 #786112,0 9px 0 #6c5810,0 10px 0 #5f4e0e,0 11px 0 #524508,
0 14px 18px rgba(0,0,0,.5)}
@keyframes tilt{0%,100%{transform:rotateX(24deg) rotateY(-8deg)}50%{transform:rotateX(24deg) rotateY(8deg)}}롱 섀도가 "45도로 멀리 뻗는 그림자"라면, 익스트루드 텍스트는 글자 바로 아래(주로 수직 방향)에 두께만큼만 그림자를 촘촘히 쌓아 "잘려나온 입체 블록"처럼 보이게 합니다. 옆면 색을 원래 색보다 단계적으로 어둡게 하면 빛을 받는 각도가 있는 것처럼 보입니다.
perspective 와 3D transform(rotateX/rotateY)을 함께 쓰면 진짜 카메라가 있는 것처럼 글자를 기울여 두께를 더 드러낼 수 있습니다.
게임 타이틀, 브루탈리즘 헤드라인, 레트로 배지 로고에 씁니다. 본문에는 쓰지 마세요 — 두꺼운 그림자가 가독성을 해칩니다.