Friday, 9 November 2012

CSS3 text-shadow property

Friday, 9 November 2012

Understanding CSS3 shadow property

Examples

Below all are CSS3 shadow effect. I have put the CSS code here. But if you want to see page source, you better download cleaner html file, since the page source of this article contains a lot of extra styling information as I crafted it in blogger.

First six examples explain vertical and horizontal positioning of the shadow works. Essentially they are similar with different positions of the shadow. The remaining examples illustrate the capability of this CSS3 property.

3. In below code, 1em - means the shadow will appear right skewed (since the value is positive) by 1em 1em - means the shadow will appear below the text (since the value is positive) by 1em#f00- is hex value for a red shadow color Code<span style="text-shadow: 1em 1em#87bb04;">CSS Shadow</span> Output

CSS Shadow

4. In below code,

-1em - means the shadow will appear left skewed (since the value is negative) by 1em 1em - means the shadow will appear below the text (since the value is positive) by 1em#fc04f7- is hex value for a shadow color Code<span style="text-shadow: -1em 1em#fc04f7;">CSS Shadow</span> Output CSS Shadow

5. In below code,

-1em - means the shadow will appear left skewed (since the value is negative) by 1em 0em - means the shadow will appear in the same line of the text#fc04f7- is hex value for a shadow color Code<span style="text-shadow: -1em 0em#ff6a00;">CSS Shadow</span> Output

CSS Shadow6. In below code,

-1em - means the shadow will appear left skewed (since the value is negative) by 1em -1em - means the shadow will appear above the text (since the value is negative) by 1em#05b4a3- is hex value for a shadow color Code<span style="text-shadow: -1em -1em#05b4a3;">CSS Shadow</span> Output