Is there any way to offset a text border?-CodePudding

I'm currently trying to recreate this:

Example:

I tried to have tried using

-webkit-text-stroke: 2px black;

But I'm wondering how I can offset the text like when you use or if there is a different way to do recreate it.

text-shadow: #000 5px 5px 1px;

This is what my HTML and CSS looks like:

.block-title {
text-transform: uppercase;
color: #BED9A7FF;
font-family: Impact;
font-size: 70px;
letter-spacing: 5.83px;
line-height: 86px;
padding-bottom: 2vw;
padding-left: 9vw;

-webkit-text-stroke: 2px black;
}

<h2 >Bedankt !</h2>

CodePudding user response：

I think Using background image is not good solution. We can make that using 'text-shadow' property. https://css-tricks.com/almanac/properties/t/text-shadow/ Thanks

CodePudding user response：

You could put the word as content of a before pseudo element, give that color of white and a text stroke and offset it slightly from the actual element.

You'll want to alter the offsets to be exactly what you want of course.

.block-title {
  text-transform: uppercase;
  color: #BED9A7FF;
  font-family: Impact;
  font-size: 70px;
  letter-spacing: 5.83px;
  line-height: 86px;
  padding-bottom: 2vw;
  padding-left: 9vw;
  position: relative;
  box-sizing: border-box;
}

.block-title::before {
  content: 'Bedankt !';
  position: absolute;
  padding: inherit;
  left: 8px;
  top: 8px;
  color: white;
  -webkit-text-stroke: 1px gray;
  text-stroke: 1px black;
  z-index: -1;
}

<h2 >Bedankt !</h2>