Sintassi

Significato dei valori principali:

• number: un valore numerico compreso tra 0 e 1 che indica la percentuale minima dell'immagine che deve essere visibile per essere applicato il ritaglio della forma. Ad esempio, un valore di 0.5 significa che almeno il 50% dell'immagine deve essere visibile per attivare il ritaglio in base alla forma definita da clip-path.

Considerazioni:
La proprietà shape-image-threshold è molto utile quando desideri ottenere effetti di ritaglio dinamico su immagini, soprattutto quando combini clip-path e altre tecniche di manipolazione dell'immagine. Regolando il valore numerico, puoi determinare quanta parte dell'immagine deve essere visibile prima che la forma venga applicata. Questo permette di ottenere effetti visivi sofisticati senza bisogno di complesse elaborazioni lato server.

Nota: la proprietà shape-image-threshold ha effetto solo se l’elemento ha float diverso da none.

Esempio proprietà: shape-image-threshold

Codice Esempio: shape-image-threshold

CODE: CSS

1. .shape-image-threshold-example {

2.   float: left;

3.   display: block;

4.   width: 200px;

5.   height: 200px;

6.   border-radius: 50%;

7.   background: linear-gradient(30deg, #FF0000, #FF5252 50%, transparent);

8.    /* Ritaglia l'immagine in una forma circolare */

9.   shape-outside: linear-gradient(30deg, #FF0000, #FF5252 50%, transparent);

10.    /* Mostra il 50% dell'immagine all'interno della forma */

11.   shape-image-threshold: 0.5;

12. }

Contenuto Esempio: shape-image-threshold

  
  <style>
.shape-image-threshold-example {
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(30deg, #FF0000, #FF5252 50%, transparent);
   /* Ritaglia l'immagine in una forma circolare */
  shape-outside: linear-gradient(30deg, #FF0000, #FF5252 50%, transparent);
   /* Mostra il 50% dell'immagine all'interno della forma */
  shape-image-threshold: 0.5;
}
  </style>

  <div class="shape-image-threshold-example"></div>
  <div>
      <p>Testo ......</p>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser