HTML5 and CSS3 Advent 2011

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.

Extra extra! The HTML5 and CSS3 Adventscalendar 2011

Move your mouse-cursor around and see what it says!
Click somewhere and see the bubbles pop!

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 by a little bit of javascript that recalculates the position of the center of the gradient on the mousemove event.

The bubbles example involves a javascript click handler that creates an element with a radial gradient that gets scaled through a @key-frames animation. @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.

Check out our all new HTML & CSS Advent 2012