Pra que serve a propriedade clip? – css css3
Pergunta:
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.
Autor da pergunta Wallace Maxters
Alicia Tairini
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:
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 é:
- 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:
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:
fonte img: css-tricks clip
Observações:
De acordo com a MDN a propriedade está obsoleta e deve-se utilizar a propriedade
clip-pathem 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>Related Posts:
