Repeating Lateral Text Shadows - By @LeaVerou

dabblet.css

/* Repeating Lateral Text Shadows - By @LeaVerou */

body { margin: 0 }

h1 {
    color: #3D6AA2;
    position: relative;
    font: bold 2em/1em 'Segoe UI';
}

h1 span:nth-of-type(1) {
    display: block;
    text-indent: 44%;
    text-shadow: -05.75em 0 0 #CCC, 05.75em 0 0 #CCC,
                 -11.50em 0 0 #CCC, 11.50em 0 0 #CCC,
                 -17.25em 0 0 #CCC, 17.25em 0 0 #CCC,
                 -23.00em 0 0 #CCC, 23.00em 0 0 #CCC,
                 -28.75em 0 0 #CCC, 28.75em 0 0 #CCC,
                 -34.50em 0 0 #CCC, 34.50em 0 0 #CCC,
                 -40.25em 0 0 #CCC, 40.25em 0 0 #CCC,
                 -46.00em 0 0 #CCC, 46.00em 0 0 #CCC,
                 -51.75em 0 0 #CCC, 51.75em 0 0 #CCC,
                 -57.50em 0 0 #CCC, 57.50em 0 0 #CCC;
}

h1 span:nth-of-type(2) {
    display: block;
    text-indent: 55%;
    text-shadow: -05.20em 0 0 #CCC, 05.20em 0 0 #CCC,
                 -10.40em 0 0 #CCC, 10.40em 0 0 #CCC,
                 -15.60em 0 0 #CCC, 15.60em 0 0 #CCC,
                 -20.80em 0 0 #CCC, 20.80em 0 0 #CCC,
                 -26.00em 0 0 #CCC, 26.00em 0 0 #CCC,
                 -31.20em 0 0 #CCC, 31.00em 0 0 #CCC,
                 -36.40em 0 0 #CCC, 36.40em 0 0 #CCC;
}

h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient( 90deg, white, rgba(255,255,255,0) 5em),
        linear-gradient(-90deg, white, rgba(255,255,255,0) 5em);
    position: absolute;
    top: 0; left: 0;
}

p {
    width: 80%;
    color: #666;
    margin: 1em auto;
    font: 1em 'Segoe UI';
}

a {
    color: #3D6AA2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

dabblet.html

<h1><span>JONATHAN</span> <span>SAMPSON</span></h1>
<p>I've always liked this effect, and wanted to see how easily it could be achieved with CSS. One major problem is the variable text-shadow offsets; these would be much easier to manage with preprocessing.</p>
<p>&mdash; <a href="http://twitter.com/jonathansampson">@jonathansampson</a></p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}