Grow your CSS skills. Land your dream job.

Labour intensive text effect

  • # November 11, 2013 at 5:03 pm

    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/

    Ed
    # November 11, 2013 at 5:22 pm

    Lettering.js would be easier for you to use than manually maintaining all of that HTML.

    It means you only have ugly CSS, instead of ugly CSS and ugly HTML.

    With regard to cleaning up the CSS, there’s not much you can do. Why start from 63 and increment +1, and then randomly jump by a whole bunch? Just for the sake of maintainability, I’d increment by +1 all over :)

    # November 11, 2013 at 5:29 pm

    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.

    Ed
    # November 11, 2013 at 5:40 pm

    You’re welcome. Sorry I couldn’t help you more. Lettering.js probably isn’t going to help you a huge amount, because you’ve already manually done what it does automatically.

    If you expect to be changing the text, the z-indexing makes sense.

    One last thing. This is a personal quirk so feel free to ignore; I’d use more descriptive class names, like .line1.char5 or .line3.char7. .two is too unspecific, IMO.

    # November 11, 2013 at 5:42 pm

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

    # November 12, 2013 at 3:59 am

    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

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".