Shadow Text BBCode

[BBCode Bot]

Shadow Text BBCode

Author: Dazbobaby
Description: Shadow Text BBCode will add a simple drop shadow to your text, looks nice, but not 100% cross browser compatible.
Note! You can put the css part in your stylesheet to make this bbcode valid xhtml.

---

BBCode:

Code: Select all

[shadow]{TEXT}[/shadow]

HTML:

Code: Select all

<span id="text">{TEXT}</span>

  <style type="text/css">

#text{
   font-size: 3em; /* optional. just to increase the font size. */
   display: block;
   line-height: 1em;
   color: #666; /* shadow color */
   background-color: transparent;
   white-space: nowrap; /* wrapping breaks the effect */
}

#text:before,
#text:after{
   content: "{TEXT}"; /* generated text */
   display: block;
}

#text:before{
   margin-bottom: -1.05em;
   margin-left: 0.1ex;
   color: #ccc; /* shadow color */
   background-color: transparent;
}

#text:after{
   margin-top: -1.05em;
   margin-left: -0.1ex;
   color: #fff; /* text color */
   background-color: transparent;
</style>

Helpline:

Code: Select all

Shadow: [shadow]some text[/shadow]

Example:

Code: Select all

[shadow]Some simple text, with a shadow.[/shadow]

Demo:
[shadow]Some simple text, with a shadow.[/shadow]