Font effect is a jQuery plugin that add some effect to html text.
The available effects are (for now) Outline, Shadow, Gradient and Mirror, here is an example:
This is the simplest example,
In this case no options are set and default values (outline for the effect) are used, this is the same as to say
the border color, if not set, will be automatically set to a contrasting color, note that font family and other options for these examples are set in the CSS.
Besides outline there are three more effects:
Click on the effect to view the code
You can combine two or more effects together
or
When the element have a background the effect will be applied between the text and the background
When you assign the effect to an anchor <A> tag it will retain the :hover style if present
Hover Here !Click on the effect to view the code
Each effect has possible options for color, position, transparency etc...
you can tweak these value to obtain, in combination with CSS, a wide variety of effects.
Times fat
Blended
Block
PIZZA
Revolution
|
Glowstick
RIPPLES
FireFont
GHOST
|
Click on the effect to view the code
There are six classes you can use to access the effect elements: JQFE, JQFEText, JQFEOutline, JQFEShadow, JQFEGradient, JQFEMirror
Click on the code to execute
Of course you can do more complex operation using other JQuery functionality:
there are also two methods you can use,with redrawFE([newOptions]) you can redraw the effect and, eventually, send a new array of options.
with removeFE([removeOptions]) you can remove the effect from the element.
It will save the options in the element's data field so you can
apply the effect again using redrawFE().
To eliminate the options from the element just pass the true argument to the function.
Click on the code to execute
Here is a list of some common fonts.
There is still a lot of space for improvements, here are some ideas (in some cases already half developed) that I hope to integrate in the next version once I realize there is some interest.
More colors to gradient
Slanted reflex in mirror effect
Add preset effects
Add a debug or edit-on-page utility
Reduce or limit the div number
Add some predefined hover effect for anchors
Add a "lazy" option (useful for pages with a lot of effects like this one)
Add deformation effects, as wave, ripple, width, height and rotation. (maybe in a separate FontDeformation plugin)
This is a (far-to-be-perfect) tool I used for testing, I thought it should be useful to put it here
to help you gain confidence with the available options, test different effects and find the ideal combination.
Do not expect (for now) smooth performance from this little tool.
outlineColor1: outlineColor2: outlineWeight: shadow: shadowColor: shadowOffsetTop: shadowOffsetLeft: shadowOpacity: shadowBlur: mirror: mirrorColor: mirrorOffset: mirrorHeight: mirrorDetail: mirrorTLength: mirrorTSTart: gradient: gradientColor: gradientPosition: gradientLength: gradientSteps: gradientTLength: gradientTSTart: hideText: |
Text: Text Color: Background Color: Background image: Font Family: Font Size: Margin Top: Margin Left: |
E1World (2009-04-01 08:00:20)
WOW!! This is truely a big and important plugin. Very useful. Thank you!
(2009-04-01 10:35:37)
Great!!
martin (2009-04-05 10:39:29)
very nice plugin, thank you!
Ryan Williams (2009-04-21 18:11:22)
It's a cool idea, but unfortunately Cleartype (which is enabled in Vista+ and IE7+ by default) makes this effect call apart as it applies its font smoothing algorithms to all the different layers, which makes multicoloured artefacts appear in the outlines, shadoes, etc. I suspect this also causes a performance hit. :(
Alessandro (2009-04-22 17:07:21)
Thank you Ryan.
I didn't even know until now of the cleartype existence 8O
You are right, I tested the effect with this options activated and, as you say, there are some inconsistencies, as multicoloured pixels on border and ugly aliasing of shadows and gradients, mainly in explorer but also other bowsers aren't free from this problem even if in a lesser extent.
I think I'll add a paragraph for this (after some tests) in the "known issues" section, after all, as I can see for now, these problems aren't always present and depend on the OS/browser/effect/font/size/color/configutation combinations. Somtimes it works fine, and sometimes defects can be viewed as features ;)
carlo (2009-04-24 00:41:01)
grande articolo e splendidi effetti! Complimenti
Hank (2009-05-10 23:36:58)
I'm having a problem with Internet Explorer. Using the "Gradient & Mirror" effect in Firefox works fine but shifts the text down way down the page in IE. Any idea what could cause this? Thanks.
kijioy (2009-05-20 15:34:49)
Great!! Thanks
Alessandro (2009-06-04 09:08:06)
@hank
it is the gradient or the mirror effect shifting? or both?
try to put everything in an absolute positioned div ensure the box have enoguh space and test also before apply the effect
if nothing works post a code snippet
(2009-06-10 09:42:25)
you are wellborn
very very nice and great
please extend features
lgch (2009-06-15 16:23:34)
good
dlv (2009-06-19 15:29:42)
really great! really usefull, i like it!
congrats, and thanks for share it !
(2009-06-23 21:28:03)
Whats wrong with just using a standard image?
(2009-06-24 20:14:08)
Fantastic!
(2009-06-24 20:24:23)
to me, it doesnt works.
have 1.3.2 jquery
have inserted the codes correctly
did everything in instructions, and bam - doesnt works >_
Teddy (2009-06-25 11:40:54)
Excellent plugin Alessandro! I like it very much so I wrote a post about it on my blog webdevelopmentstuff. Keep working on it and I'm sure it'll be one of the most popular jQuery plugins.
Alessandro (2009-06-25 11:41:24)
@Teddy
Thanks a lot, maybe this summer there will be a new release, I need only the time to work on it :)
@Whats wrong with just using a standard image?
Nothing! Of course is pointless to load jquery and the plugin only for a static headline or a logo when you can use a simple, and more compatible, jpeg but... if you want to apply the effect to more elements or a dinamically generated text (such as post titles in your blog) this could be a solution.
@to me, it doesnt works.
Please, post or send me the code you are using so i can figure out what is wrong...
nSD (2009-06-28 19:37:15)
I can't seem to get this to work. I have downloaded and called the scripts and checked the paths. They're being run perfectly fine. The effect just never happens.
Correct me if I'm wrong, but I just have to call the main jquery file, then your plugin file, then use inline js to specify what element, correct? I must be missing something.
Thanks for the help.
Alessandro (2009-06-29 10:30:46)
@nSD
This seems happen to many... :(
ok... first of all it is important to notice that the effect can sometimes be so subtle to result almost invisible and you have to tweak the options to make the effect evident (expecially with gradient and mirror effect).
if this is not the case, or you recive some js error, post or send me the code so I can figure out what is wrong.
nSD (2009-06-29 23:48:27)
I was trying to use the basic outline function, the second example on the page.
Alessandro (2009-06-30 23:48:27)
Did you put the script in an after-loading function?
i.e.
(2009-07-02 17:41:37)
sunny
Islander (2009-07-02 18:32:55)
Great stuff, unfortunately it breaks the CSS "text-align"-attribute, I wanted to apply the standard effect to a right aligned text, and it would place the text on the left, there was no way to avoid that, not even by nesting the text into another element.
Alessandro (2009-07-02 19:35:54)
@islander
Try to float the element.
Spencer (2009-07-14 16:06:53)
I'm Lovin It!
(2009-07-24 04:19:16)
Beautifull, may i'll use it in the future ;)
just has to be even more cross-browser and then it 'll be superv plugin !
Many Thanks
arial (2009-07-25 22:49:14)
this is very impressive, especially because i am starting to retro web my sites (i think the www is becoming very vanilla, when did we all decide to lock onto a basic set of formats). your outline feature makes it possible for me to put readable text on complex backgrounds. i am having some formatting problems, i looked at the resultant html and you are right (div, div, everywhere a div div) but i am patient, i'll figure out a way to deal with that..
thanks again for making the effort to improve the world of programmers.. for free of course!
it's like the best stuff is usually generated by people like you..
also; letting people post w/o registration... nice..
Alessandro (2009-07-26 11:00:22)
Thanks for your nice words arial... I want to assure you that all this work give me enough retribution in positive karma token :), the most valuable and useful currency in this world (and it's feree!).
The DIV proliferation is an issue I'm working on now, it's hard because some effects indeed require a lot of it, and in some cases this could be a problem, but cosider all those div do not influence neither the SE crawler job nor the page downloading time, beign that they are rendered once the page is loaded.
If you have particular issues using this plugin feel free to ask me for suggestion, this could be a good way to improve future versions.
arial (2009-07-29 21:13:31)
your welcome Alessandro
okay: for those of you that have noticed the minor formating changes after fontEffect.. i experimented, and fontEffect does sometimes change formating for the 'current' object but it does inherit formating from the parent object without change.. so if you surround the font you want changed with 'yet another div' using an 'id' then execute your font changes against that 'id', fontEffect inherits all of the parents' class properties..' and bingo.. everything is back to normal..
and thanks again Alessandro
(2009-08-06 03:52:15)
Thanks
Brad (2009-08-17 09:48:28)
Hello to you,
Please find the following code that does not seem to function.
Alessandro (2009-08-17 09:50:00)
Hi Brad...
there is nothing wrong with your code...
when you do not specify the outline color the plugin try to find a contrasting color... in this case for "#222" (almost black) he propose #ddd (almost white)
so, maybe you can't see the outline because the background is white, check with a different color for the font, or assign a outlineColor option,
Adeptus (2009-03-31 15:30:10)
Great work, man!
Tnx *500!!! This is the best JS font effects script!