Forums

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.

http://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 */
}

treehouse : what would you like to learn today?

Forums

Cross Browser Gradient