CSS Text Shadows
Use CSS to add dimensional effects to text inorder have drop shadow effects
CSS Text Shadow : text-shadow
CSS3 is Awesome
1. To add dimensional effect to text use CSS property of text-shadow.
2. The Syntax for text-shadow is:
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-shadowGive 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
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 TextGive 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
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 LetterpressGive 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
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 TextGive 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
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.