Text Shadow Effects

by rgthree

HTML

<span>Test</span>


<span>Test</span>

CSS

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

body {
    background:#111; padding-top:100px;
}

span {
    display:block; text-align:center;
    color:#FFF; font-family:'Cinzel'; font-weight:700; font-size:150px;
    letter-spacing:0.0em;
    text-shadow:0.05em 0.05em 0em #111, 0.09em 0.09em 0em rgba(255,255,255,0.15);
    -webkit-transform:skew(0deg, -8deg);
}

span + span {
    text-shadow:1px 1px 0px #333,
        2px 2px 0px #333,
        3px 3px 0px #333,
        4px 4px 0px #333,
        5px 5px 0px #333,
        6px 6px 0px #333,
        7px 7px 0px #333,
        8px 8px 0px #333,
        9px 9px 0px #333,
        10px 10px 0px #333,
        11px 11px 0px #333,
        12px 12px 0px #333,
        13px 13px 0px #333;
}