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="https://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.
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.
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! 😉
Really great plugin! Thanx for posting, it saves my headache of font styling.
Wow, this is great, I really like it
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!
Nice plugin, thank your.
But is it possible to use this script with mysql query results?
Simple and easy! Thank you for sharing. I have try it. It’s Works!!!!!
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??
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?