Use CC0 tileset gravestone PNG instead of CSS-drawn stone

Stone extracted from OpenGameArt's 'Free Graveyard Platformer Tileset'
(CC0) vector sheet, rendered at high res and tinted slate-purple to
match the gothic palette. Moss overlay is now masked by the stone's own
silhouette; skull and R.I.P. engraving stay as overlays.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015HtPHsTnDcLVSCiF5FGHZj
This commit is contained in:
vini 2026-07-19 21:55:35 -03:00
parent d0a063e92a
commit 1338879e1d
2 changed files with 18 additions and 36 deletions

View file

@ -1285,51 +1285,33 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
box-shadow: inset 0 0.7vh 1.2vh rgba(225,232,190,0.20); box-shadow: inset 0 0.7vh 1.2vh rgba(225,232,190,0.20);
} }
/* pedra gótica: arco ogival, ardósia escura, torta e comida pelo tempo */ /* pedra gótica: PNG do tileset CC0 de cemitério (OpenGameArt), tingido
de ardósia arroxeada em tools — ver gravestone.png */
.gravestone { .gravestone {
position: relative; position: relative;
width: 15vh; width: 17vh;
height: 21vh; height: 17.3vh; /* aspecto do PNG 195x198 */
transform: rotate(-2.5deg); background: url('gravestone.png') center / contain no-repeat;
clip-path: polygon(50% 0%, 60% 2%, 71% 8%, 81% 18%, 88% 32%, 91% 50%,
91% 100%, 9% 100%, 9% 50%, 12% 32%, 19% 18%, 29% 8%, 40% 2%);
background:
linear-gradient(115deg,
rgba(209,131,179,0.26) 0%, rgba(255,255,255,0.06) 34%,
rgba(8,5,18,0.50) 100%),
linear-gradient(to bottom, #4a4258 0%, #363048 55%, #241f34 100%);
box-shadow: inset 0 -1.4vh 2.4vh rgba(8,5,20,0.55);
filter: drop-shadow(0 0 14px rgba(209,131,179,0.22)); filter: drop-shadow(0 0 14px rgba(209,131,179,0.22));
} }
/* musgo subindo pela base da pedra */ /* musgo subindo pela base, recortado pela silhueta da pedra */
.gravestone::before { .gravestone::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
radial-gradient(circle at 18% 102%, rgba(74,105,60,0.60), transparent 42%), radial-gradient(circle at 18% 96%, rgba(74,105,60,0.60), transparent 40%),
radial-gradient(circle at 78% 103%, rgba(58,88,46,0.50), transparent 38%), radial-gradient(circle at 80% 97%, rgba(58,88,46,0.50), transparent 36%),
radial-gradient(circle at 50% 108%, rgba(66,96,52,0.40), transparent 50%); radial-gradient(circle at 50% 100%, rgba(66,96,52,0.42), transparent 46%);
} -webkit-mask: url('gravestone.png') center / contain no-repeat;
/* rachadura descendo do arco */ mask: url('gravestone.png') center / contain no-repeat;
.gravestone::after {
content: '';
position: absolute;
top: 7%;
left: 30%;
width: 0.35vh;
height: 30%;
transform: rotate(16deg);
border-radius: 1px;
background: rgba(8,5,20,0.60);
box-shadow: 1px 0 0 rgba(255,255,255,0.07);
} }
.grave-skull { .grave-skull {
position: absolute; position: absolute;
top: 13%; top: 9%;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 3.4vh; font-size: 3.2vh;
color: #8d81a8; color: #8d81a8;
text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.70); text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.70);
} }
@ -1341,21 +1323,21 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
text-align: center; text-align: center;
font-family: Georgia, 'Times New Roman', serif; font-family: Georgia, 'Times New Roman', serif;
font-weight: bold; font-weight: bold;
font-size: 2.7vh; font-size: 2.4vh;
letter-spacing: 0.42vh; letter-spacing: 0.4vh;
color: #9187ae; color: #9187ae;
text-shadow: 0 1px 0 rgba(255,255,255,0.20), 0 -1px 1px rgba(5,3,14,0.80); text-shadow: 0 1px 0 rgba(255,255,255,0.20), 0 -1px 1px rgba(5,3,14,0.80);
} }
.grave-line { .grave-line {
position: absolute; position: absolute;
top: 52%; top: 51%;
left: 24%; right: 24%; left: 26%; right: 26%;
height: 0.5vh; height: 0.5vh;
border-radius: 0.3vh; border-radius: 0.3vh;
background: rgba(14,10,30,0.62); background: rgba(14,10,30,0.62);
box-shadow: 0 1px 0 rgba(255,255,255,0.14); box-shadow: 0 1px 0 rgba(255,255,255,0.14);
} }
.grave-line.short { top: 60%; left: 32%; right: 32%; } .grave-line.short { top: 59%; left: 33%; right: 33%; }
/* tufos de capim para amarrar a base na cena */ /* tufos de capim para amarrar a base na cena */
.grass-tuft { .grass-tuft {

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB