Final output

There are various ways through which we can enhance the look of our text. One of these, is giving emboss effect to our text as it gives depth to it. With this effect it does not remain the same regular monotonous stuff in terms of its appearance. This effect is also referred to as'inset' effect.(The fireworks tutorial for the same can be viewed at http://www.imajine.in/tutorials/fireworks/inset.aspx.

We are using a trick to get this effect. The emboss / inset effect is all about color combinations given to background, text and shadow. The thumb rule to get this effect is, giving -

• text-color a shade darker to background
• Shadow color a shade lighter to background.

This effect can be given by making use of the text-shadow (supported by google chrome users) property and Filters (supported by Internet Explorer browsers) in CSS.

Syntax used (the below syntax works only in google chrome) :

We tried obtaining the above effect in IE by giving 'FILTER' style to text, but the finishing is not as good as the one we obtained for chrome. We also have a separate tutorial for glow effect, which can be viewed at http://www.imajine.in/tutorials/css/textglow.aspx

FILTER syntax used for IE is given below:

I hope this tutorial is of some help to you.

Tags: CSS3 text emboss style, CSS3 text inset style