Add Text And Image Shadows To Your WordPress Post

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)


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,

To get this plugin, go to your Admin panel – Plugins – Add New. Type in the words Shadows and you should get a list of plugins that does almost the same job. Choose to install Shadows. Visit the plugin sie for instructions on how to use the plugin.

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.

[catalyst_hook_box name=”adsense_bottom”]

Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.

Divi WordPress Theme

728x90 V3