Cross Browser Gradient

[mevaser]

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

[mdrd88]

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

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

[mevaser]

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))
);
}

}


[ylc66]

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.

[TheDoc]

.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 */

}

[Author]

Posts