Show text stroke only in the text shadow using CSS-CodePudding

Please refer to the image below:

Is it possible to implement text shadow CSS property such that only the outer periphery (stroke) of the text shadow is visible.

CodePudding user response：

Create four shadows each slightly off (↖ ↗ ↘ ↙) by 1 px, and all that behind the main shadow (white in this case):

<html>
  <head>
    <style>
      div {
        font-family: 'Arial Black', sans-serif;
        font-size: 100px;
        text-shadow:
          20px -20px 0 white,
          19px -19px 0 red,
          19px -21px 0 red,
          21px -21px 0 red,
          21px -19px 0 red;
      }
    </style>
  </head>
  <body>
   <div>Build.</div>
  </body>
</html>

CodePudding user response：

You can put multiple shadows that will hide each other. Play with this to get what you desired.

Snippet:

body {background-color: black;}
.demo {  
  margin-top: 30px;
  color: white;
  font-size: 100px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 
    24px -17px 0 black, /* same as background color */
    25px -16px 0 white, 
    23px -18px 0 white, 
    23px -15px 0 white;
 }

<div class="demo">demo</div>

CodePudding user response：

I think its not possible to achieve this exact effect using text-shadow, since the text at back is larger than the solid text. If you need to stick with text-shadow only, then check @Daniel Sixl's answer.

You can achieve this effect using a ::before selector and webkit-text-stroke. Be sure to match the value of data-text attribute, with the text that is inside the h1.

body{
  background: #000;
  /* Center Text on Screen */
  display: grid;
  place-items:center;
  height: 100vh;
}

h1{
  color: white;
  font-size: 5rem;
  transform: translateX(-50%);
  font-family: sans-serif;
} 

h1::before{
  content: attr(data-text);
  position: relative;
  top: -0.15em;
  right: -88.75%;
  font-size: 1.6em;
  -webkit-text-stroke: 2px grey;
  -webkit-text-fill-color: transparent;
  z-index: -1;
}

<h1 data-text="Build.">Build.</h1>

CodePudding user response：

Use a pseudo element and style it with shadows:

:root {
  --body: #FFF;
  --outline: #666;
  --background: #000;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

main {
  min-height: 100vh;
  background: var(--background);
  color: var(--body);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.outline-effect {
  font-size: 4rem;
  position: relative;
  font-weight: 900;
}

.outline-effect::before {
  font-size: 150%;
  content: attr(data-outline);
  position: absolute;
  top: -0.333em;
  left: 1em;
  color: var(--background);
  text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
  z-index: -1;
  font-weight: 200;
}

<main>
  <p class="outline-effect" data-outline="Build">Build.</p>
</main>