Encyclopedia Dramatica:Formatting/Drop Shadow
HEY YOU.
YES, YOU THE
UNEDUCATED MASSES.
I'LL BET YOU
WISH YOU KNEW
HOW TO MAKE
DROP SHADOWS
FOR TEXT AND OBJECTS.
How to make Drop Shadows for Text and Objects
For Text
The drop shadow is a professional way to make your text stand out more fully. It's very simple to apply to any given text or object, be it picture, table or otherwise. The formula for achieving the Drop Shadow on text is as follows:
style="text-shadow: (insert color here-usually black) (numerical value-insert horizontal shift of the shadow here)px (num value-insert vertical shift of shadow)px (num value-insert diffusion of the shadow)px"
A practical example of the text-shadow is as follows
<span style="color:red; text-align:center; text-shadow: black 2px 2px 3px; font-size:150%;">'''THIS IS A PRACTICAL EXAMPLE'''</span>
For Objects ( Tables, Images )
On objects, such as tables, a different formula must be used to create the shadow effect. Note that both -moz and -webkit are a part of this formula. This means that the only two browsers that are capable of showing the shadow effect on boxes and tables are Firefox and Safari, in a similar manner to the way that rounded corners work (see here for more info on rounded corners and usage). Note also that on the following table, I used the same essential parameter format as on the text-shadow, where you have first the color designation of the shadow, then the horizontal and vertical shifts of the shadow, and finally the shadow's diffusion:
{|style="width:100%;-moz-box-shadow: black 3px 3px 3px;-webkit-box-shadow: black 3px 3px 3px; background-color:red; padding:15px;"
| style="font-size:130%;text-align:center;" |THIS IS A PRACTICAL EXAMPLE
|}
| THIS IS A PRACTICAL EXAMPLE |
This particular technique also works for images
{|style="-moz-box-shadow: black 2px 2px 5px;-webkit-box-shadow: black 2px 2px 5px;"
| style="border: 2px solid blue"| [[Image:Fatnofxdude.jpg]]
|}
|
For both Objects & Text at the Same Time
Anywhere the option for a style= exists, is a place where you can insert a drop shadow. A practical application of the use of both text and box shadows is as follows:
{| style="width:100%; background-color:Goldenrod; text-align:center;padding:20px;-moz-box-shadow: black 2px 2px 4px;-webkit-box-shadow: black 2px 2px 4px"
| style="text-shadow: black 2px 2px 3px; font-size: 150%; color:white;" | '''THIS IS A PRACTICAL EXAMPLE'''
|}
| THIS IS A PRACTICAL EXAMPLE |
