Como usar técnicas de recorte e mascaramento CSS e SVG

SVGs são ótimos para trabalhar na web, e recorte e mascaramento permitem algumas maneiras interessantes de mostrar ou ocultar partes de seus gráficos da web. O uso dessas técnicas também permite mais flexibilidade com seus designs, pois você não precisa fazer alterações manualmente e criar novas imagens – tudo é feito com código. Ao usar uma combinação de técnicas de recorte e mascaramento de CSS, você terá muitas opções para os gráficos do seu site.

Para ajudar a esclarecer as coisas, mascarar e recortar são duas maneiras diferentes de manipular imagens com CSS. Vamos começar com o recorte.

Noções básicas de recorte

Se você já usou o Photoshop, provavelmente já conhece o Clipping Masks. É um tipo semelhante de abordagem. O recorte envolve colocar uma forma vetorial, como um círculo ou um triângulo, em cima de uma imagem ou elemento. Qualquer parte da imagem atrás da forma ficará visível, enquanto tudo fora dos limites da forma ficará oculto.

Por exemplo, se uma máscara de recorte triangular estiver sobre a imagem de uma floresta, você verá a imagem da floresta dentro da forma de triângulo. O limite da forma é chamado de caminho de recorte, não devendo ser confundido com a propriedade de clip depreciada. Você cria o caminho do clipe usando a propriedade clip-path .

Observação: não tente isso em seu site ao vivo

Lembre-se: Você nunca deve alterar o código diretamente em seu site, para garantir que nada seja quebrado. Nosso aplicativo de desenvolvimento local gratuito, o Local, ajudará você a configurar um ambiente de teste no qual você possa seguir este tutorial com segurança.

Clipagem em ação

Os clipes são sempre caminhos vetoriais. Pode ser confuso de entender, mas qualquer coisa fora do caminho ficará oculta, enquanto qualquer coisa dentro do caminho ficará visível. Para entender melhor e testar você mesmo, veja o exemplo no CodePen.

Aqui está um trecho da estrutura HTML do exemplo:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Este é o CSS para fazer o recorte acontecer:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

Você pode ver onde o clipPath id está sendo referenciado no HTML e como ele usa o URL do clip-path para fazer o recorte.

Ferramenta Clippy

Clippy é uma ótima ferramenta para gerar caminhos de clipe CSS. Há uma grande variedade de formas e tamanhos iniciais que podem ser personalizados.

Noções básicas de mascaramento

O mascaramento é feito usando uma imagem PNG, gradiente CSS ou um elemento SVG para ocultar parte de uma imagem ou outro elemento na página. Estaremos nos concentrando em gráficos SVG, mas lembre-se de que isso pode ser feito com outros tipos ou estilos de imagem.

A propriedade de máscara e o elemento de máscara

Apenas um lembrete para ajudar na visualização, é importante ter em mente que o elemento mascarado é a imagem “original” (antes da aplicação da máscara). Você pode não querer ver a imagem inteira, então esconder partes dela é feito com a propriedade CSS mask . A mask é a abreviação de CSS para um grupo de propriedades individuais, nas quais nos aprofundaremos em um segundo. O elemento SVG <mask> é usado dentro de um gráfico SVG para adicionar efeitos de mascaramento. Neste exemplo, a máscara é um círculo e também há um gradiente aplicado.

Usando o elemento de máscara SVG em um gráfico SVG

Para ter uma ideia do SVG <mask> , vamos mascarar com um gráfico SVG.

Pode ser um pouco complexo à primeira vista, mas tudo funciona em conjunto para mascarar a imagem subjacente. Temos uma imagem real como plano de fundo, então onde o SVG entra em ação? Ao contrário dos exemplos de recorte, esta imagem de fundo está tecnicamente dentro de um elemento SVG. Usaremos CSS para aplicar essa máscara à imagem. As propriedades virão do elemento SVG mask, e daremos a ele o id de masked-element em nosso CSS.

Para ver isso em ação, confira este exemplo do Codepen. Aqui está o código de trabalho para o gráfico SVG mascarado:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

Com este CSS, estamos especificando onde encontrar a máscara. Ele procurará o ID de #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Observe um gradiente na forma do círculo? Um gradiente foi aplicado, além de definir a forma do círculo para a máscara.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

Mascaramento de texto SVG

O mascaramento de texto pode fazer algumas coisas bem legais, como mostrar uma imagem através de um bloco de texto. A boa notícia é que um elemento de texto pode ser usado dentro de uma máscara SVG. À medida que o suporte do navegador aumenta no futuro, essa pode ser uma maneira realmente interessante de combinar imagens e tipografia.

Aqui está uma explicação básica do que está acontecendo. Há um elemento de texto SVG dentro da máscara SVG. Especificamos o valor RGB para branco, que cria a área oval ao redor do texto mascarado. Qualquer coisa atrás da área oval aparece através do texto, dando uma sensação de recorte.

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

Para entender completamente, é útil brincar e experimentar o código. Tente alterar as cores, alterar o texto e ajustar os tamanhos neste Codepen.

A propriedade de imagem de máscara

Uma imagem pode ser declarada e a mask-image pode ser definida como um valor de URL. A mask-image pode ser um PNG, SVG ou uma referência a um elemento de mask SVG, como demonstrei no exemplo anterior.

