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:

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:

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>

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *