The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Labour intensive text effect

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #155739

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


    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.


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



    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.


    <!DOCTYPE html>
    <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(;
        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(;
        background: -webkit-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(;
        background: -o-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(;
        background: -ms-linear-gradient(left,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(;
        background: linear-gradient(to right,  rgba(48,199,255,0.1) 0%,rgba(239,2,136,0.1) 100%),url(;
    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;
    <link href=',400,800' rel='stylesheet' type='text/css'>
    <body bgcolor="#000000">
    <div id="rtc-block-header">

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.