m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: smartin3.de — solid text-shadow extrusion, no gaps between layers

Browse Source
This commit is contained in:
m
2026-04-18 21:07:20 +02:00
parent 5454f0fc27
commit 5a2416f3a6
1 changed files with 8 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
sites/smartin3.de/index.html
View File

@@ -115,21 +115,16 @@
.text3d-face {
display: block;
color: var(--orange);
text-shadow:
0 0 0 #f97316,
0px 1px 0px #e8690f, 0px 2px 0px #d75f0e, 0px 3px 0px #c6550c,
0px 4px 0px #b54b0b, 0px 5px 0px #a4410a, 0px 6px 0px #933808,
0px 7px 0px #822e07, 0px 8px 0px #712506, 0px 9px 0px #601c05,
0px 10px 0px #4f1404, 0px 11px 0px #3e0c03, 0px 12px 0px #2d0502,
0px 13px 0px #1f0e03, 0px 14px 0px #150a02,
0px 18px 30px rgba(0,0,0,0.4);
}
.text3d-depth {
position: absolute; top: 0; left: 0;
}
.text3d-depth:nth-child(2) { transform: translateZ(-3px); color: #d4620f; }
.text3d-depth:nth-child(3) { transform: translateZ(-6px); color: #b8530d; }
.text3d-depth:nth-child(4) { transform: translateZ(-9px); color: #9c450b; }
.text3d-depth:nth-child(5) { transform: translateZ(-12px); color: #803709; }
.text3d-depth:nth-child(6) { transform: translateZ(-15px); color: #642a07; }
.text3d-depth:nth-child(7) { transform: translateZ(-18px); color: #4a1f05; }
.text3d-depth:nth-child(8) { transform: translateZ(-21px); color: #331604; }
.text3d-depth:nth-child(9) { transform: translateZ(-24px); color: #1f0e03; }
@keyframes rotateText {
0% { transform: rotateX(-25deg) rotateY(0deg); }
100% { transform: rotateX(-25deg) rotateY(360deg); }
@@ -383,14 +378,6 @@
<div class="text3d-wrapper">
<div class="text3d">
<span class="text3d-face">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
<span class="text3d-depth" aria-hidden="true">smart</span>
</div>
</div>