CSS Stroke Text Using -webkit-text-stroke

css-stroke-text-using-webkit-text-stroke.markdown

CSS Stroke Text Using -webkit-text-stroke

Sample code for CSS text stroke definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<span class="stroke-text">STROKE TEXT</span>

<footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer>

style.css

:root{
  font-size:75px;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  margin-top:30vh;
}

.stroke-text{
  -webkit-text-stroke:5px black;
  -webkit-text-fill-color:transparent;
}


footer{
  position:absolute;
  bottom:50px;
  right:50px;
  font-size:13px;
}