To add shadows to your text in your WordPress blog, all you need is a simple line of code. It works with all major browsers except Internet Explorer, which not too surprising. A lot of my modded themes appear different in that silly browser. Even Google Chrome, being a new kid on the blog supports most if not all CSS standards. Maybe Microsoft thinks they are the kings and they do not need to follow standard procedures.
To add shadows to your preferred text all you need is to use this code
text-shadow: 1px 1px 2px#000;
example: (sorry for those using Internet Explorer, you won’t see anything)
I HAVE SHADOWS FOR THIS TEXT
To achieve this, make a new selector or a new div, which ever you prefer to call it, in your stylesheet. Call it whatever you want. I call mine “bold”. So whenever I want some really bold text, I warp those text with that class. Like this.
<p class="bold">I HAVE SHADOWS FOR THIS TEXT</p>
To get this same effect, the codes in your stylesheet should be something like this:
.bold {width:95% font-style: bold; font-family: Impact; clear:both; width:95% margin-top: 5px; margin-bottom:15px; font-size:30px; color: #ddd; line-height:30px; text-shadow: 1px 1px 2px #000; }
The last line decides the spacing, distance and the color of your text shadows. You are of course free to play around with your own settings.
I did find some jQuery plugins that claims to work with Internet Explorer, but it’s kind of complicated so I decided against using it. I do not like over stressing myself these days. However, in the course of looking for those plugins, I found one that works nicely for images and blockquotes.
Simply called shadows, this plugin lets you has shadows for your images in a few different ways. The image above uses this plugin to make curled shadows so it has a 3 dimensional look. You can also use it for your blockquotes like the example below which uses the normal looking shadow,
Basically, you just wrap whatever you want to have a shadow with a div with the attributes you want. The example above, I used the shadow_osx attribute and wrapped the blockquoted text inside like this.
<div class="shadow_osx"> All The Quoted Text </div>
Same for the image I used above.
Try it. Have fun with your shadows.
