CSS clip
Deprecato: La proprietà CSS clip (CSS2): ritaglia l’area visibile di un elemento posizionato
La proprietà clip consente di definire una porzione visibile di un elemento con position: absolute. Utilizzando clip: rect(top, right, bottom, left), è possibile ritagliare l’elemento e mostrare solo l’area specificata.
Questa proprietà è stata deprecata in CSS3 a favore di clip-path, che offre maggiore flessibilità e supporto per forme non rettangolari.
Sintassi
Significato dei valori principali:
-
top: distanza dal bordo superiore dell’elemento (es.
10px). -
right: distanza dal bordo sinistro al bordo destro del rettangolo di ritaglio.
-
bottom: distanza dal bordo superiore al fondo del rettangolo.
-
left: distanza dal bordo sinistro dell’elemento.
Importante: la funzione rect() accetta solo unità in pixel e il valore auto non è ammesso.
Esempio proprietà: clip
Codice Esempio: clip
.clip-box {
position: absolute;
width: 300px;
height: 200px;
background-color: #4078f2;
color: white;
padding: 20px;
font-size: 18px;
clip: rect(0px, 150px, 100px, 0px);
overflow: hidden;
}.container-clip {
position: relative;
height: 250px;
background-color: #f5f5f5;
}
Contenuto Esempio: clip
Esempio di utilizzo di clip
In questo esempio, parte del contenuto viene nascosta tramite clip applicato a un elemento con position: absolute.
clip.
CSS e HTML per l'esempio con clip:
<style>
.clip-box {
position: absolute;
width: 300px;
height: 200px;
background-color: #4078f2;
color: white;
padding: 20px;
font-size: 18px;
clip: rect(0px, 150px, 100px, 0px);
overflow: hidden;
}
.container-clip {
position: relative;
height: 250px;
background-color: #fff;
}
</style>
<div class="container-clip">
<div class="clip-box">
Questo è un esempio di contenuto parzialmente visibile grazie alla proprietà clip.
</div>
</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
IP: 216.73.216.118
