Applying An Image Texture To Text With HTML And CSS

This is the ultimate guide to adding texture on text in an HTML page.

On my blog Coding Dude, I often discuss basic and advanced CSS coding. In this tutorial I will show you some more advanced CSS and JavaScript techniques to create visual effects.

So, you have an HTML page with a big nice title. You could make it nicer by putting a texture or pattern on top of text in HTML.

How do you do that?

This post I will show a few CSS tricks that will allow you to get nice textured text effects with minimal effort.

For this we will use a couple of seamless and non-seamless textures that you can download for free:

• Lava texture
• Wood texture
• Watercolor texture
• Grunge PNG texture
• Grafitti texture

Let’s get started.

You may also enjoy:  Basic HTML for Everyone

Method 1 – Using the CSS background-clip Property

There’s no CSS property for an HTML text element where you can indicate placing a texture on text. So how do we then apply an image to the text?

We’ll actually need a background layer where the image is set as the background and a foreground layer where the text sits. Then, using CSS, we instruct the browser to clip a portion of the background using the shape of the text in front.

Create an HTML file and add:

xxxxxxxxxx

<h1 class="lava-text">LAVA TEXT</h1>

Then, create a CSS file, include it in your HTML file and add the following code:

xxxxxxxxxx

.lava-text {

 background: url(http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg) no-repeat center center;

 background-size: cover;

 color: #fff;

 -webkit-text-fill-color: transparent;

 -webkit-background-clip: text;

 -moz-background-clip:text;

 background-clip:text; 

 font-family:Catamaran,sans-serif;

 font-size:10em;

 padding:0;

 margin:0;

 text-align:center;

 -webkit-text-stroke: 3px #ffaa00;

}

And here’s the result:

Want to use a different texture? Simply change the background property to your image.

Here’s the result using the wood texture:

And with some minor CSS modifications and the watercolor texture:

xxxxxxxxxx

background: url(http://www.textures4photoshop.com/tex/thumbs/watercolor-paint-background-free-thumb32.jpg) repeat center center;

Method 2 – Using svg clippath to Add Texture to Text

SVG can be very useful sometimes for creating text effects. Let’s see how we can add the textures to a text.

We will put in the background image as a simple img element and add a SVG textelement inside a clippath element. clipath elements allow using SVG elements as kind of a mask.

Here’s the HTML code:

xxxxxxxxxx

<img class="svg-clip" src="http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg"/>

Lava text

One advantage of this method is that you can use any vector shape as a mask for the texture, not only text.

Method 3 – Using svg fill To Add a Pattern to Text

This method is similar to the previous method using svg.

The difference is that instead of clippath we will now use a fill image for our text. For this we will need to define a pattern element and an image inside.

Here’s the code:

xxxxxxxxxx

<svg width="100%" height="100%">

    <p>

        <image xlink:href="//www.textures4photoshop.com/tex/thumbs/graffiti-wall-texture-free-1-thumb28.jpg"></image>

    </pattern>

    <text x="0" y="0.8em" width="100%" textlength="650" class="headline">Grafitti</text>

</svg>

That’s it. You can change the font used by specifying it in the CSS. Here’s the end result and the full code:

Method 4 – Using mask-image with a PNG texture to Create a Stamp Text Effect

For this method, you will need a texture with transparency. So, something like this grunge PNG grunge texture will work just fine.

The HTML code for this method of applying texture to a text is similar with the other methods:

But the CSS is slightly different as we will make use of the mask-image CSS property:

For the H1 element, I added a slight rotation to give it more of a stamp text effect. The end result and the full code looks like this:

Method 5 – Adding Texture on Text With canvas And a Little JavaScript

With this method, we’ll have to use a bit of JavaScript and some creativity. Don’t worry, it’s only a few lines.

The idea is to create an HTML5 canvas and draw the text with a texture. To make things more convenient, we are going to use CSS to configure the texture image. Also, the text we are going to draw in the canvas will be taken from the canvas element itself. We can place text in the canvas element because the browser will just ignore it.

Here’s the HTML code:

xxxxxxxxxx

<canvas id="canvas" width="1000" height="300" >  ROCK TEXT </canvas>

We will use them in the JavaScript code. So, if we will want to change the font or texture image we will only change the CSS.

Notice that I set the background-size to 0. I did that because I don’t want the canvas to have a background. I only need the background-image property to use in the CSS.

The real magic happens in the JavaScript code:

xxxxxxxxxx

var canvas = document.getElementById("canvas");

The code is rather simple. We use getComputedStyle to grab the texture image and the font information from the CSS.

We then simply load the image, and when it’s loaded we use fillText to write the text using the image as a pattern. The text that we write on the canvas is taken from the canvas element using canvas.textContent.

That’s it! And the result looks like:

Conclusion

Congratulations! You’ve just learned how to add texture to text using CSS and HTML.