Forme complesse

Panoramica

Per ritagliare elementi in forme complesse e in formato libero, come pennellate o texture organiche, utilizza la proprietà CSS Masking (mask-image). Mentre clip-path è eccellente per forme geometriche o percorsi vettoriali, mask-image ti consente di utilizzare immagini (come PNG con trasparenza) o SVG per definire l'area visibile di un elemento. Questo approccio è più espressivo perché supporta la semitrasparenza, consentendo bordi morbidi e texture complesse che sono difficili o impossibili da ottenere con clip-path.

Implementazione

Per implementare forme complesse utilizzando le maschere CSS:

Utilizzo della trasparenza di un'immagine

Puoi utilizzare la trasparenza di un'immagine come maschera, con le parti opache visibili e quelle trasparenti nascoste. Può essere un'immagine PNG, SVG o un'altra immagine con trasparenza oppure un'immagine creata dall'AI, ad esempio un gradiente CSS.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Utilizzo di un elemento SVG in HTML

Puoi anche fare riferimento a un elemento <mask> definito in un SVG incorporato nell'HTML della pagina. Utilizza maskContentUnits="objectBoundingBox" per fare in modo che la maschera si adatti automaticamente alle dimensioni dell'elemento. In questo modo, il browser interpreta tutte le coordinate all'interno della maschera come frazioni da 0 a 1 (ad esempio 0.5 per il 50%) anziché come pixel assoluti.

Maschera di luminanza e maschera alfa: per impostazione predefinita, le maschere SVG utilizzano la luminanza (luminosità) per determinare l'opacità, dove il bianco rivela, il nero nasconde e il grigio crea una semitrasparenza. Se invece vuoi che la maschera utilizzi il canale alfa (trasparenza) delle tue forme SVG, puoi specificare mask-type: alpha; nel CSS o mask-type="alpha" direttamente nell'elemento SVG <mask>.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

Strategie di riserva

Se un browser non supporta mask-image o la versione con prefisso:

• L'elemento non verrà ritagliato e verrà visualizzato come un normale rettangolo.
• Assicurati che i contenuti siano ancora leggibili e che il layout non si interrompa senza la maschera (potenziamento progressivo).
• Facoltativamente, utilizza il rilevamento delle funzionalità per fornire una forma di riserva più semplice con clip-path.

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}