Theo's Typesafe Cult•9mo ago

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;
  }
}

6 Replies

Matvey•9mo ago

that's how it works in the browser. Just add a color to the text that's the same as the background color

Matvey•8mo ago

Ok, just found out there is a fix for this https://fxtwitter.com/argyleink/status/1783897828508738015

💬 2 🔁 3 ❤️ 56 👁️ 1.9K

FxTwitter / FixupX

Adam Argyle (@argyleink)

#CSS paint-order https://nerdy.dev/css-paint-order

AguilarOP•8mo ago

oooh hey that's awesome dude, thanks a lot

JulieCezar•8mo 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

AguilarOP•8mo ago

ohh this is interesting to know didn't quite research into these before

JulieCezar•8mo 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

Gaming

Programming

white stroke and transparent fill