8

Estudando sobre a propriedade clip me deparei com a seguinte afirmação:

A propriedade clip funciona de maneira parecida com overflow com algumas diferenças.

Isso me gerou algumas duvidas:

  • Essa afirmação é verídica?
  • Quais seriam essas diferenças?
  • Em que situação se aplica uma ou outra propriedade?

2 Respostas 2

8

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.

6
  • Essa afirmação é verídica?

Não é não. Estas propriedades até tem uma relação entre si, mas controlam coisas diferentes.

  • Quais seriam essas diferenças?

clip: permite especificar uma área retangular na qual uma imagem mais larga que o container deve ser cortada.

Note que a propriedade position deve ser absolute (posição absoluta).

Note também que esta propriedade não funciona se overflow:visible

w3schools

overflow: especifica o que acontece quando o conteúdo transborda (overflow) a caixa do elemento que o contém. De acordo com o valor, a imagem pode ser cortada ou mostrar barras de rolagem.

w3schools

  • Em que situação se aplica uma ou outra propriedade?

Você deve portanto, decidir quando usar uma ou a outra propriedade, ou mesmo as duas.

overflow vai dizer se corta ou não e clipcomo é feito o corte do conteúdo.

Além disso, como há restrições (no caso de clip), você deve ficar atenta a isso também. Ou acaba usando uma propriedade que é ignorada e você fica sem saber porque não funciona.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .