Simulating Text Strokes with text-shadow / webkit-text-stroke

by Konstantin Rouda

HTML

<p class="o-text o-text--strokes">Some Cool Text</p>

<p class="o-text o-text--strokes-webkit">Some Webkit Cool Text</p>

<!-- <p class="o-text" style="-webkit-text-security: circle;">Some Cool Text</p>

<p class="o-text" style="-webkit-text-security: disc;">Some Cool Text</p>

<p class="o-text" style="-webkit-text-security: square;">Some Cool Text</p> -->

CSS

.o-text {
  box-sizing: border-box;
  margin: 7rem auto 0;
  text-align: center;
  font-size: 7rem;
  font-weight: bolder;
  text-transform: uppercase;
  font-style: italic;
}

.o-text--strokes {
  color: white;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, .9), -1px 0px 0px rgba(0, 0, 0, .9), 0px 1px 0px rgba(0, 0, 0, .9), 0px -1px 0px rgba(0, 0, 0, .9);
}

.o-text--strokes-webkit {
  -webkit-text-fill-color: cornflowerblue;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: rgba(0, 0, 0, .9);
}

JavaScript

/*
Inspired by:
https://css-tricks.com/adding-stroke-to-web-text/
*/