Welcome to Part 28 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Clip-path, Masking & Visual Effects.

While basic box properties crop elements into rectangular shapes, modern CSS allows you to define complex boundary geometries using clip-path and apply transparency maps using CSS Masking. By combining vector shapes and alpha masking images, you can create organic card profiles, fade-out scrolling lists, and interactive path overlays.

---

Chapter 154: Advanced Clipping with clip-path

The clip-path property defines a visual region. Only the portion of the element inside this region remains visible.

» Custom Polygon Coordinates

To draw complex shapes, use polygon(x1 y1, x2 y2, ...) specifying coordinate points relative to the element box (from 0% to 100%):

/* Creates a chevron arrow shape pointing right */
.chevron-block {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);
}

» SVG Clip Paths

For ultra-complex vectors, link an inline SVG <clipPath> inside your CSS using the url() keyword:

.card-vector-clipped {
  clip-path: url(#my-svg-clip-id);
}

---

Chapter 155: CSS Masking (mask-image)

While clip-path uses vector paths (sharp cuts), CSS Masking uses an image’s alpha channel (transparency coordinates) to fade elements out.

• Black layers inside the mask render the element fully visible.
• Transparent layers inside the mask hide the element.
• Grays/Semi-transparencies blend the element visibility smoothly.

.fade-out-content {
  /* Linear gradient mask that fades the content to transparent at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-size: cover;
  mask-size: cover;
}

› Mask Properties

• mask-size: Controls mask scaling (cover, contain).
• mask-repeat: Prevents or repeats mask tiles.
• mask-position: Positions the mask relative to element borders.

---

Chapter 156: Masking Practice & Self-Check

» Practice Exercises

1. Exercise 1: Fading Scroll List: Create a list box that fades out at the bottom edges.

   .fading-feed {
     height: 300px;
     overflow-y: auto;
     mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
   }

› Self-Check Questions

1. What is the main difference between clip-path and masking?
   • Answer: clip-path makes sharp vector cuts; masking uses image transparency levels to fade elements out.
2. What polygon coordinates represent a top-left corner?
   • Answer: 0% 0% (or 0 0).
3. How do you link a complex SVG vector path as a clip-path?
   • Answer: Use the url(#clip-path-id) syntax.
4. Under CSS masking, what does a black pixel inside the mask image do?
   • Answer: It renders the element fully visible at those coordinates.
5. What property controls mask repeat patterns?
   • Answer: mask-repeat (or -webkit-mask-repeat).
6. Are vendor prefixes (like -webkit-mask) still required for wide browser compatibility?
   • Answer: Yes, many browsers require WebKit prefixes for masking properties.
7. What polygon coordinates draw a right-pointing triangle?
   • Answer: polygon(0 0, 100% 50%, 0 100%).
8. Can you use hover state transitions on clip-path polygons?
   • Answer: Yes, but only if the polygon has the exact same number of coordinate points in both states.
9. What is the default value of mask-size?
   • Answer: auto.
10. Does masked text remain copyable by users?
    • Answer: Yes, masking only affects the visual display, not DOM availability or text selection.