10 exemplos surpreendentes de CSS, SVG e máscaras de tela em ação

Você pode fazer coisas incríveis com máscaras SVG. Essa técnica existe há anos, mas apenas recentemente chegou ao desenvolvimento da web convencional.

Vasculhei a web para encontrar as demonstrações abaixo de máscaras de recorte personalizadas e máscaras SVG/tela. Esses exemplos mostram até onde você pode empurrar máscaras na web e, finalmente, o que elas podem oferecer aos desenvolvedores daqui para frente.

1. Mascaramento de Texto

Para um exemplo claro de mascaramento de texto em ação, confira a caneta acima. Ele usa o texto da página real em HTML para que você possa alterar facilmente esse texto para ler o que quiser.

Toda a mágica acontece em CSS com propriedades como background-clip. Você pode aplicá-los a praticamente qualquer texto em qualquer página, mas eles não serão exibidos a menos que você tenha um plano de fundo claro.

O efeito de zoom também é criado puramente em CSS, o que torna esse trecho de código ainda mais impressionante.

2. Polígonos de Máscara Recortada

Observe que esta caneta usa JavaScript para as animações complexas, mas todo o mascaramento é tratado por meio de um elemento de tela. É uma ideia surpreendentemente complexa, então tentar seguir o código será difícil.

Mas o efeito de mascaramento de polígono acima é um dos designs mais exclusivos que já vi. Ele usa formas projetadas em CSS e usa JavaScript para criar essas formas como elementos de página para mascarar uma imagem de fundo.

Isso executa uma animação consistente e é executado em um elemento Canvas com tecnologia JS que se comporta como um contêiner para o conteúdo SVG/XML. Coisas bem loucas, mas é divertido ver o que as máscaras podem fazer!

3. Mascaramento de Imagem

Este exemplo de corte e secagem mostra como é uma máscara de imagem CSS. Você pode ver o antes e depois da máscara de imagem acima criada por Vincent De Oliveira.

Observe que a máscara texturizada preta real é apenas um arquivo PNG. Mas é colocado em camadas sobre uma imagem dinamicamente em CSS para criar um efeito de foto mascarado.

Você pode fazer isso com qualquer textura que desejar, desde que seja exportada com transparência. Há muitos detalhes sobre a propriedade mask e, embora ela suporte arquivos .svg, talvez seja mais fácil começar com PNGs.

4. Passagem do botão

Já pensou em personalizar seus efeitos de foco no botão? Bem, este trecho de código prova que você pode com um pouco de criatividade e algum mascaramento de CSS.

Novamente, todo o código é executado em uma máscara de imagem pré-definida e cada botão tem seu próprio efeito de máscara. A parte mais legal é a animação de foco que não apenas mostra a máscara, mas a anima à vista.

Este é certamente um código experimental, mas parece fenomenal em navegadores WebKit e esperamos que essa técnica possa se tornar um grampo em alguns anos.

5. Máscara de texto SVG

Aqui está um exemplo ligeiramente diferente de um efeito de máscara de texto criado pelo desenvolvedor Marco Barria.

Em vez de definir imagens SVG personalizadas, o código na verdade usa um elemento SVG. Ele ainda é construído em cima do conteúdo de texto HTML simples, mas é executado com um filtro SVG dinâmico.

Isso é um pouco mais técnico, mas também concede muito mais controle ao desenvolvedor. Em vez de brincar com o Illustrator para criar arquivos SVG, você pode codificar SVGs embutidos diretamente em seu documento HTML.

6. Máscara de texto em tela

Com este exemplo de tela de Calvin Davis, você notará que ele usa HTML bruto para o conteúdo, mas o texto em si não é selecionável.

Em vez disso, é renderizado na página usando um elemento Canvas que pode abstrair texto fora do DOM. Isso faz com que ele se comporte mais como uma imagem, então você verá esse efeito onde o texto se mascara sobre o plano de fundo, mas não parece texto.

Alguns designers podem não gostar disso por falta de usabilidade, então se você quiser texto selecionável, eu não me incomodaria com essa configuração.

Mas é um exemplo legal de quão longe você pode levar a tipografia com formas de tela.

7. Gradiente Animado

Outro efeito de texto muito legal é esse gradiente animado criado pelo desenvolvedor Svante Richter.

Ele usa todo o código SVG na página HTML, então está criando máscaras dinamicamente. Essa configuração SVG funciona tomando a página inteira e dando a ela um plano de fundo gradiente, mascarando esse plano de fundo apenas através do texto.

Como o gradiente pode animar via CSS, parecerá que o texto é a única parte animada. Efeito muito legal e é algo que você pode considerar adicionar a um site experimental ou página de destino.

8. Máscara de recorte animada

Esta animação de máscara de recorte abstrata usa bolhas alimentadas por JS geradas aleatoriamente para mascarar uma imagem. Ele usa um elemento de tela junto com máscaras de recorte animadas reunidas para formar um blob SVG coeso.

Pode não parecer muito, mas o desenvolvedor Neil McCallion escreveu um código bem legal, e o resultado final é definitivamente estranho.

O mascaramento acontece principalmente no elemento canvas, mas é controlado por JavaScript. É uma maneira divertida de misturar duas imagens com uma animação SVG abstrata.

Novamente, isso pode não servir a muitos propósitos em um site do mundo real, mas é um experimento legal para mexer com máscaras.

9. Máscara SVG BG

Por outro lado, aqui está um efeito de mascaramento que você pode executar em praticamente qualquer site.

Isso usa um gradiente de plano de fundo ao lado de um cabeçalho de herói para criar um efeito de máscara complexo que ainda combina perfeitamente.

O desenvolvedor Ryna Rudenko empurrou o envelope com esta caneta usando um elemento de tela bruto com a maioria dos efeitos de mascaramento em camadas no HTML.

Esta máscara não é apenas prática e utilizável em um cabeçalho grande, mas também é muito bem trabalhada e roda apenas em HTML5 e CSS3. Um excelente exemplo de padrões modernos da web bem utilizados.

10. Máscaras CSS e SVG

Esta galeria completa de máscaras SVG realmente mostra o quanto você pode fazer com CSS puro.

É uma demonstração mostrando várias técnicas de mascaramento diferentes que usam a mesma foto, formatos diferentes. Além disso, cada exemplo inclui códigos de amostra diretamente na página que você pode testar por si mesmo, embora seja tão fácil copiar o código do editor do CodePen.

Mas esta pequena caneta funciona mais como uma introdução guiada a diferentes efeitos de mascaramento de imagem que você pode fazer. Ótimo lugar para começar se você quiser mergulhar em SVGs e máscaras com demos simples.