Adding Presentational Styles - CSS3 Foundations - page 86

left is 270deg . You can also combine these keywords to create a gradient line that goes from corner to corner;
to bottom right goes from the top left to the bottom right, for example. You'll be pleased to know that We-
bKit, does understand gradient lines when expressed as degrees in the same way that Firefox does, so to make things
more consistent, you could rely on degrees instead of keywords.
Color Stops
A color stop is composed of a color value (using any of the color property values described in Chapter 4), followed
by an optional stop position, which can be defined by a value type such as percentages or pixels. You can specify as
many color stops as you need, separating each with a comma to create a multicolored gradient. If you specify a color
value but not an optional stop position, the browser assumes the stop position should be placed exactly in between
the other stop positions. So, linear-gradient(#fff, #000) creates a gradient going from top to bottom
with the top being white, fading into black as it reaches the bottom.
Figure 5-16 shows how linear-gradient(#fff, #ff0000, #000) creates a gradient going from top to
bottom with the top being white, the center being red, and the bottom being black.
Figure 5-16 The linear gradient applied to the showcase button, starting with white, changing into red at the center, and
then changing into black at the bottom.
When you are adding a gradient to a web page, sometimes it's better to look at a visual representation of the gradi-
ent you're trying to create, to get it exactly as you want it. Many free tools are available that make working with
gradients easier. My personal recommendation is ColorZilla's gradient editor, which you can find at
www.colorzilla.com/gradient-editor/ .
background-clip
Initial value: border-box | Inherited: No | Applies to: All | CSS3
Browser support: IE 9+, Firefox 4+, Chrome 1+, Opera 10.5+, Safari 3+
background-clip determines the “painting area” of an element, the area of the element to which a background
should be applied. By default, the background-clip value is border-box , which makes the painting area start
from the edges of an element, where the border starts.
Looking at Figure 5-17, you can see the background image of the newsletter box reaches the edges. Earlier in the
“Add More Border and Box Shadow Styles” code challenge, you gave this element a black border with a transparen-
cy of 0.1 , but note that the border actually looks like a dark blue color. The reason is that the background image
appears behind the border and shows through the partially transparent border.