How do I make a gradient with CSS? I have a DIV that needs a vertical gradient background. Thanks.
-jmsYou'll have to use a background image for that.Make your image 1px wide and repeat-x - something like this (<!-- m --><a class="postlink" href="http://bonrouge.com/test/bg2.htm">http://bonrouge.com/test/bg2.htm</a><!-- m -->).you might use also a 1X1 px image and multiply it in a loop for a javascript on-the-fly style alpha transparency (or Moz opacity) within a background colored area... But why to do that? The BonRouge's solution is the common used one.Originally posted by Kor
...But why to do that? The BonRouge's solution is the common used one.
And the more portable solution.
meh this reply maybe 7 months late ...but i cant belive no one thought of just doing this
<DIV ID="DIV" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; padding:10px; font:bold 13pt verdana; color:white;
filter
rogid
XImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')">
<BR/><BR/><BR/>This is the DIV content.</DIV>
the key part of this would be
filterrogidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')
just pop it in your --> style="______"Because that would only work in IE and nothing else.exactly, why use a browser that doenst let you do all the cool stuff there is, when ie does it just fine, and comes with your favorite flavor of windows
using background images for the same result, costs bandwidth, and makes page load slow
besides the guy didnt specify he wanted it to work in firefox
i like to use the filter myself on table backgrounds, it looks good in ie, too make it so those "firefox" users can still see thing semi-decent, i usually popin a background color for the cell, doesnt anyone miss the best viewed in internet explorer buttons?why use a browser that doenst let you do all the cool stuff there isOh, you mean like child and attribute selectors in the stylesheets or :hover over anything but anchors or a correct interpretation of the CSS box model? The "cool stuff" means nothing when the basics aren't already there.your opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely oppositeyour opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely oppositeSo far you haven't so the point's moot. I simply stated facts of which you're obviously unaware. It's always best to learn the basics before the flash.your opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely opposite
I think most people will agree with me that: Microsoft makes fairly good products. IE is an exception.
We are not MS haters. We're web developers that have experience with various browsers and are in a position to say which ones do what.We are not MS haters.
I am... heheI've got no problem with using a M$-IE-specific visual effect as long as you make sure the page will still look reasonably good on other browsers/OS's, which depending on whose statistics you believe will be somewhat more than 10% of your potential viewership.
As far as bandwidth, a 1 x 800 pixel PNG gradient takes up less than 700 bytes. Personally, I'm not going to lose sleep over something that Download s in about 0.2 seconds on a 28.8kbs modem.What nogdog said. I use IE specific effects all the time, but I make sure the pages still work and look serviceable in other browsers. To not use something just because one browser or another doesn't support is too confining for me. Opera doesn't yet support the opacity attri. Does that mean we shouldn't use it? No, just code around it and make the page still usable in Opera.The main thing is to not be foolish enough to use something proprietary to one browser when there is a standard way to do it that is perfectly usable in that browser, too. Lazily relying on the pitiful Javascript namespace pollution of IE, for example, rather than doing it right and fully qualifying Javascript object references. More on topic, creating a page using a layout that requires IE (or any other browser) rendering in quirks mode to be usable.Can I ask:
As far as bandwidth, a 1 x 800 pixel PNG gradient takes up less than 700 bytes. Personally, I'm not going to lose sleep over something that Download s in about 0.2 seconds on a 28.8kbs modem.
Why do you use png rather than gif or jpg ?
I am new to using gradient backgrounds
Also which software does them easiest ?
I have MM Fireworks, Flash and Freehand ( with DW in the MX studio version)
ThanksIn that particular case a GIF would be fine and should be about the same size. Most paint and drawing programs do them pretty easily.
-jmsYou'll have to use a background image for that.Make your image 1px wide and repeat-x - something like this (<!-- m --><a class="postlink" href="http://bonrouge.com/test/bg2.htm">http://bonrouge.com/test/bg2.htm</a><!-- m -->).you might use also a 1X1 px image and multiply it in a loop for a javascript on-the-fly style alpha transparency (or Moz opacity) within a background colored area... But why to do that? The BonRouge's solution is the common used one.Originally posted by Kor
...But why to do that? The BonRouge's solution is the common used one.
And the more portable solution.
meh this reply maybe 7 months late ...but i cant belive no one thought of just doing this<DIV ID="DIV" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; padding:10px; font:bold 13pt verdana; color:white;
filter
rogidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')"><BR/><BR/><BR/>This is the DIV content.</DIV>
the key part of this would be
filter
rogidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000') just pop it in your --> style="______"Because that would only work in IE and nothing else.exactly, why use a browser that doenst let you do all the cool stuff there is, when ie does it just fine, and comes with your favorite flavor of windows
using background images for the same result, costs bandwidth, and makes page load slow
besides the guy didnt specify he wanted it to work in firefox
i like to use the filter myself on table backgrounds, it looks good in ie, too make it so those "firefox" users can still see thing semi-decent, i usually popin a background color for the cell, doesnt anyone miss the best viewed in internet explorer buttons?why use a browser that doenst let you do all the cool stuff there isOh, you mean like child and attribute selectors in the stylesheets or :hover over anything but anchors or a correct interpretation of the CSS box model? The "cool stuff" means nothing when the basics aren't already there.your opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely oppositeyour opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely oppositeSo far you haven't so the point's moot. I simply stated facts of which you're obviously unaware. It's always best to learn the basics before the flash.your opinion is biased ....mr microsoft hater, i suppose if i post anything about microsoft anything in a good light, you'll be there to say something completely opposite
I think most people will agree with me that: Microsoft makes fairly good products. IE is an exception.
We are not MS haters. We're web developers that have experience with various browsers and are in a position to say which ones do what.We are not MS haters.
I am... heheI've got no problem with using a M$-IE-specific visual effect as long as you make sure the page will still look reasonably good on other browsers/OS's, which depending on whose statistics you believe will be somewhat more than 10% of your potential viewership.
As far as bandwidth, a 1 x 800 pixel PNG gradient takes up less than 700 bytes. Personally, I'm not going to lose sleep over something that Download s in about 0.2 seconds on a 28.8kbs modem.What nogdog said. I use IE specific effects all the time, but I make sure the pages still work and look serviceable in other browsers. To not use something just because one browser or another doesn't support is too confining for me. Opera doesn't yet support the opacity attri. Does that mean we shouldn't use it? No, just code around it and make the page still usable in Opera.The main thing is to not be foolish enough to use something proprietary to one browser when there is a standard way to do it that is perfectly usable in that browser, too. Lazily relying on the pitiful Javascript namespace pollution of IE, for example, rather than doing it right and fully qualifying Javascript object references. More on topic, creating a page using a layout that requires IE (or any other browser) rendering in quirks mode to be usable.Can I ask:
As far as bandwidth, a 1 x 800 pixel PNG gradient takes up less than 700 bytes. Personally, I'm not going to lose sleep over something that Download s in about 0.2 seconds on a 28.8kbs modem.
Why do you use png rather than gif or jpg ?
I am new to using gradient backgrounds
Also which software does them easiest ?
I have MM Fireworks, Flash and Freehand ( with DW in the MX studio version)
ThanksIn that particular case a GIF would be fine and should be about the same size. Most paint and drawing programs do them pretty easily.