A propriedade CSS clip
Publicado em: 2006-06-26 — 12,855 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 da W3C, W3Schools, a mesma regra, eu utilizo da forma mostrada, mas não acontece nada. Vi esse site aqui…
……
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 extraida de um e-mail que recebi de um visitante do Blog. Escrevi esta matéria explicando como funciona a propriedade CSS CLIP tão pouco conhecida e usada.
A propriedade CLIP foi introduzida com as especificações para CSS nível 2, de 12 de maio de 1998, portanto já existe há muito tempo e é bem suportada pela maioria dos navegadores, mesmo as mais antigos como os da versão 4, por exemplo, IE4 e NN4
Para facilitar o entendimento desta propriedade vamos traduzí-la para o português.
Em CSS, a melhor tradução para CLIP é RECORTAR
E é exatamente isso que esta propriedade faz. Ela recorta um box CSS. Você, que tem alguma intimidade com CSS, deve conhecer a propriedade overflow que, serve para simular um iFrame nosso conhecido das velhas e ultrapassadas técnicas HTML. Pois bem, clip funciona de maneira semelhante a overflow com as seguintes diferenças:
- Com overflow você controla a parte ‘escondida’ (recortada) com os valores auto, hidden, inherit, scroll e visible obtendo ou não barras de rolagem e com clip você não tem este controle;
- A propriedade clip só funciona para elementos posicionados de maneira fixed ou absolute e overflow independe de posicionamento;
- Quando usamos overflow os espaços ‘escondidos’ (recortados) não ocupam lugar no fluxo e layout do documento e com clip estes espaços são preservados.
A regra CSS para clip
div#recorte {clip: rect (top right bottom left); }
onde:
div#recorteé o elemento HTML que será recortado;clipé a propriedade recortar;rect(top right bottom left)(topo, direita, inferior, esquerda) são as coordenadas para o recorte, medidas conforme mostrado na figura abaixo:
Temos uma imagem de 350 x 240px e queremos recortar a área destacada sobre a figura.
Observe como contar as coordenadas para 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 uma 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 o Internet Explorer não suporta esta propriedade CSS). Assim a DIV servirá de contexto para posicionamento da imagem sendo a ela atribuida position: relative;
A renderização.
Observe como a área da imagem que foi recortada permanece em branco no documento:
Você pode recortar qualquer elemento com a propriedade clip.
Observe abaixo uma DIV de 350 x 400px com um texto como conteúdo e a seguir recortada com as mesmas coordenadas da foto:
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. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.
Curabitur hendrerit erat ut augue. Cras gravida. Mauris consequat aliquam leo. Aenean non tortor id metus aliquet consectetuer. Quisque sodales lectus ac orci. Donec eleifend fringilla mi. Vivamus vel massa. Aenean interdum pellentesque sem. Nulla pellentesque felis et tortor. Duis cursus, dui non dictum tincidunt, wisi ipsum mollis wisi, nec ornare velit ipsum eget enim. In sed felis. Phasellus condimentum sodales nulla. Etiam orci leo, rutrum malesuada, congue vel, fringilla vitae, lorem. Pellentesque ligula.
A renderização:
Observe como a área da DIV que foi recortada permanece 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. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.
Curabitur hendrerit erat ut augue. Cras gravida. Mauris consequat aliquam leo. Aenean non tortor id metus aliquet consectetuer. Quisque sodales lectus ac orci. Donec eleifend fringilla mi. Vivamus vel massa. Aenean interdum pellentesque sem. Nulla pellentesque felis et tortor. Duis cursus, dui non dictum tincidunt, wisi ipsum mollis wisi, nec ornare velit ipsum eget enim. In sed felis. Phasellus condimentum sodales nulla. Etiam orci leo, rutrum malesuada, congue vel, fringilla vitae, lorem. Pellentesque ligula.
(2 votos, média: 5 / 5)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2006-06-26 (Monday). 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.
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…
É sempre bom conhecer novos atributos.
Valeu maujor…
Bem legal, eu não conhecia essa propriedade. Abraços!!!
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?
confirmado Marcus!
mas mesmo assim, interessante este recurso.
valeu Maujor!
Uai, Alex. Agora que você confirmou, parece que eu estou conseguindo visualizar no Opera. Coisa estranha…
@Marcus,
Corrigido o problema de renderização no Ópera.
Havia um caracter estranho na estilização inline que foi retirado.
Mas uma vez, vc está de parabens!!!!
Esse recurso p/ estudo é maravilhoso!
Muito obrigado pela ajuda, meus trabalhos estão melhorando cada vez mais!
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…
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.
Mauricio muito show de bola….confesso q nao conhecia essa propriedade ainda.
Abraços
Ja tinha visto essa propriedade no Livro DHTML & CSS, é muito interessante, mais pessoalmente nunca usei.
César…. acho q c num entender… ali é flash ou é rollover de imagem… me corrijam se estou errado!
Muito bom o artigo, um ótimo uso para a propriedade é ao fazer scrolls personalizados (com a ajuda de javascript, claro).
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!
Artigo muito explicativo, como sempre. Parabéns!!!
Professor, é sempre bom ler seus artigos, pois eu não conhecia esta propriedade. vlw e Parebéns .
que droga, eu procurei saber sobre o overflow e quando entro na pag não tem nada a ver.
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.
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.
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
[…] link original http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/ […]
[…] origem: http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip […]
gostaria de saber como uso isso para cortar uma imagem e salvar essa imagem que foi cortada
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 ; )
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!