A propriedade CSS clip
Publicado em: 2006-06-26 — 80.216 visualizacoes
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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam.
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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam.
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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-06-26 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/trackback no seu site.
[…] http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/ […]
Gostei do exemplo Maujor, muito bem explicado. Ainda estou aprendendo e os seus tutoriais são de grande ajuda. Uma dúvida: Dá para aplicar essa função à um iframe, por exemplo? Onde eu queira que apareça apenas uma certa área de outra página web?
Existe clip (recorte) com bordas arredondadas em CSS?
É o seu netinho? =D QUE fofo!
Show de bola!!!!!!!!!!!!
Cara vc e D+, me manda um autografo seu! rsrs
eu gostaria de saber como utilizar essa mesma tag, só que com o resto que não foi recortado não aparecesse na página, pois eu fiz isso para uma postagem para o meu blogger, só que o problema que por causa disso o conteúdo oculto mandou o meu menú da esquerda para lá em baixo …
óh …
//http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/
Excelente tutorial. As coordenadas do clip, bem como, de outros elementos do css, normalmente confundem um pouco a cabeça. Este tutorial foi bem esclarecedor, principalmente através do exemplo.
Continue assim sempre produzindo materiais práticos e eficientes.
Parabéns.
Cara muito legal o post. Eu nao sabia sobre o CLIP e putz, to vendo que voce escreveu em 2006 hahaha. Que tapado que eu sou.
É assim mesmo, sempre aprendendo. Fiz um exemplo baseado nesta propriedade.
No exemplo poderia fazer de N formas como já faço, mas testei com a propriedade CLIP, gostei do resultado. Só não testei nos navegadores Opera e Chrome.
Segue link de JQuery com CLIP CSS
Pra ficar mais organizado pros seus leitores, se quiser postar a solução em seu blog pode colocar.
Abraço e parabéns
Maujor obrigado por esclarecer mais uma duvida… como sempre com muita clareza e exemplos práticos…
Valew
De nada, professor! Estou ouvindo sua entrevista com o Guanabara!
@Sérgio
Obrigado!
O W3C prevê as duas sintaxes, separação com vírgulas ou com espaço em branco. Preconiza ainda que os Agentes de Usuário devem aceitar ambas as sintaxes.
Mas, (para variar) o IE não respeita quando a sintaxe é com vírgulas. Por esta razão o tutorial usa a sintaxe com espaços.
Bom saber que o IE8 corrigiu.
A W3C recomenda que utilizemos “,” (vírgula) entre os valores. Mas, segundo minhas experiências, o IE6 e IE7 simplesmente ignora a função do clip quando utilizamos o caracter “,”. Ou seja, ao invés de fazer clip: rect(0px, 64px, 64px, 0px); faça clip: rect(0px 64px 64px 0px); Dessa forma funciona no IE6 e 7. No IE8 corre sem problemas de qualquer uma das maneiras.
Testem vocês mesmos… é REAL! E acho interessante o Maujor atualizar o post com esse detalhe de compatibilidade. Afinal de contas, demorei umas 3 horas para descobrir isso!
Vilmondes, como coloca borda no clip? Qual o link deste artigo do Bruno? Eu fiz do meu jeito aqui, deu certo e ficou cross-browser… mas poluí o código com dois span’s para resolver.
EXCELENTE DINOSSAURO!!! Eu consegui apartar uma briga entre eu e as CSS utilizando o overflow e tu me aparece com o clip, que resolveu definitivamente meu problema – e me fiz as pazes novamente com as CSS .
A paz reinou novamente em meu pequeno quarto – por enquanto.
Conheci essa propriedade há 2 dias para fazer um banner expansível, e achei muito legal e descobri que da para usar com javascript para recortar imagens junto ao php.
Muito jóia Maujor, como sempre ensinando a gente, olha, se eu sei um pouco de css aprendi aqui, hehe, lendo desde de 2006, abraço.
Olá Maujor, sou teu fã demais! Mas voltando ao assunto, eu gostei de aprender mais uma propriedade, porém, eu também não achei vantagem dele sobre o overflow. No mais, um grande abraço!
Muito interessante! Eu, assim como a maioria não conhecia essa propriedade. Achei interessante tbm um artigo do Bruno Dulcetti mostrando como colocar uma borda internamente com essa propriedade.
Abraço!
Repondendo ao Paulo Figueiredo
eu quando tenho sites onde as dimençoes precisam ser fixas
como sou programador também, uso querystrings dinamicas
para carregar o conteudo dentro do overflow, dexando aos
desatualizados uma impressão de iframe…
no html não sei se é possivel mas fica ai uma pergunta
Quanto ao CLIP não vejo utilidade a não ser usando com js
ou linguagens dinamicas…tenho um scrool personalizado
que usa esse clip para controlar a rolagem que é uma div
Mas enfim Parabéns Maujor por mais uma contribuição
a comunidade ; )
gostaria de saber como uso isso para cortar uma imagem e salvar essa imagem que foi cortada
[…] origem: http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip […]
[…] link original http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/ […]
Eu uso esta propriedade há imenso tempo, pena é que se a div conter um objecto de flash , em linux não faz o clip .. o flash fica sempre visível na totalidade. Quem sabe um dia resolvem este problema.
Pena porque eu uso este método para criar ads bem interactivos
Joares,
esta propriedade pode ser útil sim.
Um exemplo são as animações com JS, onde você altera o valor do clip progressivamente.
Outra aplicação seria um efeito de corte em imagens.
Imagine um editor de imagens onde você pode selecionar exatamente a porção da imagem a ser recortada? Depois você envia o valor do clip para o servidor e executa o corte.
Overflow e CLIP são semelhantes. Mas têm propósitos bem diferentes.
😀
Olá Maurício, sou novo no desenvolvimento de layout utilizando CSS, acho uma boa idéia deixar as tabelas somente para apresentação de dados.
Verifiquei em alguns artigos, que o iframe está em desuso e gostaria também me livrar dele, só que não sei como direcionar a abertura de um link que esteja em uma DIV, para outra área na mesma página sem o uso do “danado” do iframe.
Se for possível gostaria de um exemplo para poder aprimorar meu conhecimento nesta nova jornada.
Sds.
Paulo Figueiredo
Ah!! Parabéns pelo seu ótimo trabalho no desenvolvimento deste site.
que droga, eu procurei saber sobre o overflow e quando entro na pag não tem nada a ver.
Professor, é sempre bom ler seus artigos, pois eu não conhecia esta propriedade. vlw e Parebéns .
Artigo muito explicativo, como sempre. Parabéns!!!
Show de bola mestre, me apavoro a cada dia com WS, é muiiiiito interessante!
Eu não conhecia o CLIP, com essa explicação ficou mamatinha entender… parabéns e obrigado!
Muito bom o artigo, um ótimo uso para a propriedade é ao fazer scrolls personalizados (com a ajuda de javascript, claro).
Parabéns.
César…. acho q c num entender… ali é flash ou é rollover de imagem… me corrijam se estou errado!
Ja tinha visto essa propriedade no Livro DHTML & CSS, é muito interessante, mais pessoalmente nunca usei.
Mauricio muito show de bola….confesso q nao conhecia essa propriedade ainda.
Abraços
Maujor, parabéns mais uma vez, elucidando e desmistificando a web tornando-a cada vez mais clara e acessível.
Pelo visto comesta propriedade então, podemos criar com as css aqueles banners que se abrem, correto?
Não cheguei ainda a utilizá-la, mas pela explicação é o que parece.
Brilhante Maujor.
Valeu.
fui q mandei o e-mail 😀 show d bola Maujor. Quebrei um pouco a cabeça para entendê-la. Odeio essas funções que dependem de outras propriedades, como é o caso.
Bom, no meu caso naum serve, pois o espaço em branco, a parte que naum aparece, teria q ficar o conteudo da div… mas ele fica como visibility ao invés de display: none…
Mas brigadão ae de qualquer forma… akele abraço…
Mas uma vez, vc está de parabens!!!!
Esse recurso p/ estudo é maravilhoso!
Muito obrigado pela ajuda, meus trabalhos estão melhorando cada vez mais!
@Marcus,
Corrigido o problema de renderização no Ópera.
Havia um caracter estranho na estilização inline que foi retirado.
Uai, Alex. Agora que você confirmou, parece que eu estou conseguindo visualizar no Opera. Coisa estranha…
confirmado Marcus!
mas mesmo assim, interessante este recurso.
valeu Maujor!
Bacana, Maujor. Eu também não conhecia essa propriedade. Vivendo e aprendendo…
Mas parece que a da DIV não funciona no Opera 9.01. Alguém pode confirmar, ou é só aqui no meu mesmo?
Bem legal, eu não conhecia essa propriedade. Abraços!!!
É sempre bom conhecer novos atributos.
Valeu maujor…
Massa Maujor… eu num conhecia essa propriedade…
Dando uma olhada… ql a utilidade dela afinal?
Vamos supor que eu recorte um texto por exemplo… igual ao que fizeste… mas… em um site isso fiará em branco como vc explicou…
Então… teria alguma vantagem em usar o clip ao invés de overflow?
Tipo… num achei utilidade pra essa propriedade…