background-gradient

background-gradient, probably more than anything, brings the feeling of depth to a page. And to date, images were how this was done, across the board. Often very, very large images, because they had to repeat, repeatedly… I will continue my thread of “is it necessary?”, but probably really only for either very subtle, or very small, gradients. Otherwise, you’re really probably stuck with these.

So, if you do need background gradients, here are ways to do it.

The Options

  • Internet Explorer Filters

    Pros:

    • Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
    • IE8 offers vendor prefix (-ms).
    • IE6/7 use non-proprietary filter, so can easily put that into IE-only stylesheet.
    • For better or worse, IE6, 7, and 8 are pretty stable as they are, and so it is pretty easy to know which does, and doesn’t, do what.
    • Easy to target specific browser versions if using HTML5 Boilerplate <head> conditional comments.

    Cons:

    • Gradient filter goes from “A” to “B”, no stops allowed.
    • Fairly limited set of filters, and most look pretty crappy.
    • filter is invalid, so stylesheets will not validate, if you care about that.
    • At least one more line of CSS for each feature…
  • CSS3 PIE

    Pros:

    • Able to use color-stops in gradients!
    • Eliminates need for IE filters.
    • Translates vendor-prefix gradients, including stops.
    • Comes as a single package, which also adds border-radius and drop-shadows to IE (only).
    • Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).

    Cons:

    • Comes as a single package, so if you don’t need those other features on a page, at 27.6kb, it’s a little heavy…
    • Because it requires a non-standard behavior for implementation, the stylesheet used to add this will not validate (if that matters to you).
    • Implementation requires JS; without JS, nothing happens.
    • Not all servers permit HTC files.

The Bottom-Line

As long as you only need a 2-color gradient, I would say pure CSS (meaning IE filters) is always the way to go; if you need color-stops within your gradient, it’s going to have to be CSS3 PIE. Both will break validation, so the only real advantage CSS3 PIE has in this case is being able to not use IE filters, which is really not that big of a deal.

4 Responses to background-gradient

  1. aarontgrogg says:

    And for anyone needing to create CSS3 gradient code, the nightmare is (partially) over.

    ColorZilla now offers an online gradient creator that nearly exactly mimics PhotoShop.

    Open your mock in PS right beside this page and it is nearly one-for-one to create the -moz, -webkit, and IE-filter in one copy-and-paste motion!

    Seriously sweet…

    Atg

  2. aarontgrogg says:

    The online ColorZilla (above) has expanded to now include the new WebKit linear-gradient declaration (but still retaining the old for older WebKit browsers), Opera and IE10 declarations. It also now offers the ability to upload an existing gradient image and get back all the delicious, nutritious, CSS gradient info a growing body deserves! So, go get your CSS gradient on!!

    Now all we need is a PS plug-in that offers-up CSS declarations straight from the PSD… Anybody out there?

    Atg

Leave a Reply

Your email address will not be published. Required fields are marked *