Jump to content
Sign in to follow this  
bobby_b

Gradient fill using mozilla and safari...works in IE

Recommended Posts

bobby_b

Hi I am using the current CSS code.. Want a gradient fill in the main canvas area... It works for IE but not for Safari, Chrome, Mozilla etc. This code also works correctly for those brousers if applied to fpost or body. Any ideas? Thanks Tony /* Main Canvas Area */ .canvas #page-canvas { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin: 10 auto; border: 4px solid #999999; /* Background gradient */ /* For WebKit */ background: -webkit-gradient( linear, left top, left bottom, from(rgba(74,136,180,1)), to(rgba(250,250,250,1))); /* For Mozilla */ background: -moz-linear-gradient( top, rgba(74,136,180,1), rgba(250,250,250,1)); /* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( gradientyype=1, startColorstr='#fffafafa', endColorstr='#ffffffff'); /* For gt IE8 */ -moz-filter: progid:DXImageTransform.Microsoft.gradient( gradientyype=1, startColorstr='#fffafafa', endColorstr='#ffffffff'); }

Share this post


Link to post
Share on other sites
catrina

If you'd like a gradient fill that can work in all browsers without worrying about compatibility, I think you can use an image of a gradient fill set to cover the canvas area. Does that sound good?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bobby_b

what code would I use...The image could get large, and would have a potential site performance issues...

Share this post


Link to post
Share on other sites
kastelic

Here's what I tried and got it to work in webkit:

	.canvas #page-canvas, body #page{
	background:transparent;
	
	}
	body #page-canvas, .canvas, #page{
	background:
	-webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(74,136,180,1)),
	to(rgba(250,250,250,1)));
	}
	
	

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×