Forums - Creating a gradient in CSS

Forums (http://www.abandonia.com/vbullet/index.php)

- Programming (http://www.abandonia.com/vbullet/forumdisplay.php?f=25)

- - Creating a gradient in CSS (http://www.abandonia.com/vbullet/showthread.php?t=26921)

Creating a gradient in CSS

More hack student coding incoming. :ouch:

I need to create a gradient background using CSS without using background-image. Right now that's being handled with this:

Code:

html{

        background: #e8e8e8; /* fallback for non-support */

        background: -webkit-gradient(linear, left bottom, left top, from(#e8e8e8), to(#8c8c8c)); /* Safari and Chrome */

        background: -moz-linear-gradient(top, #8c8c8c, #e8e8e8); /* Firefox 3.6+ */

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c8c8c', endColorstr='#e8e8e8'); /* IE8 */

        }

body, #header, #footer {

        width: 720px;

        }

body {

        padding: 10px 10px 10px 10px;

        margin-left: auto;

        margin-right: auto;

        border-radius: 15px;

        -moz-border-radius: 15px; /* Firefox */

        background-color: #ffffff;

        }

The body selector is included because IE won't display its white background over the html background with this code, which is one of the main things I need to resolve. The other is the general sense of hackery. I don't know if there's a cure for that though. :p

Thanks in advance.

a word of advice from an experienced user: don't

1 x n pngs are very cheap in size. it's not worth the trouble

It was an assignment requirement, and CSS cleanliness was not. I would never make a serious website like that.

Well, it's been graded, and I didn't do as well as I'd hoped. In hindsight, I could have combined all the background images into one image file with a transparent background and used background-position. :doh: That would be murder to load though. Better luck next time, I guess.

Thanks for taking the time to reply. :)

I just heard that the latest version of some browsers support CSS3, which includes gradients:

http://www.dynamicdrive.com/style/cs...ear_gradients/

I don't know a lot about CSS but it seems there wasn't any satisfactory solution before. But I don't know if IE supports CSS3--Chrome, Firefox, Opera and Safari reportedly do.

Quote:

Originally Posted by Japo (Post 426022)

http://msdn.microsoft.com/en-us/ie/ff468705#_CSS3
IE9 ambiguously claims they offer "more support" for CSS3... pfffft!

Support for CSS3 never seems to be total. I didn't use the official syntax for gradients because none of my browsers (Firefox 3.6.16, IE8, forgot which Chrome) actually supported it, although Firefox and Chrome did have their own syntax for gradients. The other CSS3 property I wound up using was border-radius, which Chrome supports the official syntax for but Firefox 3.6+ and IE8 don't.

Hence the "more support" nonsense.