Como o mascaramento é usado para ocultar parcial ou totalmente partes de um objeto ou elemento, primeiro você desejará um link de imagem para um arquivo para o elemento que será mascarado. Veja como é essa imagem. É colorido para deixar bem aparente qual parte a máscara está mostrando e escondendo.

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

Até agora, houve muito código SVG, mas este exemplo é um pouco diferente, pois haverá uma imagem raster mascarada com um SVG.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

A propriedade mask-image é onde a forma da máscara será declarada. Nesse caso, a imagem da máscara é um gráfico SVG. Ter o link de URL incluído é como a máscara é construída.

Aqui está no Codepen.

Combinando várias imagens de máscara

Quando você pensou que o mascaramento não poderia ficar melhor, existe a opção de definir mais de uma camada de imagem de máscara. Tudo o que você precisa fazer é adicionar dois valores de URL (ou mais, se estiver se sentindo ambicioso) separados por uma vírgula.

Para expandir a máscara simples de cima, haverá uma seta adicionada ao gráfico original. Veja como duas máscaras são combinadas.

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

Tudo o que você precisa fazer é adicionar os dois valores (com uma vírgula) e agora há duas máscaras combinadas, tornando as possibilidades de mascaramento infinitas.

Aqui está no Codepen.

Crie um gradiente simples com mask-image

Nem todas as máscaras precisam ter uma forma complexa. Às vezes não é uma imagem em particular que é a máscara, mas sim uma máscara simples como um gradiente. Se você está procurando uma maneira rápida de conseguir isso, a propriedade mask-image é uma opção, que é bem fácil de implementar.

Neste exemplo, havia uma classe aplicada a um gradiente definido como a propriedade mask-image . Com esta simples declaração, foi fácil criar uma máscara de gradiente na imagem.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Veja isso no Codepen.

A propriedade de repetição de máscara

Depois de criar uma máscara, é muito fácil fazer mais. Isso realmente é útil se você deseja criar um padrão personalizado. A propriedade mask-repeat permite a repetição da máscara. Se você já fez um plano de fundo lado a lado antes, isso é semelhante a isso.

Há algumas coisas importantes a serem lembradas, como o tamanho e o tipo de repetição de máscara que precisa ser declarado para que o padrão perfeito seja criado.

O mask-size é bem fácil de visualizar, especialmente com o valor de pixel definido aqui.

mask-size: 200px;
webkit-mask-size: 200px;

Existem mais algumas opções de repetição de máscara se você estiver procurando por um efeito diferente para o padrão:

• repeat-x se repete ao longo da coordenada x.
• Repeat-y repete a coordenada y.
• space se repete e se espalha na área disponível.
• round se repete várias vezes na área disponível (o dimensionamento ajudará a preencher o espaço, se necessário)

Suporte ao navegador

Antes de se comprometer com essa nova maneira de trabalhar com gráficos, é importante observar que o suporte do navegador não é consistente com recorte e mascaramento. O recorte é mais suportado do que o mascaramento, mas o Internet Explorer não oferece suporte total ao recorte. O suporte atual do navegador para máscaras CSS também é bastante limitado, por isso é sugerido que seja usado como um aprimoramento em alguns elementos decorativos. Dessa forma, se não for suportado pelo navegador do usuário, não afetará a experiência de visualização do conteúdo.

Para testar as coisas e ver se suas máscaras e recortes são suportados, eu recomendo fazer um JSFiddle ou Codepen e tentar em diferentes navegadores. O suporte ao navegador aumentou nos últimos anos e, eventualmente, chegará a um ponto em que será totalmente suportado. Não deixe as limitações te derrubarem – é sempre bom estar à frente do jogo e quando o suporte for mais popular, você saberá exatamente como revolucionar seus gráficos. Em caso de dúvida, certifique-se de consultar o confiável Can I Use.

Depois de experimentar esses exemplos, isso deve fornecer uma boa introdução ao mascaramento e recorte. Embora o suporte ao navegador seja limitado no momento, isso provavelmente se tornará uma prática comum no futuro. É sempre divertido pensar em como essas técnicas podem ser usadas para criar visuais interessantes. O futuro dos gráficos da web nos tornará menos dependentes de editores de imagem e permitirá maneiras mais eficazes de criar e modificar imagens diretamente no navegador.

Próximo: Crie sites ainda mais rápido!

Você entende a importância de um processo de web design simplificado. Qualquer coisa que você possa fazer para criar um site mais rápido significa mais dinheiro no seu bolso. É por isso que a Flywheel projetou nossa plataforma de hospedagem para economizar seu tempo e mantê-lo fazendo seu melhor trabalho! Com essas dicas e ferramentas de web design, você pode concluir mais projetos e dedicar mais tempo ao crescimento de seus negócios.

Neste guia, abordaremos dicas sobre como trabalhar mais rápido e acelerar seu fluxo de trabalho do WordPress. Desde a configuração inicial do site até o envio ao vivo, descubra como você pode reduzir horas de trabalho do seu dia-a-dia! Baixe-o hoje.

Este artigo foi publicado originalmente em 3 de agosto de 2016. Foi atualizado pela última vez em 6 de novembro de 2018.