The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
218 Chapter 17 Each string of identifiers represents a grid row, so to add a new row, you just add a new string. If you use the ...
Grid Layout 219 To use the property with named grid areas, you add the identifiers after the slash, as in this example: E { grid ...
220 Chapter 17 F { grid-column: 2 / 4; grid-row: 1 / span 2; } Figure 17-9: An implicit grid created by the item it contains (li ...
Grid Layout 221 Combining Explicit and Implicit Grids When you create explicit grids, you may find that the number of available ...
222 Chapter 17 Fortunately, a shorthand property is available for this list of rules. The shorthand is called grid—however, you ...
Grid Layout 223 You can see the result in the example on the left of Figure 17-11: item-one is stacked above item-two. But if yo ...
224 Chapter 17 You create tracks with the -ms-grid-columns and -ms-grid-rows properties, which are analogous to grid-template-co ...
18 Blend Modes, Filter eFFects, and Masking The majority of today’s browsers— desktop and mobile—support the Scalable Vector Gra ...
226 Chapter 18 As browsers implemented SVG graphics effects, it became somewhat of a no-brainer to also give other web technolog ...
Blend Modes, Filter Effects, and Masking 227 The default value of background-blend-mode is normal, which leaves the background l ...
228 Chapter 18 Figure 18-2 shows examples of blending two images. Each image has different blend mode keywords applied. From lef ...
Blend Modes, Filter Effects, and Masking 229 Figure 18-3: Applying multiple blend modes in different combinations mix-blend-mode ...
230 Chapter 18 isolation When using mix-blend-mode, be aware that it will blend with every visual element drawn behind it on the ...
Blend Modes, Filter Effects, and Masking 231 You can see the difference in the example on the right of Figure 18-5. The div is i ...
232 Chapter 18 brightness() and contrast() The brightness() function changes the brightness of an element, whereas the contrast( ...
Blend Modes, Filter Effects, and Masking 233 The saturate() function also accepts a percentage as an argument, but it works diff ...
234 Chapter 18 right, however, has the box-shadow property applied. Because the box-shadow property doesn’t care about alpha tra ...
Blend Modes, Filter Effects, and Masking 235 Filters in SVG Recall that CSS filter effects are simply shorthand for SVG filter p ...
236 Chapter 18 The shape can be one of four basic types, each of which is represented by a function: circle(), ellipse(), inset( ...
Blend Modes, Filter Effects, and Masking 237 (see Chapter 9). So a single value will set the offset distance equally on all side ...
«
7
8
9
10
11
12
13
14
15
16
»
Free download pdf