ready-to-use resources, tutorials, tips and many other web development related stuff
WARNING! You probably have JavaScript disabled. Some features of this site will not work properly unless JavaScript enabled.
www.webdevelopmentstuff.com changed to www.webdevstuff.com

jQuery FontEffect Plugin

Would you like to add some effects to your titles, headings or any other group of letters? Wouldn’t be excellent to have a headline shadowed and then dynamically mirrored, but without images? Yes, WITHOUT IMAGES! Sounds almost unbelievable, but this possibility already exists!

Alessandro Uliana created jQuery FontEffect plugin which is capable to manipulate fonts and add effects to them, without need to load prepared effect images. This library is still under development but at this time offers absolutely reliable Outline, Shadow, Gradient and Mirror effects. I was really excited while playing with this jQuery plugin because I hate to create small pieces of graphics to add some effect at web. Let alone their loading!

I immediately downloaded the FontEffect plugin, wrote couple of lines of stated below code to check out this jQuery cool stuff in action and impatiently loaded the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery FontEffect Plugin</title>
<meta http-equiv="content-language" content="en">
<meta name="author" content="Teddy Cyber">
<meta name="author-url" content="http://www.webdevstuff.com">
<meta name="description" content="jQuery FontEffect Plugin Demonstration">
<meta name="keywords" content="jquery, javascript, font, effect, plugin">
<meta name="creation-date" content="06/19/2009">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery-fonteffect-1.0.0.js"></script>
<style>
#example1, #example2, #example3 {
    font-family: Impact;
    color: #000;
    font-size: 3em;
}
#example3 {
    margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='example1'>Web Development Stuff - Shadowed</div>
<div id='example2'>Web Development Stuff - Gradiented</div>
<div id='example3'>Web Development Stuff - Mirrored</div>
<script type="text/javascript">
    $("#example1").FontEffect({shadow:true});
    $("#example2").FontEffect({gradient:true});
    $("#example3").FontEffect({mirror:true});
</script>
</body>
</html>

Excellent! Worked in all tested browsers – Firefox 3.0.11, Opera 9.64, IE 6.0, IE 7.0, IE 8.0 and Safari 4.0.

jQuery FontEffect Plugin Demo 1

You can combine two or more effects together and when the element have a background, the effect will be applied between the text and the background to get flawless result. When you assign the effect to an anchor <a> tag it will retain the :hover style if present. You can play with this plugin in combination with CSS to create a variety of effects.

jQuery FontEffect Plugin Demo 2

I found this jQuery FontEffect plugin extremely usefull for web developers who don’t like to spend a time by creating small pieces of graphics to get font effects and prefer the programming way. Like me, for example! 😉

7 Responses to “jQuery FontEffect Plugin”

  1. Travis says:

    Really great plugin! Thanx for posting, it saves my headache of font styling.

  2. TheWay says:

    Wow, this is great, I really like it

  3. GoDK says:

    Very nice plugin! I like how flexible it is compared to how simple it is.
    The only drawback I find is that should you copy/paste selected text with effects applied to it, you get very goofy results.
    I think if you need to present text for copy/paste operations, another option may be in order.
    Overall, though, a good bit of software!

  4. mehmet says:

    Nice plugin, thank your.
    But is it possible to use this script with mysql query results?

  5. Massilia says:

    Simple and easy! Thank you for sharing. I have try it. It’s Works!!!!!

  6. Sergio says:

    Ciao Alessandro, ho un problema con IE7, si vedono delle sbavature quando applico il gradiente al testo, ho provato sia con il posizionamento assoluto che relativo, potrebbe dipendere dalla versione di jquery 1.4??

  7. John Osmond says:

    This plugin causes the text that it affects to lay on top of drop-down menus that might be in the same location.

    Here’s a sample that I’m working on: http://medop.line1one.com

    Does anyone know what I can do about that?

© 2008 - 2017, webdevstuff.com | Powered by Wordpress | Theme by Elegant Themes | Valid XHTML and CSS | Subscribe to RSS