Is it possible to use css to create graduated backgrounds to things? i.e. backgrounds that change from one colour to another.
IE lets you do this:
style="filter
rogid
XImageTransform.Microsoft.Gradient(startColorStr='#6699FF', endColorStr='#CEDFF6', gradientType='1')"
Is a browser independent version available? If not, how best to achieve this so all browsers can see it?
Thanks for any input.As you probably know that is IE propriety code so the best version that will work all round would be an image that just repeats itself.
Hope that helps.Thanks for your reply. For the sake of discussion - if I wanted a block of colour at the top of my site that occupied 100% of the width of the page and was say 50px high and I wanted it to go from Blue at the left to Red in the middle and from Red to Blue again on the right ... could I do this with two divs with an image that was 1 pixel high and perhaps 320px wide that went from Red to Blue etc. How would I set the divs up so they were exactly next to each other and occupied the full width at the top of the page and can you tile images in the backgrounds of divs? Thanks again for any help.I think you'd be better off using an image.You can only do it without using an image in IE. It's really a neat effect and since it's not an image it really cuts down load time, but no other browser supports it.WAG - Use a background (html? page?) image that produces the desired gradation. Center it and repeat it vertically. Set the background-color the same as the outer edges of the background image.Originally posted by Webskater
a block of colour at the top of my site that occupied 100% of the width of the page and was say 50px high and I wanted it to go from Blue at the left to Red in the middle and from Red to Blue again on the right
like this? (<!-- m --><a class="postlink" href="http://www.waycoolwebdesign.com/test/gradation1/gradation.html">http://www.waycoolwebdesign.com/test/gr ... ation.html</a><!-- m -->)Yes, TimeBandit, exactly like that. Thanks very much and thanks to everyone else for their answers.
IE lets you do this:
style="filter
rogidXImageTransform.Microsoft.Gradient(startColorStr='#6699FF', endColorStr='#CEDFF6', gradientType='1')"Is a browser independent version available? If not, how best to achieve this so all browsers can see it?
Thanks for any input.As you probably know that is IE propriety code so the best version that will work all round would be an image that just repeats itself.
Hope that helps.Thanks for your reply. For the sake of discussion - if I wanted a block of colour at the top of my site that occupied 100% of the width of the page and was say 50px high and I wanted it to go from Blue at the left to Red in the middle and from Red to Blue again on the right ... could I do this with two divs with an image that was 1 pixel high and perhaps 320px wide that went from Red to Blue etc. How would I set the divs up so they were exactly next to each other and occupied the full width at the top of the page and can you tile images in the backgrounds of divs? Thanks again for any help.I think you'd be better off using an image.You can only do it without using an image in IE. It's really a neat effect and since it's not an image it really cuts down load time, but no other browser supports it.WAG - Use a background (html? page?) image that produces the desired gradation. Center it and repeat it vertically. Set the background-color the same as the outer edges of the background image.Originally posted by Webskater
a block of colour at the top of my site that occupied 100% of the width of the page and was say 50px high and I wanted it to go from Blue at the left to Red in the middle and from Red to Blue again on the right
like this? (<!-- m --><a class="postlink" href="http://www.waycoolwebdesign.com/test/gradation1/gradation.html">http://www.waycoolwebdesign.com/test/gr ... ation.html</a><!-- m -->)Yes, TimeBandit, exactly like that. Thanks very much and thanks to everyone else for their answers.