Forums
View unanswered posts | View active topics It is currently Wed Apr 16, 2014 10:17 am



Reply to topic  [ 6 posts ] 
 PIE working on everything EXCEPT gradients. 
Author Message

Joined: Tue Jan 29, 2013 3:16 pm
Posts: 3
Post PIE working on everything EXCEPT gradients.
Using PIE 1.0.0 and have the PIE.php file added to my root directory. Here is the exact path :
behavior: url(http://www.halsttenwebsitedesign.com/te ... te/PIE.php), I also tried this path

behavior: url(http://www.halsttenwebsitedesign.com/PIE.php). I also added both the PIE.htc and PIE.php files into both areas.

What is NOT happening is the gradients are not showing. The shadows and rounded corners are great!

You can see it working here on the navigation at http://www.halsttenwebsitedesign.com/te ... /index.php.

As you can see, the rounded corners are showing and the shadow but there is supposed to be a transition and gradient feature on the nav buttons that is not functioning.

Any suggestions are most welcome and thank you for such great work!
Dane


Tue Jan 29, 2013 3:30 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: PIE working on everything EXCEPT gradients.
You have to specify your gradient in a -pie-background property. See http://css3pie.com/documentation/suppor ... #gradients for explanation and examples.

I also recomment you include the standard non-prefixed version as well, since current browsers are starting to drop the prefix (e.g. IE10)


Tue Jan 29, 2013 8:55 pm
Profile

Joined: Tue Jan 29, 2013 3:16 pm
Posts: 3
Post Re: PIE working on everything EXCEPT gradients.
Thank you Jason,

I did that and it still did not work for me in IE9. Here's what I did: Oh and I am brand new at this so please excuse the newbie silliness.

ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background : #801b3d;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(187,29,74,62)), to(rgba(47,12,24,19)) );
background: -webkit-radial-gradient(center 80px 45deg, circle cover, rgba(187,29,74,62) 0%, rgba(47,12,24,19) 100%);
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(187,29,74,62) 0%, rgba(47,12,24,19) 100%);
background: -ms-radial-gradient(center 80px 45deg, circle cover, rgba(187,29,74,62) 0%, rgba(47,12,24,19) 100%);
background: -o-radial-gradient(center 80px 45deg, circle cover, rgba(187,29,74,62) 0%, rgba(47,12,24,19) 100%);
-pie-background: radial-gradient(center 80px 45deg, circle cover, rgba(187,29,74,62) 0%, rgba(47,12,24,19) 100%); /*ie 6-9 via PIE*/
behavior: url(http://www.halsttenwebsitedesign.com/te ... te/PIE.php);
}


I did not write this but copied and pasted it. I am reading my way through a css3 book to be able to write and understand what the heck I am doing. If this is off base, I can live with it until I learn more about it and can write my own stuff. I have seen a few versions of how to write this, so not sure which way is right.

I appreciate your help Jason.
Dane


Wed Jan 30, 2013 8:04 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: PIE working on everything EXCEPT gradients.
PIE only supports linear gradients, not radial gradients. See the docs for details on what is supported. http://css3pie.com/documentation/suppor ... #gradients


Wed Jan 30, 2013 10:22 am
Profile

Joined: Tue Jan 29, 2013 3:16 pm
Posts: 3
Post Re: PIE working on everything EXCEPT gradients.
Thanks Jason,

Is 2.0 going to be the one that will eventually support radial gradients? Again Great work!
Dane


Wed Jan 30, 2013 3:19 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: PIE working on everything EXCEPT gradients.
I would like to add radial gradient support in 2.0, but if that happens it will most likely only be for IE9 due to technical limitations of IE8 and below.


Thu Jan 31, 2013 4:05 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.