CSS3 Text Shadow
Like 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
- CSS3 Text Shadow (Single)
- .my_CSS3_class {
- text-shadow: 2px 2px 7px #111;
- font-size: 3.2em;
- color: #f5f5f5;
- }
HELLO CSS3 WORLD!
The above header uses the following CSS 3
- CSS3 Text Shadow (Multiple)
- .my_CSS3_class {
- text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
- font-size: 3.2em;
- color: #fff;
- text-align: center;
- padding: 10px 0px 5px 0px;
- background: #151515;
- }
An example for those on alternative browsers, not seeing the text-shadow effect..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
Like this article?
Subscribe to our rss, follow our tweets or please help us spread the work & share this with your friends!
Thank you for all your support; have a cookie!
Leave a Reply