|
|
|
|
|
How to create engraved text effect on a Website
As you probably noticed on a lot of websites these days, there is an engraved looking effect added to text, let me show you how to add that effect using CSS.
|
|
 |
|
|
|
|
|
|
|
|
|
|
 |
1.
|
|
|
Open a html text editor like Dreamweaver or Notepad++ and create a new document.
If you don't have the main tags yet you can copy paste mine:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dreevoo.com | Online Learning | Knowledge Sharing</title>
You can of course enter your own page title. And if you already know this basic things you can skip to step 2 to see the actual code for the engraved text effect.
|
|
| |
2.
|
|
|
Now let's define the style for our text.
<style type="text/css">
p
{
color:#333;
font-size:24px;
font-family:"Trebuchet MS";
text-shadow: 0px 1px 0px rgba(255,255,255,255);
}
To explain the code:
<style type="text/css"> with this tag we define that we are going to create a new style with properties for our text.
color:#333; we defined the text color which should be darker but similar to the background color. In my case it's dark-grey (#333) and the background color light-grey (#CCCCCC).
font-size:24px; we set the font size to 24 pixels.
font-family:"Trebuchet MS"; we set the font of the text to Trebuchet MS.
text-shadow: 0px 1px 0px rgba(255,255,255,255); this is the text property where we define the engraved text effect, or to be more precise we added a shadow to the text which gives it the engraved look. With the first two px arguments we define the shadow off-set; first one (0px in my case) represents the horizontal offset, meaning the shadow to the right if the number is positive, shadow to the left if number is negative or no shadow if number is 0. The second argument (1px in my case) represents the vertical offset, meaning the shadow under the text if the number is positive, shadow above if number is negative or no shadow if number is 0. Third argument represents blur of the shadow. Rgba (255,255,255,255) is the color of shadow, white in my case.
</style> with this tag we close/end our style.
|
|
| |
3.
|
|
|
Now enter some text, save it as a .html document than open it in your browser and see how it works for you.
<body>
<body bgcolor="#CCCCCC">
<p>Dreevoo.com :: knowledge sharing and online learning made for people</p>
</body>
</html>
|
|
| |
4.
|
|
|
And this is how my engraved web text looks like. Play around and experiment a bit with text-shadow attributes to see how text changes.
Click here to open or/and download the .html file from this engraved website text tutorial.
|
|
|
 |
|
 |
|
 |
|
|
