Monthly Archives: March 2011

Engraved Text with CSS

An engraved text effect (where text appears lower than the surface) can be done with the CSS3 property text-shadow.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

Explanation

The parameters of text-shadow are listed below in the order they must appear in your CSS.

Horizontal Offset

For this effect, leaving the horizontal offset at 0 allows the shadow to come from one direction only (vertically) which provides a cleaner look and better effect.

Vertical Offset

When using the darker text on a medium background, it usually works best to use a lighter shadow coming from below. This makes the text look like it is lower than the surface. When using lighter colors, a darker shadow coming from above, gives the same effect. Making the shadow come from above is achieved by using a -1 in the Vertical offset.
text-shadow: 0px -1px 0px rgba(0,0,0,.5);

Blur Radius

You don’t want any blur on the shadow for this effect, so the value is 0.

Color

The last value is the color of the shadow. I am using RGBA colors, which is a combination of the R, G, and B values (you can get these from the Photoshop Color Picker) and the Alpha Transparency. All browsers that support text-shadow also support RGBA values.

You don’t need to use RGBA values; you could try a medium-dark grey color in this example instead. However, using transparency for the shadow, will allow some of the original color to shine through and generally provides a nicer effect. This is especially useful when you are using this effect on colors.

Two Part Shadows

You can sometimes get even better results by using two text-shadows on the text – one dark shadow and one light shadow. You can specify two different shadows on your elements by separating them with a comma. I have found that two shadows are not usually necessary when using greys, but they can be useful with colors.

The third example in color has just one shadow:
text-shadow: 0px 1px 0px rgba(255,255,255,.5);

In the fourth example, I used two shadows, and different opacities, with better results.
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);

Browser Support

This works in all modern browsers. It does not work in IE9 and below.

There is a filter property than can be used on Internet Explorer, that sometimes works, but sometimes produces ugly results. You can experiment and try to find some values that work.

If you would like to read more about using IE shadows to try to make it work, try these articles: Drop Shadow on all Browsers and RGBA Generator of IE

To support IE browsers, you must choose from the following:

  1. Make sure the text looks fine without the Inset effect. This means making sure there is enough contrast between the text color and background color.
  2. Create an image of your inset text headers, and apply them as background-images in style sheet specific to IE only. If you do this, you may decide to skip the CSS solution altogether. However, CSS solutions mean less images to download, so there is a savings for using CSS when you can.
  3. Try using the filter commands for IE, but make sure to text and see if things still look OK.

What text will look like in IE. Make sure things are still legible.

More with border-radius

The border-radius command can be used in many different ways. Using a single value creates rounded corners of the same size, but the property can also be used with different values for each corner, allowing you to create Tabs or other interesting shapes.

The syntax for creating corners of different sizes, can be complex, but there is a shorthand version, which I always use instead. The order of the corners starts with the top-left corner and moves clockwise, ending with bottom-left.

/* I'm adding "px" after 0 so it's easy to change values, but it's not needed for 0 */
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;

Explanation

Creating other shapes is just as simple. You can make any of the 4 corners rounded and with unique values.

.opposite { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  border-radius: 20px 0px 20px 0px;
}

If you take the rounded corner to the extreme, you can create a leaf shape. Also, note the shorthand. When both sets of opposite corners have the same values, you only have to type 2 numbers once. (‘100px 0’, instead of ‘100px 0 100px 0’.)

.leaf { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 100px 0px;
  -webkit-border-radius: 100px 0px;
  border-radius: 100px 0px;
}

Finally, you can make every corner have a different value, creating unique shapes.

.odd { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 50px 30px 10px 0px;
  -webkit-border-radius: 50px 30px 10px 0px;
  border-radius: 50px 30px 10px 0px;
}