CSS Metallic Text

• Tweet

• Tweet

Hi Guys,

Today I am going to show you really cool feature of CSS that will allow us to use a Background Image behind our text.

Pitfalls: This tip only works with Webkit enabled browsers so IE and other non webkit browser will not entertain this concept. But may be in future they will support it because its really cool.

Ok to start with here is a metallic background that I am going to use.

Now lets browse to what CSS I got in store for you.

Ok so lets Go ahead and check out the Markup first

<div style="background:#666;padding:20px">
        <a href="#" class="metallic-text">Cool Link</a>
 </div>

Advertisement

Now lets check the CSS

.metallic-text {
	font-family: calibri;
        background: url(metal.jpg);
        -webkit-background-clip: text;
	-moz-background-clip: text;
      	background-clip: text;
	font-size:10em;
	font-weight:bold;
	letter-spacing:4px;
        text-shadow: rgba(255,255,255,0.4) 1px 0px 0px;
	text-decoration:none;
        color: transparent;
}

As you see that I am using background-clip CSS3 property to create a clipping mask using the text to mask the background. Clipping mask is term that is familiar with all graphic designers I hope. But search Google for clipping masks, there are heaps of tutorials on that.
Don’t forget copy metal.jpg to the same directory where your markup is else you will need to change the path to that image.

When you check it in Chrome (say for instance) you will get something like this

Now if you try to open same file in IE. It won’t work. Because IE is C**p and is pain in web developer’s A**

Here is a quick fallback to atleast show text but you can write some Javascript I hope to detect if a CSS property will work or not in a given browser. Use Modernizer library to do that. Ok so a quick fall back for IE is to include this line in above style

color: white; // or whatever color you want
-webkit-text-fill-color: transparent; /*intructing webkit browsers to force fill color to be transparent*/

So now on IE the above image looks like this

I know it looks crap but I guess using Modernizer will help to get around that. With Modernizer you can detect if a CSS property is  supported that all you need to do is to get Rid of that background Image and probably change the text color, if Background-clip: text is not supported

Advertisement

I hope you enjoyed this read.

Cheers,