The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
118 Chapter 10 HSLA If you’ve decided that HSL is the color method for you, then you’ll also be able to utilize the Alpha channe ...
Color and Opacity 119 Because the first h2 has a color value of black, the color of the border- bottom property of the abbr elem ...
...
11 Gradients In this chapter, the last of the quartet about decorative properties, I cover CSS gradients. A gradient in this con ...
122 Chapter 11 WArninG Graphical effects like gradients can be quite computationally taxing and will slow the rendering and perf ...
Gradients 123 To change the same gradient to run diagonally from the top-left corner to the bottom-right one, you use two direct ...
124 Chapter 11 The color-stops are processed in the order listed, so this example creates a gradient that goes from black to whi ...
Gradients 125 along the gradient line where a color-stop is positioned. For example, this code positions the white color-stop at ...
126 Chapter 11 Linear Gradients Rather than create only a single gradient from one side of an element to another, you can repeat ...
Gradients 127 • The first example () uses three color-stops and sets the direction so the gradient goes from right to left. ...
128 Chapter 11 The result shown in Figure 11-9 is more circular than Figure 11-8, although lacking a clearly defined edge. (You’ ...
Gradients 129 Figure 11-10: Comparing extent keywords for radial gradients All four gradients produce the same circular shape. I ...
130 Chapter 11 In example , the gradient begins at the left side of the box and ends at the right side, with color-stops at 25 ...
Gradients 131 The example at radiates from the top-right corner and passes through three color-stops over 15 percent of the bo ...
132 Chapter 11 MulTiPle ColuMnS Because gradients are applied with the background-image property, you can use CSS3’s multiple ba ...
Gradients 133 Also, as I write this, plans are afoot to extend the possibilities with a new gradient type, conic, which offers t ...
...
12 2D Tr ansformaTions Because of the way HTML works, with each element composed of rectangular blocks and right-angled corners, ...
136 Chapter 12 work on the module continues today. The long and the short of this story is that, although the CSS Transforms mod ...
2D Transformations 137 You can see how this example displays in Figure 12-1. Note that I posi- tioned another h2 element with a ...
«
3
4
5
6
7
8
9
10
11
12
»
Free download pdf