HTML and CSS Reference
In-Depth Information
background-image: -o-radial-gradient(100px 50px, circle closest-side, #C24704, #FFEB79
35%, #00ADA7);
background-image: -webkit-radial-gradient(100px 50px, circle closest-side, #C24704,
#FFEB79 35%, #00ADA7);
background-image: radial-gradient(circle closest-side at 100px 50px, #C24704, #FFEB79
35%, #00ADA7);
The main difference can be summarized as follows: the standard syntax puts the shape, size, and position in
a space-separated list with the position last like this:
circle closest-side at 100px 50px
In the browser-specific versions, the position comes first, and is separated from the shape and size by a
comma like this:
100px 50px, circle closest-side
Creating Repeating Gradients
The functions for repeating gradients, repeating-linear-gradient() and repeating-radial-gradient() , take
the same arguments as their nonrepeating equivalents. However, it's important to position the last color stop
before the ending point. If you don't, it defaults to 100% , preventing the pattern from being repeated.
Creating Diagonal Stripes
A simple, yet effective use of a repeating linear gradient is to create diagonal stripes.
The styles in repeating-linear_1.html add the following gradient:
background-image: repeating-linear-gradient(-45deg, #426A77, #FFF 6px);
This sets the angle of the gradient line to -45°, and creates two color stops. The first one is dark blue. No
position is declared, so it defaults to 0% . The second color stop is white, and it's positioned at 6px along the
gradient line. So, the gradient transitions from dark blue to white in a very short space. The function then repeats
the same pattern infinitely, producing the result shown in Figure 19-19 .
Figure 19-19. The diagonal stripes are created by repeating a linear gradient
To create the same effect in browsers that don't yet support the standard property, you need to change the
angle to the polar-coordinate equivalent like this:
background-image: -moz-repeating-linear-gradient( 135deg , #426A77, #FFF 6px);
background-image: -o-repeating-linear-gradient( 135deg , #426A77, #FFF 6px);
background-image: -webkit-repeating-linear-gradient( 135deg , #426A77, #FFF 6px);
Search WWH ::

Custom Search