Esempio di utilizzo di mask-type

In questo esempio, tre elementi mostrano la differenza tra una maschera applicata come alpha e come luminance.

📌 Questo esempio mostra tre versioni della stessa immagine con diverse maschere applicate:
– No-mask: nessuna maschera applicata, l'immagine è completamente visibile.
– Luminance: usa una maschera radiale da bianco (al centro) a nero (ai bordi).
– Alpha: usa una maschera lineare da nero (in alto) a trasparente (in basso).

Con mask-mode: luminance, la visibilità è determinata dalla luminosità: il bianco mostra l’immagine, il nero la nasconde, il grigio la rende semitrasparente.
Con mask-mode: alpha, la trasparenza dipende dal canale alfa (trasparenza effettiva): il nero è visibile, il trasparente è nascosto.

Noterai che il box "Luminance" ha bordi sfumati visibili, mentre "Alpha" scompare gradualmente verso il basso.

CSS e HTML per l'elemento con mask-type:

  
  <style>
  .maschera {
    width: 300px;
    height: 300px;
    background: url('https://picsum.photos/id/1015/300/300') center/cover no-repeat;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    color: white;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
    line-height: 1.2;
  }
	
  .luminance {
    mask-image: radial-gradient(circle, white, black);
    mask-mode: luminance;
    -webkit-mask-image: radial-gradient(circle, white, black);
    -webkit-mask-mode: luminance;
  }
  
  .alpha {
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-mode: alpha;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-mode: alpha;
  }
  </style>

  <div>
    <div class="maschera no-mask">no-mask</div>
    <div class="maschera luminance">luminance</div>
    <div class="maschera alpha">alpha</div>
  </div>