CSS Engraved Text

  • follow us in feedly
Published February 12, 2013 by Brad Knutson
engraved

Engraved text looks impressive, and until recently, you needed a graphic designer to make them for you. Most modern browsers support the text-shadow property. *cough* Internet Explorer *cough*

It also allows for multiple shadows of variable color. This allows us to create the engraved text effect. Let’s start with a simple colored text with a background color.

Engraved Text

Before we go on, I wanted to make a note about the color choices I’ve made. The engraved text effect will look better if you choose similar colors that are not too dark and not too light. Eventually we will be using black and white shadows and we want both to show up. If the colors are too dark or too light, both shadows wont show up properly. You can play around with the color combination until you find something that looks good to you.

The text-shadow property takes four variables.

The first three variables are units of measurement, most commonly pixels. Lets start by adding a 1px vertical white shadow.

Engraved Text

Well…actually…that looks pretty bad. What went wrong? We didn’t put any spread on the white text-shadow, so it’s as small as it’s going to get. The white is just too strong…

Let’s utilize the alpha layer of the rgba attribute. The alpha layer lets us choose the opacity.

Engraved Text

Ok, that is much better looking. It’s still not standing out as much as we would like, however, so lets add a second contrasting shadow. Lets add a black shadow with a negative position. Let’s tweak the alpha layer for this also.

The final product

Engraved Text

That looks pretty darn good. The shadows translate to different color combinations also:

Engraved Text

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">