CSS Text Shadows


Use CSS to add dimensional effects to text inorder have drop shadow effects


CSS Text Shadow : text-shadow

CSS3 is Awesome

text-shadow: color: rgba(65, 70, 75, 0.8);

X-offset ( 0 px )

Y-offset ( 0 px )

Blur-radius ( 0 px)

1. To add dimensional effect to text use CSS property of text-shadow.

2. The Syntax for text-shadow is:

text-shadow{ x-offset, y-offset, blur-radius, color}

x-offset Set the horizontal offset of shadow,a positive value means shadow to the right of text and negative value means shadow to the left

y-offset Sets the vertical offset of the shadow, a positive value means shadow below the text, while a negative value means shadow above the text

blur-radius: To set the blur-radius, negative values not allowed. (Optional, can be ignored)

color To set the color of the shadow. If nothing is specified the default color is black

Example: CSS Text - text-shadow

Give it a TRY! » Note: text-shadow Property was first implemented by Safari in the year 2005.


CSS Text Shadow: Multiple Shadows to create a Raised text effect

Raised Text

1. Text shadow need not be limited to a single shadow, multiple shadows can be created for a single text Node.

2. The way to apply multiple text-shadow is simple, just add multiple shadow values seperated by a comma in between.

3. To create a Raised Text effect you need have four color shades which ranges from dark to light. The most dark and the most light are used for the shadows of text and remaning for the text.

Example: CSS Multiple Text Shadow - Raised Text

Give it a TRY! » Note: .The first Demo has a negative Y-offset and second one has positive Y-offset.


CSS Text Shadow: Create a Letterpress Effect

LETTERPRESS

1. To create an effect as if the text is impressed or stamped into the background, we use multiple text-shadow for a single element.This effect is called Letter-Press

2. To achieve this effect you need a range of four shades of color, dark for the text, medium for background, and remaining light and dark for the shadow.

3. Below is a demo to create such an effect

Example:CSS Multiple Text Shadow Letterpress

Give it a TRY! » Note: Text Indent is used more often on Print pages than on online Text .


CSS Text Shadow: Create a Glowing Text Effect

Glowing Text

1. Multiple Text shadows can be used to create an illusion of a glowing text.

2. Here the glowing effect is created by having a high blur-radius with a bright color.And effect can be be made more intense if we use multiple text-shadow

Example: CSS Multiple Text Shadow Glowing Text

Give it a TRY! » Note: This effect demands only blur colors behind the text, hence all offset values must be set to null.


CSS Text Shadow: Creating Outlines of Text

Text Oultine

1. Normally, its not possible to create a outline of text Using any CSS property. CSS3 new specification dropped the text-outline property, even though some web browsers do support a non-standard version of text-transform

2. But with CSS property of text-shadow you can create an illusion of a text-outline

3. The idea is to have just shadow on all four sides of the text. Below is such a demonstration.

Example: CSS Text Shadow Fake Text Outline

Give it a TRY! » Note:Shadow must be created for all four sides, with the color specifying the color of outline .