Revelando texto com espaçamento entre letras CSS

Alguns efeitos de texto são relativamente difíceis de obter em CSS, o principal motivo é que nós não conseguimos direcionar caracteres individuais (algo que muitos de nós queremos na forma de ::nth-letter() , embora tenhamos base para isso com ::first-letter isso nos dá acesso ao primeiro glifo de um elemento de caixa.

Mas talvez haja algumas coisas que possamos usar hoje com o que já temos.

Por exemplo, a propriedade CSS letter-spacing ajusta o espaço entre todos os caracteres em um bloco de texto. Valores positivos adicionam espaço ao lado direito de cada glifo (no modo de escrita da esquerda para a direita) e valores negativos reduzem a largura da caixa de glifo , fazendo com que as letras se sobreponham e até mesmo se movam para o outro lado.

O letter-spacing aceita unidades de comprimento e porcentagem (em relação ao tamanho da fonte). É animável e, como vimos antes, os valores negativos podem reduzi-lo ou revertê-lo. Que é algo que podemos usar.

Sobreposição e separação de letras

É muito fácil sobrepor completamente os caracteres como ponto de partida e definir color para transparent para ocultá-lo visualmente.

###PRE_9b65f9b7fbe5ac420f2920300a464dba###

A partir daí, podemos revelar o texto animando esse valor letter-spacing para um valor positivo e atualizando o valor color para um valor visível, como quando um a caixa de seleção é :checked:

###PRE_b0e7422d403f0ed5a1fca3d6240403f0###

Nota: A unidade CSS ch é um comprimento relativo representando a largura do glifo zero (0).

Os rótulos vão do negativo letter-spacing para espaçamento normal e o color é atualizado para black. Ambas as mudanças acontecem em transition.

O segundo e o terceiro rótulos recebem alinhamentos de texto central e direito e, portanto, quando o espaçamento negativo entre letras é aplicado, eles se agrupam na posição de alinhamento fornecida, centro e direita, respectivamente. Quando letter``-``spacing vai de negativo para zero (ou qualquer valor positivo), as letras se separam da mesma posição de alinhamento.

Assim, obtemos um efeito de revelação de texto! Vejamos mais alguns.

Mostrando e ocultando texto

Confira isso. Podemos alternar um rótulo de caixa de seleção como um toque divertido e interativo na interface do usuário:

###PRE_f0c1f28f69c15da4f2704fa893491060###

###PRE_71204dfe173cbf1667099480327bb1e4###

Quando a caixa está marcada, um valor negativo letter-spacing (-2ch) e text-indent valor (-1.5ch) é usado no primeiro <span> para deslizá-lo para fora da caixa do contêiner. Usamos overflow: clip para ocultar completamente o texto.

Ao mesmo tempo, o texto no segundo <span> texto passa de um valor letter-spacing de -1ch a 0ch, que o revela. Para ocultar esse texto sobreposto em -1ch, foi fornecida uma cor transparent que virou para black quando a caixa de seleção está marcada.

Usando com outro estilo de caixa de glifo

Aqui está outra divertida. Podemos começar com uma sigla que revela o texto completo ao passar o mouse. Novamente, temos recursos existentes para nos ajudar a conseguir isso, incluindo ::first-letter e ::first-line .

Começaremos com esta marcação:

###PRE_f2456db45e8a41a12d4318a42d533b9d###

###PRE_c5ff25eadff0d7f780196ec7f524c1df###

Cada palavra na sigla UNICEF inicialmente tem letter-spacing: -1ch para reduzir o texto e color: transparent para manter o texto reduzido oculto, exceto o ::first-letter que tem color: black portanto permanece visível mesmo que o restante do texto esteja empilhado abaixo dele.

Agora, podemos direcionar a imagem em :hover e selecionar o texto inteiro para que o valor letter-spacing para cada palavra diminua para 0ch e color: black é aplicado, mostrando o que resta das palavras:

O que mais podemos fazer?

Não sei! Mas é aí que você entra. Obviamente, um hipotético seletor ::nth-letter seria incrível para todos os tipos de efeitos de texto. Mas é legal que possamos criar alguma aparência disso hoje com recursos existentes, como letter-spacing, ::first-letter, e ::first-line.

O que você pode inventar sabendo que temos essas restrições?

Revelando texto com espaçamento entre letras CSS originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.