Martin Kadlec blogging

Gradient transitions in Opera 11.10 (CSS only)

CSS3 gradients behave very similar as background images. That means you can't use CSS3 Transitions directly to create some "gradient animation". However, you can use CSS3 gradients together with background-color property. This is very important because when you apply CSS3 Transition on background-color and make some part of gradient transparent (so the background color (and the change of bg color) is visible) you get the "gradient animation" :)

Here is an example:
http://files.myopera.com/BS-Harou/files/gradient%20transitions.html

Unfortunately, this technique is very limited. You can't change the rotation or position of the gradient. So if you need to create some more complex transition you have to use javascript.

Comments
Please login to post comments.
Avatar
17.04.2011 18:04

Originally posted by BS-Harou:

I think I would hate color picker that would change when the mouse gets over


That depends on the picker - OK, it is not mouseover and not with transitions but with gradients :D
Avatar
26.03.2011 18:03

Originally posted by QuHno:

... that could look cool with multiple gradients combined in different angles



Well, we will have to wait for Opera to implement that :)

btw I think I would hate color picker that would change when the mouse gets over :D
Avatar
26.03.2011 17:03
... that could look cool with multiple gradients combined in different angles :D

Avatar
26.03.2011 16:03
I just CSS Gradeint transitions in specification!
http://www.w3.org/TR/css3-images/#interpolating-gradients

There are some restrictions like you can't create gradient from linear to radial and the number of color stops must be the same.