Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

5.7. Radial Gradients

Radial gradients are similar to linear gradients, but the color changes gradually from an inner point (the start) to an outer circle (the end) (Fig. 5.6). In this example, the radial-gradient property (lines 16–18) has three values. The first is the position of the start of the radial gradient—in this case, the center of the rectangle. Other possible values for the position include top, bottom, left and right. The second value is the start color (yellow), and the third is the end color (red). The resulting effect is a box with a yellow center that gradually changes to red in a circle around the starting position. In this case, notice that other than the vendor prefixes, the syntax of the gradient is identical for WebKit browsers, Mozilla and the standard CSS3 radial-gradient.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint