Nandakumar Edamana
Share on:
@ R t f

How to Engrave Text Using CSS

By |

Do you know how simple it is to engrave text using CSS? It takes only three-four lines of CSS code. The advantages of using CSS-engraved text over traditional methods (like designing a picture) are, (1) the page loading will be fast, and (2) the web designer has less work to do. Designing engraved text using an image editor and including it as a picture in the webpage is perfect, except it requires much more work and page loading time. But of course, the pictorial way is preferred for (very) old browsers.

Let us get into the business. Have a look at the example text below:

Normal Text

Engraved Text 1

Engraved Text 2

Both normal text and engraved text are depicted so that you can easily notice the effect. There are two variants of engraved text, among which the second one looks much realistic. Isn’t it wonderful? We know that there is no CSS attribution for engrave effect. Then how did it work? The answer is simple. It is a cheat — yes, optical illusion! Actually, we are using the text-shadow feature available in the CSS to draw a shadow for the text, in the exact manner which will appear as an ‘inner shadow’ (although CSS supports outer shadows only). Note it is not possible for every background, and even in usable backgrounds, you have to arrange the shadow properly.

Here is the code used to create the above example:

<style>
	div#bg {
		background: #888;
		font-family: freesans, sans-serif;
		font-size: 2em;
		font-weight: bold;
		padding: 2em;
	}

	p.normal, p.engraved, p.engraved_d
	{
		color: #444;
	}

	p.engraved
	{
		text-shadow: 0px -2px 0px #222;
	}

	p.engraved_d
	{
		text-shadow: 0px -1px 0px #222, 0px 1px 0px #aaa;
	}
</style>

<div id="bg">
	<p class="normal">Normal Text</p>
	<p class="engraved">Engraved Text 1</p>
	<p class="engraved_d">Engraved Text 2</p>
</div>

Need explanation? Everything is simply based on the CSS feature text-shadow. While Engraved Text 1 uses one shadow to create the engrave effect, the second one uses two shadows. To get an explanation on text-shadow, click here.

Keywords (click to browse): css engraved-text engrave text-shadow drop-shadow inner-shadow outer-shadow web html javascript