Filters, Blending, Clipping, and Masking

Chapter 20

Figures

  1. Basic filter effects
  2. Drop shadows and alpha channels
  3. Color filter effects
  4. Brightness, contrast, and saturation filter effects
  5. SVG filter effects
  6. Simple alpha channel blending
  7. Darken, lighten, difference, and exclusion blending
  8. Multiply, screen, and overlay blending
  9. Hard- and soft-light blending
  10. Color dodge and burn blending
  11. Hue, saturation, luminosity, and color blending
  12. Three backgrounds blended together
  13. Blending with color versus transparency
  14. Blending elements with their backdrops
  15. Blending in isolation, and not
  16. Examples of size containment
  17. Using an image to define a float shape
  18. An image float shape on the right
  19. Using image opacity to define the float shape at the 50% opacity level
  20. The basic shape boxes
  21. Insets from two basic shape boxes
  22. Rounding the corners of a shape box
  23. A circular float shape
  24. A rather small circular float shape for an even smaller image
  25. The circular float shape that results from a rectangle
  26. A clipped float shape
  27. Various circular float shapes
  28. Defining float shapes with ellipses
  29. Elliptical float shapes and percentages
  30. A polygonal float shape
  31. How a float shape is clipped when it exceeds the shape box
  32. The two polygonal fills
  33. The Chrome Shapes Editor in action
  34. Adding margins to float shapes
  35. Making sure the shape margins don’t get clipped
  36. Clipped and unclipped paragraphs
  37. Various clip shapes
  38. Various clipping boxes
  39. Fitting an elliptical clip shape to various boxes
  40. An image clipped with a scaling SVG clip path
  41. The two shape-filling options
  42. A simple image mask
  43. A variety of image masks
  44. List items, masked and unmasked
  45. Alpha and luminance mask modes
  46. Sizing masks
  47. Repeating masks
  48. Positioning masks
  49. Changing the origin box
  50. Clipping the mask
  51. Compositing operations
  52. Compositing masks
  53. Two masks
  54. Some mask border slicing patterns
  55. Applying the mask fill
  56. Various kinds of mask border repeating
  57. Four kinds of object fitting
  58. Various scale-down scenarios
  59. A variety of object positions
  60. Positioning a covered object