BS-Harou

Just another blog about the best browser - Opera!

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" smile

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.

Convert your videos to WebMYour own speed dial icons!

Comments

Martin KadlecBS-Harou Saturday, March 26, 2011 3:53:03 PM

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.

QuHno Saturday, March 26, 2011 4:52:59 PM

Martin KadlecBS-Harou Saturday, March 26, 2011 5:07:05 PM

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 smile

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

QuHno Sunday, April 17, 2011 4:16:00 PM

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 bigsmile

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

May 2013
M T W T F S S
April 2013June 2013
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31