A propriedade CSS clip

Falae Maurício, tranquilidade?

Desculpa incomodar ae, mas eu estou tentando usar a propriedade clip do css, mas não consigo de jeito nenhum. Já vi no site do W3C e da W3Schools, a mesma regra, eu utilizo da forma mostrada, mas não acontece nada.

Essa propriedade já é aceita ou ainda será aceita? Sabe me informar isso Maurício?

Obrigado ae e desculpe o incômodo. 😉

A citação acima foi extraída de um e-mail que recebi de um visitante deste Blog. Resolvi escrever esta matéria explicando como funciona a propriedade CSS CLIP, pouco conhecida e usada.

A propriedade CLIP foi criada com as especificações para CSS nível 2 em 12 de maio de 1998, portanto já existe há muito tempo e é bem suportada pela maioria dos navegadores até mesmo os antiquíssimos como os da versão 4, por exemplo, IE4 e NN4.

Contudo convém ressaltar que navegadores IE7 e anteriores requerem a sintaxe antiga dessa propriedade, ou seja, sem uso de vírgulas separando as coordenadas do recorte.

A melhor tradução para o verbo inglês CLIP é RECORTAR

E é exatamente isso que esta propriedade faz. Ela recorta o conteúdo de um box. Você deve conhecer a propriedade CSS overflow, pois bem, a propriedade CLIP funciona de maneira parecida com overflow com as seguintes diferenças:

• Overflow se destina a controlar a parte ‘escondida’ (recortada) do conteúdo de um box com os valores auto, hidden, inherit, scroll e visible criando, ou não, barras de rolagem para acessar os conteúdos recortados. Com clip você não tem o controle com barras de rolagem;
• A propriedade clip só funciona para elementos posicionados de maneira fixed ou absolute e overflow independe de posicionamento;
• Quando usamos overflow os conteúdos ‘escondidos’ (recortados) não ocupam lugar no fluxo do documento e com clip estes espaços são preservados.

A sintaxe da regra CSS para clip é conforme mostrada a seguir:

.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) (topo, direita, inferior, esquerda) é a função para recortar cujos parâmetros são as coordenadas para o recorte expressas em medidas CSS (exceto porcentagem que não é aceita), conforme mostradas na figura abaixo:

Temos uma imagem de 350 x 240px e queremos recortar a área em destaque na figura. Observe a definição das coordenadas para o recorte:

(top, right, bottom, left) » (90px, 280px, 160px, 80px)

O código HTML

...
...
<div style="width:350px;height:240px;position:relative;">

<img src="foto.jpg" alt="Foto para clip" width="350" height="240" » 
style="position:absolute;clip: rect(90px, 280px, 160px, 80px); " />

</div>

Observar que tivemos que criar um DIV para servir de container à imagem, pois como a imagem será recortada ela terá que ser posicionada e no nosso caso adotamos a forma absoluta (não usamos position: fixed; pois os Internet Explorer antigos não suportam esta propriedade CSS). Assim o DIV servirá de contexto para posicionamento da imagem sendo a ela atribuida position: relative;

Usamos estilização inline somente para fins didáticos (visualização e entendimento do código). Não use estilos inline! 🙂

Observe a seguir o resultado do recorte da imagem e note que a área da imagem que foi recortada permanece com seu espaço preservado em branco no documento.

Você pode recortar qualquer elemento com a propriedade clip.
Observe abaixo um DIV com um texto como conteúdo a ser recortado com as mesmas coordenadas que recortamos a foto anterior.

Observe a seguir o resultado do recorte do texto e note que a área de texto que foi recortada permanece com seu espaço preservado em branco no documento.

Atualizações em 05/12/2013

• Ajustes no texto
• Desafio: Encontrar uma aplicação prática para essa propriedade.
  Sugestão: Mostrar trechos ampliados de uma imagem em uma área ao lado da imagem combinado com transições e animações CSS. (Já vi esse efeito na net! Não copie, crie!).Encontrou uma aplicação legal? Poste o link nos comentários ou envie o código para mim que eu publico.