A proriedade clip:;
permite que você especifique um retângulo para recortar um elemento absolutamente posicionado. O retângulo é especificado em quatro coordenadas, todas começando do canto superior esquerdo do elemento a ser cortado.
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Já a propriedade overflow:;
especifica o que acontece se o conteúdo transborda a "caixa/container" de um elemento.
Esta propriedade quando especificada serve para adicionar barras de rolagem quando o conteúdo de um elemento é demasiado grande para caber em uma área especificada ou para cortar/limitar o conteúdo de uma caixa quando usado overflow:hidden;
.
.elemento {
width: 150px;
height: 150px;
overflow: scroll; /* adiciona automaticamente uma barra de rolagem/scroll ao elemento se o conteúdo for maior, dando a possibilidade de fazer scroll para ver o resto do conteúdo */
}
O único caso em que estas propriedades funcionam de forma semelhante é ao fazer uso do overflow:hidden;
para recortar imagens como podes ver neste exemplo abaixo:
.clipImg {
width: 100%;
height: auto;
position: absolute;
clip: rect(0px,500px,200px,0px);
}
.clipOverflow {
width: 500px;
height: 200px;
overflow: hidden;
}
.clipOverflow img {
width: 100%;
}
<div class="clipOverflow">
<img src="http://c1.staticflickr.com/1/624/32968186751_a913f86f82_c.jpg">
</div>
<img class="clipImg" src="http://c1.staticflickr.com/1/624/32968186751_a913f86f82_c.jpg">
Mas como podemos ver neste exemplo, enquanto o clip
literalmente clipou uma porção da imagem, já no overflow:hidden;
teríamos que trabalhar melhor o código para obter este mesmo efeito do clip
, mas no final o conceito é o mesmo de utilizar o overflow:hidden;
desta maneira. A imagem apenas se parece mais encaixada porque demos um width:100%;
à imagem para respeitar a caixa/container parent clipOverflow
.