Grow your CSS skills. Land your dream job.

Cross Browser Gradient

  • # May 7, 2012 at 3:42 pm

    Hello every one, I am working on this website, and they wish to have a horizontal scroler. At the start and the end there should be a working fading trick, but it is not taken. Any ideas why? I spend a couple of hours, but not luck.

    http://creativewebdesign123.com/demo/scroling.html

    # May 7, 2012 at 4:53 pm

    Hello, I not sure if this is what you need but it might help you out.

    http://css-tricks.com/examples/FadeOutBottom/

    # May 8, 2012 at 12:44 pm

    Well the issue got a bit fix in Crome and Google, but not in IE9. I have some SVG working to do the transparencies, but they are not taking! Here is the code that is not listening. (I got the code from some where else.

    .fade-grad-r {
    background: url("scrolling/fade-grad-r-bg.svg");
    background-image: -moz-linear-gradient(
    left,
    rgba(f,f,f,f),
    rgba(0,0,0,1)
    );
    background-image: -webkit-gradient(
    linear,
    left top, right top,
    rgba(f,f,f,f),
    to(rgba(0,0,0,1))
    );
    }

    }

    # May 10, 2012 at 4:18 pm

    hello mevaser !

    Ultimate CSS Gradient Generator is a great tool !

    not sure it will help you but it seems to take care about browsers, and it’s very easy in use ….

    :)

    youn.

    # May 10, 2012 at 4:33 pm
    .gradient {
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
    background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
    background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #444444, #999999);
    }

    IE9 will need to use the Microsoft filters:

    .gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".