Reply To: Labour intensive text effect - CSS-Tricks

November 12, 2013 at 3:59 am #155803

Participant

HI,

Unless I’m mistaken you don’t need the classes on the spans as in your demo you have no positioned defined for the span anyway so the z-index isn’t being applied and is redundant (in your demo at least).

That means you could reduce the css and html as the natural stacking order will place those elements on top of each other. If you don’t mind risking the wrath of the semantic police you could use the b element instead of a span to shorten the effect on the html.

e.g.

<!DOCTYPE html>
<html>
<head>
<title>Graphic Designer in Beccles - Home Page</title>
<meta name="description" content="Richard Thorpe is a Graphic Designer situated in the Suffolk town of Beccles. ">
<meta name="keywords" content="graphic design in beccles, web design in beccles, Suffolk graphic designer">
<meta charset="UTF-8">
<style type="text/css">
#rtc-block-header {
    background: -moz-linear-gradient(left,  rgba(48,199,255,0.1) 0%, rgba(239,2,136,0.1) 100%),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(48,199,255,0.1)), color-stop(100%,rgba(239,2,136,0.1))),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
    background: -webkit-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
    background: -o-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
    background: -ms-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
    background: linear-gradient(to right,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(http://www.richardthorpecreative.co.uk/css-test/images/steel-bg.png);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4030c7ff', endColorstr='#40ef0288',GradientType=1 ); /* IE6-9 */
    background-repeat: repeat;
    width: 300px;
    box-shadow: inset rgba(10, 91, 117, 0.34) 3px -3px 3px 0, inset rgba(255, 3, 174, 0.19) -3px 3px 3px;
    border-radius: 4px 8px 4px 4px;
    display: table;

}
#rtc-block-header p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: -3px 3px 2px rgba(0, 0, 0, 0.5), 2px -1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.12em;
    font-size: 60px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
    display: table-cell;
    vertical-align: top;
    line-height: 0.6;
    padding-bottom: 30px;
    padding-top: 24px;
    padding-left: 20px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,800' rel='stylesheet' type='text/css'>
</head>

<body bgcolor="#000000">
<div id="rtc-block-header">
        <p><b>C</b>o<b>n</b><b>t</b>a<b>c</b><b>t</b><br><b>U</b><b>s</b><br><b>T</b><b>o</b><b>d</b><b>a</b><b>y</b></p>
</div>
</body>
</html>