Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS3 Text Shadowing

The CSS3 text-shadow property is used to add shadows to text which add depth and dimension to text and to make text appear as if it is lifted off the web page.

Syntax

Note: The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur	Optional. The blur distance
color	Optional. The color of the shadow.

Examples

NOTE: text-shadow does not work in Internet Explorer

Example Below of text-shadow: 5px 5px 0 #990000

Example Below of text-shadow: 1em 1em 0 #990000

Example Below of text-shadow: 5px 5px 7px #990000

Example Below of text-shadow: .2em .02em .1em yellow

Example Below of text-shadow: 0 -.06em .02em yellow

Example Below of text-shadow: 0 1px 2px #yellow

Example Below of text-shadow: .04em .04em 0 red, -.04em -.04em 0 orange

Example Below of text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14

Example Below of text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700

Example Below of text-shadow: 7px 2px 6px yellow

Example Below of text-shadow: .05em .05em 0px #eee, .07em .07em 0px #707070

Example Below of text-shadow: 0 0 .01em #fff, 0 0 .02em #fff, 0 0 .03em #fff, 0 0 .04em #ff00de, 0 0 .05em #ff00de, 0 0 .06em #ff00de, 0 0 .1em #ff00de, 0 0 .12em #ff00de

Example Below of text-shadow: 0px 2px 3px yellow;

Example Below of text-shadow: .04em .06em 0 rgba(255,0,180,0.5)

Example Below of text-shadow: 0 0 .02em #fefcc9, .01em -0.1em .03em #feec85, -0.2em -0.02em .04em #ffae34, .02em -0.04em .05em #ec760c, -0.02em -0.06em .06em #cd4606, 0 -0.08em .07em #973716, .1em -0.09em .08em #451b0e

Example Below of text-shadow: 0 0 .02em #fefcc9, .05em -0.05em .04em #feec85, -0.2em -0.02em .06em #ffae34, .02em -0.04em .08em #ec760c, -0.02em -0.06em .1em #cd4606, 0 -0.08em .12em #973716, .1em -0.09em .14em #451b0e

Example Below of text-shadow: .05em .05em 0 yellow, .1em .1em 0 red, .15em .15em 0 yellow,.2em .2em 0 red

Example Below of text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20

Browser Support

• NOTE: Does not work in Internet Explorer.
• Safari 1.1+
• Chrome
• Firefox 3.5+
• Opera 10+

Links

• http://westciv.com/tools/shadows/

top of page

Page last updated: May 31, 2012 14:26 PM