Radiant radial gradients!
A lot of designs use gradients these days and most of the times linear gradients are used. Linear gradients are gradients running from one point to another in a straight line. The CSS3 spec however defines radial (going from a centerpoint outward) too. Below are some effects you can achieve with them.
How does it work?
The example on the left is as simple as it's cunning: it's a
radial gradient that's transparent in the middle and gets a semi-transparent
color towards the edges of the element. We move the "spotlight" around
of the gradient on the
that creates an element with a radial gradient that gets scaled through a
@key-frames animations are
very cool and we'll probably write more about them later in this series.
Show us the source!
Feel free to look around the different source files we used for this example.