Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

A propriedade CSS clip

Publicado em: 2006-06-26 — 61.588 visualizacoes





Documento sem título

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)

Foto para clip

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.

Foto para clip

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.


Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

41 comentários na matéria: “A propriedade CSS clip”

  1. SilvanaNo Gravatar disse:

    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?

  2. Wallace ViannaNo Gravatar disse:

    Existe clip (recorte) com bordas arredondadas em CSS?

  3. Alessandra S.No Gravatar disse:

    É o seu netinho? =D QUE fofo!

  4. oliverNo Gravatar disse:

    Show de bola!!!!!!!!!!!!
    Cara vc e D+, me manda um autografo seu! rsrs

  5. williamNo Gravatar disse:

    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/

  6. GilvamNo Gravatar disse:

    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.

  7. Bruno RibeiroNo Gravatar disse:

    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

  8. Felipe TheossiNo Gravatar disse:

    Maujor obrigado por esclarecer mais uma duvida… como sempre com muita clareza e exemplos práticos…

    Valew

  9. Sergio AlmeidaNo Gravatar disse:

    De nada, professor! Estou ouvindo sua entrevista com o Guanabara!

  10. MaujorNo Gravatar disse:

    @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.

  11. Sérgio AlmeidaNo Gravatar disse:

    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!

  12. Sergio AlmeidaNo Gravatar disse:

    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.

  13. Sergio AlmeidaNo Gravatar disse:

    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.

  14. Vilson CarlosNo Gravatar disse:

    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.

  15. FrancoNo Gravatar disse:

    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!

  16. VilmondesNo Gravatar disse:

    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!

  17. Cassiano (CACA)No Gravatar disse:

    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 ; )

  18. AlanNo Gravatar disse:

    gostaria de saber como uso isso para cortar uma imagem e salvar essa imagem que foi cortada

  19. Farley Rangel » iframe e clip disse:

    […] origem: http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip […]

  20. iframe e clip at Farley Rangel disse:

    […] link original http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip/ […]

  21. GmaltaNo Gravatar disse:

    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

  22. Raphael MartinsNo Gravatar disse:

    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…

    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.

    😀

  23. Paulo FigueiredoNo Gravatar disse:

    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.

  24. ricardoNo Gravatar disse:

    que droga, eu procurei saber sobre o overflow e quando entro na pag não tem nada a ver.

  25. Nando.cotNo Gravatar disse:

    Professor, é sempre bom ler seus artigos, pois eu não conhecia esta propriedade. vlw e Parebéns .

  26. Felipe SanderNo Gravatar disse:

    Artigo muito explicativo, como sempre. Parabéns!!!

  27. rflky3No Gravatar disse:

    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!

  28. TheChessManNo Gravatar disse:

    Muito bom o artigo, um ótimo uso para a propriedade é ao fazer scrolls personalizados (com a ajuda de javascript, claro).

    Parabéns.

  29. JoaresNo Gravatar disse:

    César…. acho q c num entender… ali é flash ou é rollover de imagem… me corrijam se estou errado!

  30. Osny Santos NettoNo Gravatar disse:

    Ja tinha visto essa propriedade no Livro DHTML & CSS, é muito interessante, mais pessoalmente nunca usei.

  31. Lucas AlvesNo Gravatar disse:

    Mauricio muito show de bola….confesso q nao conhecia essa propriedade ainda.
    Abraços

  32. César AugustoNo Gravatar disse:

    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.

  33. Bruno DulcettiNo Gravatar disse:

    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…

  34. Leonardo ProcópioNo Gravatar disse:

    Mas uma vez, vc está de parabens!!!!
    Esse recurso p/ estudo é maravilhoso!
    Muito obrigado pela ajuda, meus trabalhos estão melhorando cada vez mais!

  35. MaujorNo Gravatar disse:

    @Marcus,
    Corrigido o problema de renderização no Ópera.
    Havia um caracter estranho na estilização inline que foi retirado.

  36. Marcus DanilloNo Gravatar disse:

    Uai, Alex. Agora que você confirmou, parece que eu estou conseguindo visualizar no Opera. Coisa estranha…

  37. Alex SaueressigNo Gravatar disse:

    confirmado Marcus!
    mas mesmo assim, interessante este recurso.
    valeu Maujor!

  38. Marcus DanilloNo Gravatar disse:

    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?

  39. Pedro RogérioNo Gravatar disse:

    Bem legal, eu não conhecia essa propriedade. Abraços!!!

  40. MicoxNo Gravatar disse:

    É sempre bom conhecer novos atributos.
    Valeu maujor…

  41. JoaresNo Gravatar disse:

    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…

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo