View Full Version : gradients using HTML

13-01-2003, 04:17 PM
Look at this shot (http://sal.neoburn.net/pf1images/cap.jpg), then tell me if it's possible to get the horizontal gradient effect, between two colours, using HTML code. I'm sure I've seen it somewhere, but I wouldn't have a clue where. Just so you know, the gradient would have to be running as the background/bgcolor for a cell of a table.

13-01-2003, 04:48 PM
I don't think it is possible with straight HTML.,
You can do it with JAVA, not too sure about Javascript.

Don't forget the gamma correction, otherwise you end up with distorted gradient.

13-01-2003, 04:59 PM
I'm not sure what gave it those lines, it looks fine on the WinXP Pro machine I design on (CRT monitor), but I took the screenshot when it was being hosted on a friends computer, and viewing it from Win2K with an LCD monitor.

13-01-2003, 06:45 PM
sal remembers agent is an asp guy ?:|, so would know basic html

so i guess this (http://sal.neoburn.net/help/gradient/) is no help to you at all!, lol,

grtz sal.

13-01-2003, 07:01 PM
I can see you've gone to great length to do that, so thanks, but... that's what I'm currently doing, but I don't want the image as it wouldn't look right in different resolutions (the image is fixed 151x1 pixels). If it's possible, I'd like it done using no images, so it looks fine in all resolutions.

I'd also like to thank E.ric for telling me it can be done in javascript, I found something, which I will use as a last resort.

13-01-2003, 07:07 PM
>>> If it's possible, I'd like it done using no images, so it looks fine in all resolutions.

It'd be more likely to look right in all resolutions if you use images, rather than some kind of code (which is the only way you'll achieve it without images).

I did something similar on a site, and it looked fine on resolutions from 640x480 right up to something like 1280x1024, so if you do the image right it'll look fine.


13-01-2003, 08:13 PM
>>I'd also like to thank E.ric for telling me it can be done in javascript,

he was talking java, not javascript (im sure you know they're different)

and as Mike said, images are more safer than code created stuff, it displays more truer to your intended color (scheme), even the websafe colors display a lot different over different monitors, depending on their settings, (eg, an image tile of a certain shade of clor for the overall bgcolor is better than using a hex value in the body tag)

grtz sal.

Heather P
13-01-2003, 08:14 PM
First of all, nothing ever looks 100% in ALL resolutions. Someone's bound to have weird settings on a computer somewhere that will stuff it up.

I'd suggest a fixed width table on the left for a menu with an image of the same width tiled using background.

13-01-2003, 08:24 PM
I just remembered that, indeed, I had the cell fixed to 151 pixels, and I'm not sure why I asked the question, but I think it's because it used to be set to 15%, and I was concerned about different resolutions. I'll have to change it now anyway, because when you expand one of the menu items it overlaps the cell to the right and pushes everything over, so I'll just create a new image in PSP.

13-01-2003, 08:24 PM
[i]Originally posted by Heather P
>>>First of all, nothing ever looks 100% in ALL resolutions.

i agree, thats why i used the words 'an image is safer than a hex value' ;)

grtz sal.

Heather P
13-01-2003, 09:05 PM
To solve the resolution problem use nested tables. Outer one works on percentages, inner one (the menu - inside the first cell) fixed.

13-01-2003, 09:10 PM
Yes, it is possible with straight HTML, but it is not very well implemented on various browsers, and hence I would suggest to avoid it.

If you do want the code however, respond and I will post it.


13-01-2003, 09:38 PM
sal peeps at Jonathans website code…

ooh, so the good ol' Microsoft propriety 'filter' style type, :D
while im here, from JoGiles site -
style="filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#0093D9', startColorstr='#006699', gradientType='0')"

grtz sal.

14-01-2003, 11:58 AM
Thanks JoGiles and sal, all I have to do is test it out on XP.
I'll probably end up using an If...Then...Else statement so if the browser isn't MS, it'll use an image.