HTML5 & CSS3 for the Real World by Alexis Goldstein & Louis Lazaris & Estelle Weyl

Author:Alexis Goldstein & Louis Lazaris & Estelle Weyl [Goldstein, Alexis]
Language: eng
Format: epub
ISBN: 9780980846904
Publisher: SitePoint Pty. Ltd.
Published: 2011-04-29T04:00:00+00:00

The Old WebKit Syntax

To create the example in Figure 7.10 using the old-style WebKit syntax currently supported in Safari and Chrome, you’d need to write it as follows:

background-image: -webkit-gradient(radial, 30 30, 0, 30 30, 100%, ↵from(#FFFFFF), to(#FFFFFF), color-stop(.3,#000000))

The same -webkit-gradient property used earlier for linear gradients is used for radial gradients; the difference is that we pass radial as the first parameter. The next four parameters are the respective position and radius of two circles, with the gradient proceeding from the inner circle to the outer circle. Just to make it more confusing, these values are defined in pixels, but without the px unit. You can also specify the values as percentages, in which case you do need to include the % symbol. You should be starting to see why the W3C opted for a version of the Mozilla syntax rather than this one.

Furthermore, your inner circle doesn’t need to be centered in your outer circle. If the first point is equal to the second point, the gradient will be symmetrical like the one in Figure 7.10. If they differ, however, your inner circle will be off-center, so the gradient will be asymmetrical. If your inner circle’s center is outside the boundary of your outer circle, instead of having a circle off-center inside another circle, you’ll have a very odd triangle gradient effect, as Figure 7.11 illustrates.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.