Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

CSS3 Gradient Support #34

Closed
ghost opened this Issue Jun 2, 2011 · 3 comments

Comments

Projects
None yet
1 participant
@ghost

ghost commented Jun 2, 2011

It's possible to achieve vast CSS3 gradient support using http://www.colorzilla.com/gradient-editor/
For example:


    background: url(/images/jquery-ui-1.8.7.aristo/bg_fallback.png) 0 0 repeat-x;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(237,237,237)),
        color-stop(0, rgb(196,196,196))
    );
    background: -moz-linear-gradient(
        center top,
        rgb(237,237,237),
        rgb(196,196,196)
    );

Could become:


    background: #ededed url(/images/jquery-ui-1.8.7.aristo/bg_fallback.png) 0 0 repeat-x; /* Old browsers */
    background: -moz-linear-gradient(top, #ededed 0%, #c4c4c4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ededed 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ededed 0%,#c4c4c4 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ededed 0%,#c4c4c4 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ededed 0%,#c4c4c4 100%); /* W3C */ /

If we took this move, you could ditch the fall-back image, though I left it in this example.

Owner

taitems commented Sep 14, 2011

I think this is a go-er, but I'm reluctant to implement the legacy IE gradient stuff. Not sure if you're aware but IE (up to version 8) can only handle 1 filter argument on an element at a time. Eg: If you have a PNG background (alphaImageLoader) and an opacity setting (alpha) then it will turn black and go quite heinous.

Also not entirely sure about performance if you have lots of filtered elements on screen at once, but that's just an unfounded hunch. I think all vendor prefixes (IE10+) and an image fallback is fine.

@ghost

ghost commented Sep 15, 2011

I think I agree with vendor prefixes and no filter, I was just including it as a possibility.

Owner

taitems commented Sep 19, 2011

Fixed locally pending commit.

@taitems taitems closed this Sep 19, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment