Course Outline (Part 27)

Welcome to Part 27 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Filters, Blend Modes & Background Blends.

CSS offers graphic design capabilities directly in browser stylesheets. Properties like filter allow you to apply blur, contrast adjustments, and color shifts to elements, while mix-blend-mode and background-blend-mode determine how elements and backgrounds overlap and blend mathematically (resembling layer options in Photoshop).

Chapter 150: Image Manipulation with Filters

The filter property applies visual effects to elements (typically images). You can chain multiple filters together.

◆ Common Filter Functions

  • blur(px): Blurs pixels by the specified radius (e.g. blur(4px)).
  • brightness(%): Scales brightness levels (e.g. brightness(50%) darkens image).
  • contrast(%): Adjusts lighting differences.
  • grayscale(%): Desaturates colors into black and white.
  • hue-rotate(deg): Shifts colors around a 360-degree color wheel.
  • invert(%): Inverts image colors (useful for quick dark mode filters).
  • sepia(%): Adds a vintage warm brown tone.
.vintage-photo {
  filter: sepia(60%) contrast(120%) brightness(95%);
}

◆ Drop-Shadow Filter vs. Box-Shadow

Normally, box-shadow draws a rectangle shadow around the element’s bounding box. For irregular shapes (like PNG logos or custom clipped paths), use the drop-shadow filter instead, which wraps shadows precisely around the element’s alpha opacity edges:

.logo-png {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* Outlines logo shapes, not boundaries */
}

Chapter 151: Mix Blend Modes (mix-blend-mode)

The mix-blend-mode property defines how an element’s content blends with the elements underneath it (its background container).

.heading-overlay {
  mix-blend-mode: difference; /* Inverts text colors relative to background backgrounds */
}

Common blend values:

  • multiply: Multiplies pixel colors, darkening the stack. (White layers disappear).
  • screen: Multiplies the inverse colors, lightening the stack. (Black layers disappear).
  • overlay: Combines multiply and screen, preserving highlights and shadow layers.

Chapter 152: Background Blend Modes (background-blend-mode)

Defines how an element’s multiple backgrounds (images and gradients) blend together inside a single element:

.card-bg-blend {
  background-image: linear-gradient(to bottom, orange, red),
                    url('/images/card-texture.jpg');
  background-blend-mode: multiply; /* Blends red-orange gradient with textures */
}

Chapter 153: Filters & Blends Practice & Self-Check

❖ Practice Exercises

  1. Exercise 1: Frosted Header: Build a blurred background header overlay. 
    .glass-banner {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px); /* Blurs elements underneath the banner */
}

❖ Self-Check Questions

  1. What filter function applies blur effects to elements?
    • Answer: blur().
  2. Why is filter: drop-shadow() preferred for transparent PNG logos?
    • Answer: It outlines the actual shape of the logo instead of drawing a rectangular box-shadow outline.
  3. What property controls how elements blend with their parent backgrounds?
    • Answer: mix-blend-mode.
  4. What blend mode value makes pure white pixels transparent, darkening the overlap?
    • Answer: multiply.
  5. What property blends multiple backgrounds within a single element container?
    • Answer: background-blend-mode.
  6. Can you chain multiple filter functions together?
    • Answer: Yes, separate them with spaces (e.g. filter: blur(2px) grayscale(50%)).
  7. What filter function changes color values around a degree wheel?
    • Answer: hue-rotate().
  8. What is the difference between filter: opacity() and opacity property?
    • Answer: filter: opacity() is sometimes hardware-accelerated under specific compositor steps, but behaves similarly.
  9. What does backdrop-filter do compared to standard filter?
    • Answer: backdrop-filter applies effects (like blur) to the elements underneath the targeted element, rather than the element itself.
  10. What is the default value of mix-blend-mode?
    • Answer: normal.

Discussion

Loading comments...