Jump to content

Blake

Recommended Posts

Hello, I wasn't sure if I should post this under CSS, HTML, or whatever so I ended up in the general topics. I am relatively new to we development. I had page that the back ground is an image of a color to goes light at the top to a darker shade at the bottom (gradient). So normally to save load time I assume you would just apply the color via CSS so it doesn't have to load and actually image. Is it possible to use some sort of HTML, CSS, etc to apply a gradient to the solid color? Or do i just have to load the image. I hope this makes sense. I appreciate the help. Thanks

  • Like 3
Link to comment
Share on other sites

CSS3 allows for gradients, however, it might not be well supported among all browsers because the standard is still really new. For full compatibility across all browsers, use an image. If the image is 1px wide you can just repeat it horizontally and it doesn't take long to load such a small file.

Link to comment
Share on other sites

There is an excellent gradient generator here which will generate all the code you'll need. It even generates the IE-specific filter code and both syntaxes for Chrome. This will cover pretty much every browser commonly used, including IE 6, 7, and 8. Other browser vendors, like FireFox and Webkit (Safari and Chrome), have supported gradients since fairly early on so they shouldn't be much of an issue. The generator also generates a flat color fallback for browsers that don't support gradients. However, if you absolutely must have the gradient in every browser, you'll have to use an image, like Ingolme mentioned.

Link to comment
Share on other sites

Amazing. I really appreciate the feedback! Thank you for the gradient generator, that will be really useful! Just a quick question. If I were to us an image that is 1px wide and repeat, I wouldn't be able to get the gradient effect, right? that may be an obvious question, but I just wanted to make sure I understand.

Link to comment
Share on other sites

A gradient image would be 1 pixel wide, but it's much taller. It could be 100 or 200 pixels tall. If you repeat that image horizontally it would cover all the horizontal space of the element and the element would have a gradient in the background.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...