HTML5 effects: Graduated text

Share RGraph:  

Summary
A new series of posts that will detail how you go about implementing various HTML5 effects. This page details how you can achieve the graduated text effect as shown above.

There are two ways that immediately spring to mind when trying to achieve graduated text. When I was making the "new SVG charts" text above I opted for the more recent method that uses newer properties - but there isn't a huge difference nowadays - so if you're making a public website you might as well opt for the more compatible option.

1. Using a DIV to cover the text with a gradient

The first method that comes to mind is a compatible one that will work in all (most) browsers and involves covering the text with a SPAN (or DIV) that has a linear gradient as the background color. This gradient goes from transparency to white (or whatever your background color is). Here's an example of this method:

NEW SVG CHARTS

Here's the CSS:

<style>
    div#title1 {
        color: #bbb;
        font-weight: bold;
        font-family: Arial black;
        font-size: 400%;
        position: relative;
        text-align: center;
    }
    /*
    * This is a DIV that covers the text - the DIV has a background
    * gradient set which goes from transparency to whatever the background
    * color is
    */
    div#title1 div#cover {
        /* The gradient */
        background-image: linear-gradient(rgba(255,255,255,0), white 75%);
        
        /* Set this DIV to cover the entirety of the enclosing DIV */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>

And here's the HTML that the above CSS is for:

<div id="title1">
    <span>NEW SVG CHARTS</span>
    <div id="cover"></div>
</div>

And here's a link to a standalone page that demonstrates this technique.

 

 

2. Using a gradient fill instead of an overlaid DIV

This method uses the slightly newer ::after selector but does also have the advantage of being able to select the text (for copy/paste reasons).


And here's the CSS code:

<style>
    div#title2 {
        font-size: 400%;
        font-family: "Arial black", sans-serif;
        font-weight: bold;
        color: #aaa;
    }

    div#title2 a {
        position: relative;
        text-decoration: none;
        color: #aaa;
        font-style: normal;
        
        /* This converts the text to uppercase */
        text-transform: uppercase;
    }

    /*
    * This is the meat-and-potatoes of this method - it adds an element after
    * the A tag. This element becomes the gradient cover (notice the positioning
    * and dimensions). This element is then given the gradient and it also turns
    * off pointer-events for this invisible element.
    */
    div#title2 a::after {
        position: absolute;
        content: '';
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(255,255,255,0), rgba(255, 255, 255, 1) 80%);
        pointer-events: none;
    }
</style>

And here's the HTML code:

<div id="title2">
    <a href="/svg/docs/index.html" >new svg charts</a>
</div>

And again, here's a link to a standalone page that demonstrates this technique.

Conclusion

It's horses-for-courses really. The first method uses more "tried-and-tested" HTML and CSS but does have the disadvantage of not being able to select the text. But this actually may be desirable for some.

The second method on the other hand uses the somewhat newer :after CSS option so it may not be compatible with really old browsers (eg <= IE8)

So whichever method that you choose is down to your target audience.