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:
parent
d0a063e92a
commit
1338879e1d
2 changed files with 18 additions and 36 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
BIN
plugin/contents/ui/gravestone.png
Normal file
BIN
plugin/contents/ui/gravestone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
Loading…
Add table
Add a link
Reference in a new issue