white stroke and transparent fill

hey guys, wonder if there's anyone good with css here 😅 can anyone tell me why this outline looks like this? I don't quite understand how this text stroke thing works
.outline {
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


@supports ((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
.outline {
color: transparent;
-webkit-text-stroke: 2px white;
text-stroke: 2px black;
text-shadow: none;
}
}
.outline {
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


@supports ((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
.outline {
color: transparent;
-webkit-text-stroke: 2px white;
text-stroke: 2px black;
text-shadow: none;
}
}
No description
6 Replies
Matvey
Matvey7mo ago
that's how it works in the browser. Just add a color to the text that's the same as the background color
Aguilar
Aguilar7mo ago
oooh hey that's awesome dude, thanks a lot
JulieCezar
JulieCezar7mo ago
As far as I know, every line used in the letter will become 2 px. What you are seeing is because they used multiple lines instead of "bending" 1 line at the edges and combining it... I don't think you will be able to make it work like you expect
Aguilar
Aguilar7mo ago
ohh this is interesting to know didn't quite research into these before
JulieCezar
JulieCezar6mo ago
SVGs are basically lines... someone didn't expect you to do what you did with the font 😂 technically you could make it work by modifying the font yourself
Want results from more Discord servers?
Add your server