PDA

View Full Version : gradients using HTML



agent
13-01-2003, 03: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.

E.ric
13-01-2003, 03: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.

agent
13-01-2003, 03: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.

sal
13-01-2003, 05: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.
tga

agent
13-01-2003, 06: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.

Mike
13-01-2003, 06: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.

Mike.

sal
13-01-2003, 07: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.
tga

Heather P
13-01-2003, 07: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.

agent
13-01-2003, 07: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.

sal
13-01-2003, 07: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.
tga

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

JoGiles
13-01-2003, 08: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.

Cheers,
Jonathan

sal
13-01-2003, 08: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.
tga

agent
14-01-2003, 10: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.