colour gradients (how to...)

[TimBert]

I've tried searching for the info, but no luck. I would like to play around with colour gradients and/or glow effects for my menu:

http://www.leicesterandleicestershire.com

Any help would be appreciated.

TBA

[John]

The only way I know of would be to turn your main menu items into graphics and get the effect you want that way. You can still have it scrolling, etc.

[kevin3442]

Hi Tim,

You're getting into this menu thing aren't you? Watch out! Pretty soon you'll be among the addicted.

I think that, in general, John is right about the graphics... especially for glowy effects. There is one way, however, that you could cause a gradient fill through the script, by setting offbgcolor="transparent" in the menu style and using a Gradient() filter in the style's overfilter (you could also set onbgcolor="transparent" if you want). The following overfilter would cause a yellow-to-black, top-to-bottom (vertical) gradient fill.

Code: Select all

overfilter="Gradient(GradientType=0, StartColorStr='#FFFF00', EndColorStr='#000000')";

Remove the border properties from the style and this gradient gives a sort of glowy, metallic gold, almost 3d look to a horizintal menu.

Change GradientType=1 for a horizontal gradient. Reverse the Start and End colors to reverse the direction of the color change. As always, you can combine this with other filters, like Shadow(), Alpha(), Pixelate(), etc.

One thing... this will only work in IE5.5 and above! So it probably ain't all that useful. But it might be fun to play with, and it'll help you experiment with different types of filters.

Kevin

[Maz]

I like gradiant fill for silver, can I do it on a white background, text, with borders, I don't want it transparent, that's why of got rid of fills. I'm surprised you didn't tell me about this before, maybe you finally figured it out.

This didn't work, then I tried transparent and ended up with total transparent.

overfilter="Shadow(color='#777777', Direction=135, Strength=5);Gradient(GradientType=1, StartColorStr='#C7CAD7',EndColorStr='#ffffff')";

maz

[kevin3442]

I'm surprised you didn't tell me about this before, maybe you finally figured it out.

I've never looked into it until I saw the question from Tim today. I hadn't realized you were interested in gradient fills... I must've missed something there... sorry.

White-to-black, top-to-bottom would probably give a silvery effect. But you can't do it on a white background, because the fill will go behind the offbgcolor... it's gotta be transparent. Alternatively, you could define a small margin for a menu (as a menu property). The margin would surround the menu, and I believe the gradient would fill in the margin, even if offbgcolor was not transparent. The result would be a sort of gradient border around the menu, with menu items having a white background. If you left the onbgcolor="transparent", then mousing over the item would have a 3D effect of "completing the gradient" for that moused over menu item. I.e, try the following style in a horizontal main menu (don't forget to add margin=5; or so to the main menu definition):

Code: Select all

with(menuStyle=new mm_style()){
onbgcolor="transparent";
oncolor="#ffffff";
offbgcolor="white";
offcolor="#000000";
separatorcolor="#808080";
separatorsize="1";
padding="3 7 3 7";
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
overfilter="Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#000000')";
}

Remeber, this only works in ie5.5+

Kevin

[Maz]

I don't know what I'm doing any more, its a toss between code and design, code usually wins.

When you say 5.5 or above do you mean any better browser or only IE?

If I only used onbgcolor transparent, I'm still likely to get a transparent background in some browsers? So it really requires a white bgimage?

Thanks,
maz

[John]

Typically only in IE (unless a different browser really understand IEisms). Remember, the filters are actually written by M$.

[kevin3442]

Hi Maz,

...When you say 5.5 or above do you mean any better browser or only IE?

Better browser??? I don't understand... what could be better than IE? Seriously, I do mean IE5.5 or IE6 specifically. I believe that these filters provide a hook into DirectX, which is a multimedia technology that MS introduced sometime in the mid 90s (I think). So, to that extent, John is right that it's a MS thing. Not to say, however, that other non-MS software couldn't concievably hook into DirectX; many do (video games galore!). But as far as I know, there are no other browsers that do. More's the pitty because these filters give you fairly easy methods to add some nice effects with a minimum of code.

If I only used onbgcolor transparent, I'm still likely to get a transparent background in some browsers?

Sounds about right.

So it really requires a white bgimage?

I guess that'd work, but I don't know for certain. Not a bad idea... certainly worth a try. Or, maybe you could even make a 1px white image, make it the menu style's menubgimage (instead of the item's bgimage) and let the natural repeat fill the menu's background. Don't know though... the gradient might cover the menubgimage. Think I might give that a shot right now... no sense doing any real work!

Kevin

[kevin3442]

So... you get different results depending on whether you use menubgimage or bgimage.

Suppose you have an image called 1px-white.gif. If you set menubgimage to this image (and onbgcolor and offbgcolor="transparent". margin=5 in the menu), then the entire menu is gradient filled in IE5.5+ (the gradient covers the menubgimage). But the menu has a white background (plus margin) in other browsers and, of course, no gradient at all.

Instead of menubgimage, if you set bgimage to 1px-white.gif, then the bgimage will cover the gradient on the items, but the gradient comes through in the margin. On mouseover, the moused over item becomes all gradient. In other browsers, it's all bgimage, no gradient. Problem now is that if you don't have an overbgimage, then your background becomes transparent on mouseover.

I'm sure you'll experiment... maybe even try combinations of bgimage and menubgimage.

Kevin

[Maz]

Kevin,

Thanks for your testing and information, since IE has been replaced by Safari and lack of browser support, I went with menubgimages that appear to be the most stable and least code.

maz

[grantboy]

I've just installed the latest version of the nav bar and this appears to work fine except from behind a proxy (I currently work for a major bank) when I try to access the site, both http://www.thedemopage.dynu.com AND http://www.milonic.co.uk I get the same error.

the error message from the milonic web page is as follows:

Line: 19
Char: 1
Error 'mm_style' is undefined
Code: 0
URL: http://www.milonic.co.uk

The proxy I think is squid.



If you want me to do any testing from behind the proxy let me know, i'm more than happy to help get this issue resolved.

[John]

Just a few minor things...

1. http://www.milonic.co.uk is no longer used. The new URL is http://milonic.com/.

2. In your data file, effect= is no longer used. It's overfilter= and outfilter= in the style definition.

3. The following code is used as an example, but most of your lines contain the same problem(s)...

Code: Select all

aI("text=a1.  ;showmenu=a1;;status=Back to the home page;separatorsize=1")

...should be...

Code: Select all

aI("text=a1.  ;showmenu=a1;status=Back to the home page;separatorsize=1;");

The double ;; after the second   is correct.

The double ;; after showmenu=a1;; is not.

The end of every aI statement should be as shown - ;");

In the code you have a <body> before the <head></head>, but no closing </body>. There is also no <html></html>.

Your css link is outside of the <head>.

Just a picky-picky for Monday AM.