{{announcement.body}}
{{announcement.title}}

Applying An Image Texture To Text With HTML And CSS

DZone 's Guide to

Applying An Image Texture To Text With HTML And CSS

If you want to add texture to the background of your text, here are five different methods to do so using a combination of CSS and HTML.

· Web Dev Zone ·
Free Resource

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:

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:

HTML




xxxxxxxxxx
1


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


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

CSS




xxxxxxxxxx
1
15


 
1
.lava-text {
2
 background: url(http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg) no-repeat center center;
3
 background-size: cover;
4
 color: #fff;
5
 -webkit-text-fill-color: transparent;
6
 -webkit-background-clip: text;
7
 -moz-background-clip:text;
8
 background-clip:text; 
9
 font-family:Catamaran,sans-serif;
10
 font-size:10em;
11
 padding:0;
12
 margin:0;
13
 text-align:center;
14
 -webkit-text-stroke: 3px #ffaa00;
15
}


And here’s the result:

Lava text

Lava text

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

Here’s the result using the wood texture:

Wood text

Wood text

And with some minor CSS modifications and the watercolor texture:

CSS




xxxxxxxxxx
1


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


Watercolor text

Watercolor text

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:

HTML




xxxxxxxxxx
1


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


Lava textLava text

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:

XML




xxxxxxxxxx
1


 
1
<svg width="100%" height="100%">
2
    <p>
3
        <image xlink:href="//www.textures4photoshop.com/tex/thumbs/graffiti-wall-texture-free-1-thumb28.jpg"></image>
4
    </pattern>
5
    <text x="0" y="0.8em" width="100%" textlength="650" class="headline">Grafitti</text>
6
</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:

Grafitti text

Grafitti text

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:

HTML




xxxxxxxxxx
1


 
1
<div>  
2
  <h1 class="stamp-text">STAMP CSS</h1> 
3
</div>


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

CSS




xxxxxxxxxx
1
18


 
1
h1 {
2
     font-size: 7em;
3
     color: red;
4
     display: inline-block;
5
     font-family: sans-serif;
6
     padding: 10px 20px;
7
     margin: 40px;
8
     transform: rotate(-5deg);
9
 }
10
 
           
11
.stamp-text {
12
     border: 10px solid red;
13
     -webkit-mask-size: contain;
14
     -webkit-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");     -o-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
15
     -moz-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
16
     -ms-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
17
     mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
18
 }


The mask-image property indicates an image with transparency that will act as a mask. So, where it image is transparent the element on which the mask is applied will also be transparent.

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:

Stamp text

Stamp text

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:

HTML




xxxxxxxxxx
1


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



To which we add this simple CSS code:
CSS




xxxxxxxxxx
1


 
1
canvas {
2
     font-size: 10em;
3
     font-family: sans-serif;
4
     font-weight: bold;
5
     background-image: url(//www.textures4photoshop.com/tex/thumbs/rocky-mountain-texture-seamless-thumb31.jpg);
6
     background-size: 0 0; 
7
}


The font and background settings do not affect the canvas directly.

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:

JavaScript




xxxxxxxxxx
1


1
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:

Rock text

Rock text

Conclusion

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

Further Reading

Web Development Trends and Techniques for 2020

Using CSS: An Introduction to the Basics

Topics:
javascript ,html ,css ,texture to text ,tutorial ,web design ,web dev

Published at DZone with permission of John Negoita . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}