Clip-path - CSS-Tricks

Índice

A clip-pathpropriedade em CSS permite que você especifique uma região específica de um elemento a ser exibido, com o resto sendo escondido (ou “cortado”).

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Costumava haver uma clippropriedade, mas observe que ela está obsoleta.

O caso de uso mais comum seria uma imagem, mas não se limita a isso. Você poderia facilmente aplicar clip-patha uma tag de parágrafo e apenas uma parte do texto.

 

 I'll be clipped.

Esses quatro valores em inset()(no CSS acima) representam o ponto superior / esquerdo e o ponto inferior / direito , que formam o retângulo visível. Tudo fora desse retângulo está oculto.

Esta imagem de Louis Lazaris explica muito bem os quatro pontos da sintaxe antigaclip: rect(); .

Outros valores possíveis:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Exemplo de caminho de clipe SVG:

É muito estranho clip-pathnão suportar a path()função desde o início, pois path()já é uma coisa para propriedades como motion-path. No entanto, o Firefox agora oferece suporte para ele e estamos aguardando o restante dos navegadores. Veja Uma implementação inicial de clip-path: path ();

Faça o seu

Até que possamos usar de forma confiável path(), os clipes mais úteis para formas personalizadas sofisticadas são polygon(). Este é um editor realmente legal para os de Mads Stoumann (que também funciona para círculos e elipses):

Mais Informações

  • Recorte e mascaramento em CSS
  • clip-path no WPD
  • clip-path no MDN
  • Clippy: criador de clip-path de Bennett Feely
  • Corte e mascaramento em MDN
  • A (obsoleta) propriedade CSS Clip (Impressive Webs)
  • Especificação de máscara de CSS
  • Mascaramento CSS por Dirk Schulze
  • Clipping in CSS e SVG - A propriedade e o elemento do caminho do clipe de Sara Soueidan
  • Clip-path com marcação de canetas no CodePen
  • Demonstrações e suporte para navegador de demonstração Pen de Yoksel
  • Máscaras SVG por Jakob Jenkov
  • Pesquisa de Alan Greenblatt sobre os níveis de suporte do navegador para recursos de recorte e mascaramento

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
91 54 Não 88 TP *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Artigos interessantes...