How to use CSS3 Text Shadow in Blogger posts And headings

Text Shadow The Name itself shows that this property adds Shadows to the text this is the Property Which Comes Under CSS3 And Compatible with Almost all Popular Browsers and You can See Compatible browser versions at the right. Text Shadow Is Animatable And can be used with JavaScript and its libraries like JQuery.

Text Shadow Syntax:

text-shadow: X-coordinate Y-coordinate Blur-radius Color;

For Example:

h1 { 
  text-shadow: 1px 2px 3px #000;
}

• The First Value in the above example Specifies The Horizontal Distance or horizontal Position of the Shadow.
•  Second Value Specifies the Vertical Distance or Vertical Position of the Shadow.
• The Third Value Specifies the Blur Radius and this is optional Field. The Default Value is 0 if it is Empty.
• The Fourth Value Specifies The Color To the Shadow

To add more than one shadow to the text Separate it with Comma For Example

h1 { 
  text-shadow: 1px 2px 3px #000, 
               3px 2px 1px blue; 
   }

The First Two Values are Mandatory or Required in order text Shadow property to work and Negative Values are also allowed if you add Negative value to the first parameter then it will move left and if you add negative value to second parameter it will move up vertically. 


The Third Parameter is optional and if you don't add any number then the default value will be added automatically which is Zero (0). If you Specify The Value the text will stretch this Causes Blur Effect.

The Fourth Parameter is for Color and we can use RGBA And HSL Values To Add Transparency to the Text.

To Add RGBA Values to make it transparent See The Example Below

h1 { 
  text-shadow: 1px 2px 3px 255,0,0,0.3;
        }

How to use Text Shadow inside Blogger Posts?

The Best way to use Text Shadow for your posts Titles or For Particular Paragraphs, ID, Class etc is By Following this Below Syntax.

For Post Title:

.post .post-title { 
  text-shadow: 1px 2px 3px #000;
                  }

For Post Paragraphs:

.post p { 
  text-shadow: 1px 2px 3px #000;
                  }

For Particular Class in the post:

.post .add-your-class-here { 
  text-shadow: 1px 2px 3px #000;
                  }

For particular ID in the post:

.post #add-your-id-here { 
  text-shadow: 1px 2px 3px #000;
                  }

Text Shadow
Version:	CSS3
Property:	Text-Shadow
JS Support:	True (style.textShadow="x y blur-radius color")
CSS Support:	Headings, ID, Class, P, All Text Elements
Compatibility:	Chrome 4.0+, Internet Explorer 10.0+, Firefox 3.5+, Opera 9.6+, Safari 4.0+
Multiple Text Shadows Support:	True Sperated By Comma