Subtitle CSS

by UDany

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke -->

<p class="stroke sub">Você acredita em destino?</p>
<p class="stroke sub lato">Você acredita em destino?</p>
<p class="stroke sub lato pyrrha">Você acredita em destino?</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

* {    
  font-family: arial;
}

.lato {
    font-family: 'Lato', arial;
}

.sub {
  font-size: 2em;
  margin: 0;
  color: white;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.pyrrha.stroke { color: #FFE8D7; -webkit-text-stroke-color: #610821; }
.pyrrha.stroke:before {-webkit-text-stroke-color: #610821; }


.stroke {  
  position: relative;
  background: transparent;
  z-index: 0;
  -webkit-text-stroke-width: .01em; 
  -webkit-text-stroke-color: black; 
}

.stroke:before{
  content: attr(title);
  position: absolute;
    -webkit-text-stroke-width: .12em;
    -webkit-text-stroke-color: black;
  left: 0;
  z-index: -1;
  color: #610821;
}
.stroke:after{
    content: attr(title);
    position: absolute;
    -webkit-text-stroke-width: .12em;
    -webkit-text-stroke-color: rgba(0,0,0,.5);
    left: .05em;
    top: .05em;
    z-index: -2;
    color: #610821;
    filter: blur(1px);
}

JavaScript

$('.stroke').attr('title', function(){
    return $(this).html();
  });