CSS Text Outline

by Louis Walch

HTML

<h1>Call for Works</h1>
<h1 class="outline1">Call for Works</h1>
<svg><text class="text" x="0" y="100px" width="100%" font-family="Arial" font-size="120px" stroke="black" stroke-width="3" fill="none">CALL FOR WORKS</text></svg>

CSS

* { margin: 0; padding: 0; }
BODY {
    background-color: #FF6737;
}
H1 {
    font-family: Arial;
    text-transform: uppercase;
    font-size: 120px;
    font-weight: normal;
    white-space: nowrap;
}

.outline1 {
    color: transparent;
    -webkit-text-stroke: 3px black
}

SVG {
    width: 100%;
}