CSS3 Text Shadow

Along with the box-shadow effect, we can apply shadows to text using CSS3.

To create a shadow in text, the CSS is written text-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual

HELLO CSS3 WORLD!

The above header uses the following CSS 3

  1. CSS3 Text Shadow (Single)
  2. .my_CSS3_class {
  3.   text-shadow: 2px 2px 7px #111;
  4.   font-size: 3.2em;
  5.   color: #f5f5f5;
  6. }

HELLO CSS3 WORLD!

The above header uses the following CSS 3

  1. CSS3 Text Shadow (Multiple)
  2. .my_CSS3_class {
  3.   text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
  4.   font-size: 3.2em;
  5.   color: #fff;
  6.   text-align: center;
  7.   padding: 10px 0px 5px 0px;
  8.   background: #151515;
  9. }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen