Note: It is possible to put a drop shadow on boxes (HTML elements).
Text shadows can be created achieved in Webkit, Gecko, Presto and IE 10 with:
.darkShadow { text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.5); }
The parameters are X offset, Y offset, Blur (optional), and Color amount. Note: You can not use color constants (such as "black"); specify color using hex or rgba notation.
CSS3, Please! has a good interactive way of testing this property.
When using text-shadow, it is a good idea to shut it off when someone selects that text. This acheived by:
::-moz-selection { background: Darkmagenta; color: #fff; text-shadow: none; } ::selection { background: Darkmagenta; color: #fff; text-shadow: none; }
This is an example of a double shadow. The CSS is:
text-shadow: 5px 5px 3px rgba(0,0,0,.25), -7px -3px #0FF;
text-shadow:0px 0px 15px rgb(254,51,151);
Outer Glow
text-shadow:-3px -3px rgb(254,51,151), 3px -3px rgb(254,51,151), 3px 3px rgb(254,51,151), -3px 3px rgb(254,51,151);
Attempt at creating a stroke