1. Technology

Texturize It: How to Create Textured Text Using CSS

Still remember the old days where in you are just starting out with Photoshop? You designed an image-based text and then just uploaded it on your website?

Instead of doing this with Photoshop, the good news is, it is now possible to create textured text using CSS3. Webkit now supports the background-clip CSS3 property that does exactly what Photoshop does.

Aside from that, you can also use the mask-image CSS property to do almost the same effect; however, this property clips the visible portion of an element according to the transparency of the mask images.

In today’s tutorial, you will learn how to apply these effects and create a cool textured text using CSS3 and HTML5.

Resources You Need to Complete This Tutorial

  • Any background image
  • Any textured images (PNG file)
  • Lato (Google Font)
  • Pacifico (Google Font)
  • Oswald (Google Font)

What we’re going to build

final

Using Webkit Background-Clip To Text

For this part of the tutorial, you are going to use the webkit background-clip property to apply a cool lion and jungle text effect with the H1 tag.

The HTML

For the markup, wrap our first H1 tag with clipped-title1 and clipped-title2 with our second H1 tag.

<div id="clipped-title1">
   <h1>THE LION</h1>
</div>

<div id="clipped-title2">
   <h1>King of the Jungle</h1>
</div>

The CSS

Now for our CSS, you will use the background-clip property to clip the image to the text. By default, the background extends to the outside edge of the border.

On the CSS below, different background images are used. The first one is a lion background image while the second one is a jungle background image. Notice the webkit-text-fill-color was set to transparent to make sure that the image color will be the one to display on the text.

#clipped-title1 {
	background: url(../images/lion.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#clipped-title2 {
	background: url(../images/jungle.jpg)no-repeat top center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
}

#clipped-title1 h1 {
	font-size: 200px;
	font-family: Anton, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin: 0;
	padding: 0;
}

#clipped-title2 h1 {
	font-size: 110px;
	font-family: Pacifico, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin-top: -75px;
	padding: 0;
}

Using Webkit Mask-Image To Text

By using the -webkit-mask-image CSS property, you can set the image in a text. This is almost the same like the background-clip except that the mask image clips the visible portion of an element according to image mask transparency.

The HTML

For the markup, you will simple wrap an H1 tag to an ID masked-image.

<div id="masked-image">
     <h1>CERTIFIED ROUGH<br/>TEXTURED TEXT</h1>
</div>

The CSS

For the CSS, simply put the basic styles for the color and font type and so on. Also, you will use the –webkit-mask-image property to clip a rough image background to the text. Rotate the text -4 degrees using the transform property.

#masked-image {
    font-family: Oswald, sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(../images/rough-texture.png);
    -webkit-transform: rotate(-4deg);
    -moz-mask-image: url(../images/rough-texture.png);
    -moz-transform: rotate(-4deg);
    -o-mask-image: url(../images/rough-texture.png);
    -o-transform: rotate(-4deg);
    mask-image: url(../images/rough-texture.png);
    transform: rotate(-4deg);
}

Wrapping Up

There you have it! That’s how easy it is to create a textured image using the background-clip and mask-image CSS property. Although this maybe a good replacement for the Photoshop workflow, still at this time of this writing, it has not yet been supported on the old browsers like the Internet Explorer 8 and its Jurassic versions.

I hope you find this tutorial helpful. Please feel free to comment below if you have any other idea to do the same effect like the demo.

No Comments
Comments to: Texturize It: How to Create Textured Text Using CSS

Recent Articles

Good Reads

Bathroom lighting may not be a top priority for many homeowners in Singapore, but it can greatly impact our‌ experience in the ⁤space. To achieve optimal ⁤bathroom lighting, there are several factors to consider and tips to keep in mind when⁢ discussing lighting ‌concepts with your interior design‍ firm in Singapore. Why is Bathroom Lighting […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Bathroom lighting may not be a top priority for many homeowners in Singapore, but it can greatly impact our‌ experience in the ⁤space. To achieve optimal ⁤bathroom lighting, there are several factors to consider and tips to keep in mind when⁢ discussing lighting ‌concepts with your interior design‍ firm in Singapore. Why is Bathroom Lighting […]
Dental implants are an advanced method of replacing missing teeth and are becoming increasingly popular among patients who want to regain a healthy and beautiful smile. However, despite implantation’s proven effectiveness and high safety, many myths and misconceptions prevent people from choosing this procedure. In this article, we look at the seven most common myths […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]