jQuery FontEffect: Create Font Effects Without Using Images

FontEffect is a jQuery plugin that adds effects to HTML text, without using any images. In version 1.0 (which has only 7 kb), you can use 4 different text effects: edge (outline), shadow, gradient and reflection (mirror).

To use jQuery FontEffect, use the following code:

- Javascript / jQuery:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://path.to/jquery-FontEffect-1.0.0.min.js"></script>

Place the above code before the </head> tag in your template.

Obviously, replace http://path.to/jquery-FontEffect-1.0.0.min.js with the exact path to the jquery-FontEffect-1.0.0.min.js file. Also, if you already use jQuery, don't include the jQuery code twice.

-CSS:

#example{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

This can be placed in your .css file or if you use Blogger, before the ]]> tag in your template.

-HTML:

<div id="example">Web Upd8</div>

<script type="text/javascript">
$("#example").FontEffect({shadow:true});
</script>

The above html code will present the "Web Upd8" text using shadow effect. You can replace it for any of the other effects supported by this jQuery plugin.

It is an interesting jQuery plugin, ideal for dynamically generated headers (such as the title of the post). The best thing is that it works with most known browsers, including everyone's favorite: IE6. :)

More info, live demo & download