A propriedade CSS clip
Publicado em: 2006-06-26 — 22.982 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.
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
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.
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!
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!
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.
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.
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.
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!
@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.
De nada, professor! Estou ouvindo sua entrevista com o Guanabara!
Maujor obrigado por esclarecer mais uma duvida… como sempre com muita clareza e exemplos práticos…
Valew