|
|
|
|
|
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.
|
|
|
 |
|
 |
|
 |
|
|
| |
|
|
|
|
|
| Looking for a Houston SEO company that understands the unique heartbeat of the Bayou City? We are a full-service digital marketing agency dedicated to helping local businesses capture their market share through aggressive, ethical, and data-driven SEO strategieshttps://www.google.com/search?q=514+Digi.... |
|
|
|
|
|
|
|
|
|
| Looking for a Houston SEO company that understands the unique heartbeat of the Bayou City? We are a full-service digital marketing agency dedicated to helping local businesses capture their market share through aggressive, ethical, and data-driven SEO strategieshttps://www.google.com/search?q=514+Digi.... |
|
|
|
|
|
|
|
|
|
| Geometry Dash Unblocked challenges players to avoid spikes, saws, and traps while moving through colorful levels synced perfectly with energetic music. https://geometrydashlitepc.org/ |
|
|
|
|
|
|
|
|
|
| Nice little CSS trick. Engraved text can still work well when it’s used lightly, especially on headings, buttons, or small UI details. The main thing is not overdoing it, because once readability takes a hit, the effect stops helping and starts getting in the way.From a marketing point of view, design choices like this should support the page, not distract from it. If the text effect helps guide attention and fits the brand, great. If it’s there just because it looks clever, it’s probably dead weight. |
|
|
|
|
