Mary Lou of Tympanus.net shows us a fun way to add a background image to a text element by experimenting with the CSS property “background-clip: text”. We can create very beautiful effects with the addition of these CSS3 transitions.

Take note that the property ‘background-clip: text’ is supported in Webkit browsers only.

Check out the cool DEMO!

To show the transitions, “it-animate” class is applied to the wrapper with jQuery. Here’s the markup:

<div class="it-wrapper">

<h3>Andreas</h3>

</div>

Sample 1

The CSS from the above example is as follows:

.it-wrapper h3{
        font-size: 320px;
        line-height: 188px;
        padding: 60px 30px 30px;
        color: rgba(67, 201, 117, 0.9);
        font-family: 'BebasNeueRegular', Arial, sans-serif;
        text-shadow: 10px 10px 2px rgba(0,0,0,0.2);
        -webkit-text-stroke: 10px rgba(255,255,255,0.6);
        background-color: #fff;
        background-repeat: no-repeat;
        background-image: url(../images/2.jpg), url(../images/1.jpg);
        background-position: 50% 50%;
        background-size: 100%;
        -webkit-background-clip: text;
        /* let's assume that one day it's supported */
        -moz-background-clip: text;
        background-clip: text;
        transition: all 0.5s linear;
        /* for now, let's just add some niceness for Firefox */
        -moz-border-radius: 30px;
        -moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);
}

Since “background-clip: text”does not work in Firefox, this can animate the image.

Below are the properties for transitioning the text:

.it-wrapper h3.it-animate{
        background-size: 50%;
        background-position: 0% 50%, 130% 50%;
        color: rgba(242, 208, 20, 0.4);
        -moz-box-shadow: 0px 0px 1px 8px rgba(242, 208, 20, 0.4);
}

Sample 2

In this example, we can play around with gradients.

.it-wrapper h3{
        font-size: 270px;
        line-height: 180px;
        padding: 30px 30px 40px;
        color: rgba(255,255,255,0.1);
        font-family: 'Fascinate', 'Arial Narrow', Arial, sans-serif;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
        background:
               linear-gradient(
                       left,
                       rgba(105,94,127,0.54) 0%,
                       rgba(255,92,92,0.57) 15%,
                       rgba(255,160,17,0.59) 27%,
                       rgba(252,236,93,0.61) 37%,
                       rgba(255,229,145,0.63) 46%,
                       rgba(111,196,173,0.65) 58%,
                       rgba(106,132,186,0.67) 69%,
                       rgba(209,119,195,0.69) 79%,
                       rgba(216,213,125,0.7) 89%,
                       rgba(216,213,125,0.72) 100%
               ),
               repeating-linear-gradient(
                       -45deg,
                       rgba(255,255,255,0.5),
                       transparent 20px,
                       rgba(255,255,255,0.3) 40px
               );
        background-size: 300% 100%;
        background-position: center left, top left;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        transition: all 1.8s linear;
        -moz-border-radius: 90px 15px;
        -moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);
}

The border radius and box shadow are added for Firefox and animate box shadow color to match text.

.it-wrapper h3.it-animate{
        background-position: center right, top right;
        color: rgba(39,137,149,0.5);
        -moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);
}

Sample 3

.it-wrapper h3{
        font-size: 180px;
        line-height: 180px;
        padding: 20px 30px;
        color: rgba(0,80,81,0.7);
        -webkit-text-stroke: 2px rgba(0,0,0,0.5);
        font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;
        text-shadow: 15px 15px 1px rgba(255,255,255,0.3);
        background-image: url(../images/3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 400%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        transition: all 0.3s linear;
        -moz-box-shadow:
               -10px -10px 0px rgba(255,255,255,0.4),
               10px 10px 0px rgba(0,81,81,0.4),
               0px 0px 50px 50px rgba(255,255,255,0.9) inset;
}

To get this cool effect for Firefox, opacity in RGBA value is changed, with added box shadow transition.

.it-wrapper h3.it-animate{
        background-size: 100%;
        color: rgba(0,80,81,0.1);
        -moz-box-shadow:
               -20px -20px 0px rgba(255,255,255,0.4),
               20px 20px 0px rgba(0,81,81,0.4),
               0px 0px 40px 0px rgba(255,255,255,0.4) inset ;
}

Incoming search terms for the article:

• background-clip text firefox
• background-clip text
• background images
• background clip text
• moz background clip text firefox
• css3 background image clipping lightbox
• experimenting animation clipart
• css3 background clip text examples
• css3 background clip text background-position
• firefox backgound clip text