Fancy Image Decorations: Masks and Advanced Hover Effects

This is Part 2 of a three-part series on crafting visually stunning image decorations using only the <img alt="Fancy Image Decorations: Masks and Advanced Hover Effects" > element and CSS. Building on Part 1, we'll continue exploring gradients and introduce the mask property to achieve more intricate effects and hover animations.

Fancy Image Decorations Series Overview

• Single Element Magic
• Masks and Advanced Hover Effects (You are here!)
• Outlines and Complex Animations

Let's dive into our first example:

The Postage Stamp Effect

Surprisingly, this effect requires only two gradients and a filter:

img {
  --r: 10px; /* Circle radius */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Padding creates space for the background gradients. The combination of radial-gradient() and linear-gradient() cleverly cuts out circular sections around the image. The round value ensures perfect alignment regardless of image dimensions.

The Rounded Frame

This example uses a radial-gradient() to create circles around the image, employing the round value for consistent sizing. The transparent gap between frame and image is achieved using the mask property:

img {
  --s: 20px; /* Frame size */
  --g: 10px; /* Gap size */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

The mask combines conic-gradient() and linear-gradient() to reveal the image and the frame, masking the gap between them.

The Inner Transparent Border

This technique creates a transparent border inside the image using a linear-gradient() for the inner section and a conic-gradient() for the outer, with spacing creating the transparent effect.

img {
  --b: 5px;  /* Border thickness */
  --d: 20px; /* Distance from edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Multiple gradient syntaxes can achieve similar results; the best approach prioritizes conciseness and maintainability.

A hover effect is added using a font-size trick to animate the otherwise non-animatable mask properties.

The Frame Reveal Animation

This section builds on previous examples, moving gradients from the background property to the mask property and adding a repeating-linear-gradient() for the border. A hover effect is achieved by adjusting mask-position or mask-size.

Further examples demonstrate more complex multi-step animations, challenging the reader to analyze and understand the gradient and mask interactions.

Conclusion

This part of the series showcases the power of gradients and the mask property for creating sophisticated image decorations and animations using a single <img alt="Fancy Image Decorations: Masks and Advanced Hover Effects" > element. Part 3 will delve into outlines and more complex animations. A bonus demo with a broken image effect is provided.

Fancy Image Decorations Series Overview

• Single Element Magic
• Masks and Advanced Hover Effects (You are here!)
• Outlines and Complex Animations

The above is the detailed content of Fancy Image Decorations: Masks and Advanced Hover Effects. For more information, please follow other related articles on the PHP Chinese website!