13

Estava dando uma olhada em um código onde ensinava algumas técnicas para criar uma tabela responsiva.

Me deparei com o uso da propriedade clip, seguida do valor rect(0 0 0 0);.

Então me surgiu essa duvida:

Para que serve a propriedade clip?

Nota:A pergunta em si não tem nada a ver com elementos responsivos, mas foi apenas a ocasião onde vi o uso de clip pela primeira vez.

4
  • 1
    A propriedade clip serve para definir a área vísivel de um elemento fixo na página. Aplicado à uma imagem, poderia ser comparado com uma ação de crop. Os quatro valores em rect definem a área visível: rect(<top> <right> <bottom> <left>). Como isso pode ser aplicado à tabelas responsivas (e utilizar todos os valores 0), não sei dizer.
    – Woss
    Commented 11/04/2017 às 13:02
  • @AndersonCarlosWoss Até onde eu sei é comunmente usado na responsividade para cortar grandes imagens (geralmente pelas laterais) quando há conteúdo que pode ser escondido para não ter que se diminuir a imagem. Ou seja, ao diminuir a tela, as vezes é preferível cortar conteúdo irrelevante das laterais ao invés de diminuir a imagem. Commented 11/04/2017 às 13:05
  • 1
    Legal a pergunta, particularmente desconhecia essa propriedade. Commented 11/04/2017 às 18:43
  • 1
    As duas respostas já mencionavam que estava obsoleto...
    – bfavaretto
    Commented 10/11/2018 às 16:11

2 Respostas 2

13
+50

CLIP significa RECORTAR, ou seja , ela recorta o conteúdo de um box.

  • A sintaxe é:

.container {clip: rect (top, right, bottom, left);}

onde:

container é o elemento HTML cujo conteúdo será recortado;

clip é a propriedade recortar;

rect(top , right , bottom , left) é a função para recortar cujos parâmetros são as coordenadas para o recorte expressas em medidas CSS .

Imagine que precise cortar a área destacada na figura a seguir com suas respectivas coordenadas:

inserir a descrição da imagem aqui

Nesse caso o código CSS ficaria assim:

.container {clip: rect (40px, 150px, 260px, 80px);
  • Onde rect é os parâmetros para o recorte da imagem.

O resultado do recorte dessa imagem é:

inserir a descrição da imagem aqui

  • Perceba que a área da imagem que foi recortada permanece com seu espaço em branco no documento.

Obs: A propriedade clip só funciona para elementos posicionados de maneira fixed ou absolute. Lembrando que na documentação da mdn tem a seguinte afirmação.

Este recurso foi removido dos padrões da Web. Embora alguns navegadores ainda possam apoiá-lo, ele está em processo de queda. Evite usá-lo e atualizar o código existente, se possível; Consulte a tabela de compatibilidade na parte inferior desta página para orientar sua decisão. Esteja ciente de que esse recurso pode deixar de funcionar a qualquer momento.

Use clip-path em vez disso!

Referencia:

9

A propriedade clip serve para recortar um elemento absolutamente posicionado, serve para os casos em que uma imagem está inserida dentro de um elemento menor que ela, nesse caso podemos utilizar a propriedade clip para recortar a imagem, ajustando ao tamanho do elemento pai, resumidamente, a propriedade define a área do elemento que ficará visível.

Ex:

/*rect(top,right,bottom,left)*/
clip: rect(110px, 160px, 170px, 60px);

Resultado:

inserir a descrição da imagem aqui

fonte img: css-tricks clip

Observações:

De acordo com a MDN a propriedade está obsoleta e deve-se utilizar a propriedade clip-path em seu lugar.

O valor default da propriedade é auto, ou seja, não limita a área de visualização do elemento.

A propriedade clip só funciona em elementos com position:absolute ou position:fixed. Não funcionará com relative ou static.

Para informações sobre compatibilidade: w3schools css clip

Segue um exemplo funcional da propriedade, definindo a área visível de uma imagem, para ver a imagem completa basta comentar a propriedade clip.

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      position: absolute;
      clip: rect(20px, 130px, 180px, 30px);
    }
  </style>
</head>

<body>
  <img src="https://pbs.twimg.com/profile_images/1196566139/CRV_-_Urso_comptd.jpg" width="200" height="300">
</body>

</html>

4
  • 4
    De acordo com MDN esta propriedade está obsoleta e deve usar-se clip-path no lugar. Talvez seja interessante adicionar isso à resposta.
    – Woss
    Commented 11/04/2017 às 13:12
  • Perfeitamente @AndersonCarlosWoss, adicionado à resposta.
    – Mathiasfc
    Commented 11/04/2017 às 13:17
  • 1
    E também pode confirmar a sequência dos parâmetros de rect? Eu encontrei aqui <top> <right> <bottom> <left> e você colocou left e right trocados no comentário do código.
    – Woss
    Commented 11/04/2017 às 14:17
  • @AndersonCarlosWoss, novamente, muito obrigado pelas observações, corrigido.
    – Mathiasfc
    Commented 11/04/2017 às 14:21

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 .