Blend Modes, Filter Effects, and Masking | The Book of CSS3, 2nd Edition

Examples

Figure 18-1: Comparing different blend modes applied to a source image.
Figure 18-2: Blending multiple background image layers.
Figure 18-3: Applying multiple blend modes in different combinations.
Figure 18-4: Different blend modes applied to the text element, mixed with the background of its parent.
Figure 18-5: Isolating an element to set a new stacking context.
Figure 18-6: Applying a Gaussian blur filter.
Figure 18-7: Adjusting brightness and contrast with CSS filter effects.
Figure 18-8: Comparing the drop-shadow() filter with the box-shadow property.
Figure 18-9: Function values for the clip-path property: circle() and ellipse().
Figure 18-10: The inset() function without and with border radius values.
Figure 18-11: A triangular clip path made with the polygon() function.
Figure 18-13: A rectangle made with the rectangle() function of -webkit-clip-path.
Figure 18-14: The three steps of image masking.
Figure 18-15: Comparing rendering order of graphical CSS effects.
Figure 18-a: Demonstrating the grayscale(), sepia() and saturate() functions of the filter property.
Figure 18-b: An example of the hue-rotate() function of the filter property.
Figure 18-c: Comparing the differing effects of the order of values on the filter property.
Figure 18-d: Animating shapes made with the clip-path property.

	Chrome	Firefox	Safari	IE
`background-blend-mode`	Yes	Yes	8	No
`mix-blend-mode`	No^*	Yes	8	No
`isolation`	No^*	No	8	No
`filter`	Yes^†	Yes^‡	Yes^†	No
`clip-path`	No^*	No	7^§, 8^†	No
`mask`	Yes^†	No	Yes^†	No