Com a adição de algumas novas propriedades CSS nos últimos anos, os desenvolvedores do frontend podem agora criar visuais de texto interessantes muito mais facilmente. Texto “Knockout” ou “recorte”, onde palavras recortem uma imagem de fundo, gradiente ou vídeo, são possíveis com muito pouco código.

Neste artigo, vamos explorar cinco técnicas de mascaramento e recorte de texto CSS usando as background-clip e clip-path propriedades.

CSS Gradient Text#

Deixamos começar criando um efeito de texto gradiente CSS. A idéia geral é definir um gradiente de fundo atrás de algum texto e depois “recortar” o fundo para as bordas do texto.

Isso na verdade requer apenas quatro linhas de CSS para realizar.

Sigamos que temos um h1.

<h1>Gradients</h1>

No CSS, vamos adicionar um fundo de gradiente:

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Se você é como eu e nunca se lembra da sintaxe exata para os gradientes do CSS, confira a incrível ferramenta geradora de gradientes em coolors.co.

Agora vamos adicionar a propriedade que faz o recorte: background-clip.

A propriedade CSS do clip de fundo define se o fundo de um elemento se estende por baixo da sua caixa de borda, caixa de acolchoamento ou caixa de conteúdo. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

Usar o valor text com esta propriedade permite que o gradiente de fundo sangre através e prenda as bordas do fundo dentro do texto.

A última propriedade que precisamos é uma cor de texto. Ela deve ser definida como transparente para que o fundo seja completamente visível. Sem isto, você provavelmente verá apenas um esboço fino do gradiente.

h1 {...color: transparent;}

O prefixo -webkit é realmente necessário para o Chrome e Safari no momento desta escrita porque o valor text só tem suporte parcial. Adicionar as propriedades prefixadas e não prefixadas deve suportar a maioria dos navegadores, além do Internet Explorer. Se você precisa suportar o IE, você pode adicionar uma cor de texto não transparente como uma fallback e incluí-la antes da cor transparente.

Cheque os documentos background-clip para obter informações completas sobre o suporte do navegador.

CSS Animated Gradient Text#

Para o próximo efeito, vamos ficar pelos gradientes e usar um gradiente animado como fundo de texto.

<h1>Animated</h1>

E para o CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Continuamos a usar as propriedades background-clip, e definimos a cor do texto para transparent tal como no exemplo anterior.

Desde que estamos a trabalhar com animação, precisamos de definir o próximo efeito. A animação deve correr infinitamente e alternar da esquerda para a direita, e vice-versa.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

Pouco definimos o keyframe da animação, o que aumenta o valor de background-size para obter o movimento real da animação.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Este próximo exemplo será novamente semelhante aos que acabámos de cobrir. A única diferença é que vamos usar uma imagem real em vez de um gradiente como fundo.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

No nosso caso, queremos ter a certeza que a imagem de fundo não está a repetir-se e que está centrada vertical e horizontalmente.

CSS Video Background Text#

Alright, a seguir vamos usar o vídeo como fundo do nosso texto. Este efeito é diferente na medida em que usa um SVG em vez de um h1.

Primeiro, precisamos de um div que contenha uma tag de vídeo.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

Na tag de vídeo, adicionamos algumas propriedades: loop autoPlay muted playsInline. Até agora, isto deve dar-lhe um looping de vídeo na página que toca automaticamente sem som.

Agora os estilos:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

A propriedade mais importante aqui é clip-path.

A propriedade clip-path CSS cria uma região de recorte que define a parte de um elemento que deve ser mostrada. As partes que estão dentro da região são mostradas, enquanto as que estão fora são escondidas. – MDN Docs

Isso fará um pouco mais de sentido depois de adicionarmos o SVG, mas basicamente queremos usar o caminho SVG como a região para recortar nosso vídeo, como é referenciado pelo url(#videoText) valor.

Agora precisamos de um SVG. Existem toneladas de maneiras diferentes de criá-los e exportá-los, mas eu normalmente uso Figma ou Sketch. Tudo que você realmente precisa fazer é adicionar algum texto em seu programa de escolha e exportá-lo como um SVG.

O SVG que eu uso abaixo é um exemplo simplificado. O seu terá o habitual xmlns, viewBox, e path propriedades.

Após você ter um SVG exportado, há algumas adições a fazer. Primeiro, precisamos adicionar um elemento clipPath ao redor do caminho.

O elemento <clipPath> SVG define um caminho de recorte a ser usado pela propriedade clip-path Um caminho de recorte restringe a região à qual a tinta pode ser aplicada. Conceptualmente, partes do desenho que se encontram fora da região delimitada pelo caminho de recorte não são desenhadas. – MDN Docs

A um nível elevado, não é muito diferente da propriedade background-clip usada nos exemplos anteriores.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

O elemento clipPath deve ter um ID que corresponda ao que adicionámos no nosso CSS: videoText. Ele também precisa de uma propriedade clipPathUnits="objectBoundingBox" e valor.

A última coisa a adicionar são alguns valores transform. Precisamos deles porque o SVG em si é intencionalmente ajustado a uma altura e largura de 0 com o CSS que adicionamos. Por causa disso, precisamos escalar o caminho de volta para cima para que fique visível.

Para derivar os valores da escala, divida 1 pela altura e largura. Como o texto no meu exemplo tem uma largura de 640px e altura de 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Você pode precisar experimentar isso um pouco dependendo da largura e altura que você quiser.

Finalmente, adicione o SVG finalizado no SVG .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

Para o nosso último exemplo, vamos criar um efeito de texto com cor dividida. Existem provavelmente algumas formas diferentes de o fazer, mas consegui fazê-lo com o seguinte.

Primeiro, precisamos de um h1, só que desta vez adicionamos-lhe um atributo data. Você vai ver porque em um minuto. Também queremos ter a certeza que há um mergulho à volta do h1.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Agora para os estilos.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Existem duas partes importantes aqui:

1. O uso da função attr() CSS. A função obtém um atributo do elemento selecionado e nos permite utilizar esse valor em VCC. No nosso caso, queremos o atributo data-text que adicionamos para que possamos utilizá-lo na propriedade content. Isto nos dá dois elementos de texto para trabalhar: o elemento original h1 e o elemento psuedo.

2. A propriedade clip-path. No exemplo anterior, usamos um SVG separado como o valor desta propriedade. Estamos a fazer algo semelhante, excepto usando uma forma polygon. Isto é o que dá a aparência da cor do texto ser “dividido”. Estamos a usar a forma deste polygon para recortar o texto do pseudo elemento vermelho de modo a ficar apenas parcialmente visível, e depois posicionando-o sobre o branco h1 texto usando posicionamento absoluto.

Finalmente, uma última adição é para ter a certeza que o texto ainda é seleccionável.

h1::before {...pointer-events: none; /* Make text selectable */}

Sem a propriedade pointer-events, o pseudo elemento está realmente impedindo que algum do nosso texto seja selecionado.

Sumário#

E aí está: cinco diferentes efeitos de clipping e mascaramento CSS para tentar em seu próximo projeto! Os exemplos que cobrimos realmente só arranham a superfície das coisas que você pode fazer com essas propriedades. Algumas outras opções podem envolver o uso de texturas, SVGs mais elaborados, e diferentes tipos de animação.