Adobe Community: Message List - radial gradient - how to program color change?

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Thu, 13 Dec 2012 05:13:24 GMT

Thanks Marie

The css3 iPhone is neat.

Darrell

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 21:47:39 GMT

I mean the three of you; Joel, Tim and Darrell!

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 21:43:01 GMT

That's cool too! Both of you are full of resource! Thanks .

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 21:41:09 GMT

You can try a customized animate as post #4 here (TimJaramillo).

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 21:11:35 GMT

The step by step demo for the iphone4 is here:

http://cssdeck.com/labs/creating-single-element-iphone-using-css3

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 21:04:20 GMT

Cool! Did you see the iPhone5 made with shadows only in CSS. Pretty cool!

http://cssdeck.com/labs/single-element-iphone5-using-css3/1

better yet: http://tjrus.com/iphone

I did not think about it.

Think out of the box, Marie! (Resdesign real name) Ha!

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 19:35:31 GMT

You could 'fake' it with box shadows.

Example (no images used here): http://www.heathrowe.com/edge/inseteffects/effects3.html

Download sample at the bottom of this page.

hth

Darrell

Re: radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 18:59:46 GMT

nevermind - after some reading, I realize it is not supported yet.

So my solution was to use 2 images with different gradients and then one with opacity from 0% to 100% and the second from 100% to 0%. The effect is OK.

radial gradient - how to program color change?

forums_noreply@adobe.com — Wed, 12 Dec 2012 18:42:28 GMT

I have to make an animation about nuclear fusion in the Sun and I need to change the color of the proton as it becomes a neutron. Since it is changing one gradient to another, how can I do that?

My original gradient is:

var proton = sym.$('proton ');

proton .css({background: '-moz-radial-gradient(center, ellipse cover, #ffffff 0%, #A8A6CE 41%, #7c01fb 100%)'});

The second gradient is:

proton.css({background: '-moz-radial-gradient(center, ellipse cover, #fffcfc 0%, #a677ce 41%, #7f21d1 58%)'});