Labour intensive text effect - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

November 11, 2013 at 5:03 pm #155739

hippy74

Participant

Can anyone suggest a better way of accomplishing the text effect I have created here? The code ain’t pretty folks!

http://www.richardthorpecreative.co.uk/css-test/

November 11, 2013 at 5:29 pm #155741

hippy74

Participant

Thanks for the quick response Ed. I might give Lettering.js a look. The only reasoning behind the z-indexing was that I need to take into account what else will be on the site, and I know I won’t need any more than 20 characters per line in these headings so there was kind of a logic there.

November 11, 2013 at 5:42 pm #155744

hippy74

Participant

Yeah good point, they are a bit ambiguous. Cheers Ed.

November 12, 2013 at 3:59 am #155803

paulob

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>

November 12, 2013 at 1:31 pm #155861

hippy74

Participant

Thanks Paulob, of course merely by splitting the words they automatically layer up on one another. Schoolboy error.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.