Aguarde...

19 de dezembro de 2019

Recriar o logotipo ‘His Dark Materials’ em CSS

Recriar o logotipo ‘His Dark Materials’ em CSS

Adoro a nova adaptação da BBC da trilogia de romances His Dark Materials, de Philip Pullman . Há também um design gráfico bastante agradável para apreciar. Eu sou um otário por uma bela sequência de títulos (eu preciso assistir os créditos de abertura de Game of Thrones na íntegra, todas as vezes), e este certamente se encaixa na conta, bem como no logotipo impressionante. Depois de assistir a um episódio recente, pensei em recriar esse logotipo com CSS!

Tipografia

Embora seja essencialmente um logotipo em texto sem formatação, há muito o que descompactar quando se trata de construí-lo para a web. O logotipo consiste em dois pesos de fonte e, principalmente, é “fraturado” em duas partes por uma barra diagonal no meio. O texto à esquerda da fratura consiste em um peso regular da fonte, com exceção da primeira palavra (“His”). O texto à direita e a primeira palavra usam uma variante em negrito da mesma fonte.

Não sei qual é a fonte real usada no logotipo, mas algumas pessoas no Twitter sugeriram que pode ser Neutraface da House Industries. Optei por pagar US $ 125 com o objetivo de uma demonstração divertida, por isso substituí o Josefin Sans, disponível no Google Fonts.

HTML

Eu queria criar o logotipo de uma maneira que garantisse que ele funcionasse em qualquer plano de fundo – ou seja, o plano de fundo seria visível através das áreas transparentes do logotipo -, portanto, esconder coisas com gradientes de preto ou pseudo elementos era um não-não .

Embora este seja apenas um exercício divertido, eu queria evitar duplicar o HTML, se possível. Um caminho (possivelmente mais fácil) teria sido usar dois períodos com o mesmo texto dentro e <h1>, assim:

<h1>
  <span>His Dark Materials</span>
  <span aria-hidden="true">His Dark Materials</span>
</h1>

Eu poderia então usar position: absoluteo segundo item para sobrepor ao primeiro e modelá-lo de forma independente. Não há nada inerentemente errado nisso – aria-hiddengarante que o texto não seja lido duas vezes por um leitor de tela -, mas eu preferi mantê-lo em um único elemento de texto, se pudesse. Decidi fazer uso de pseudo-elementos ( ::before::after) e usar a contentpropriedade.

Podemos usar propriedades personalizadas de CSS para duplicar o conteúdo do texto nos pseudo-elementos:

<h1 style="--text: 'His Dark Materials'">His Dark Materials</h1>
h1::before,
h1::after {
  content: var(--text);
}

Isso nos dá (efetivamente) mais duas “cópias” do nosso texto para trabalhar. Coloquei isso em vírgulas invertidas, porque na verdade não são cópias do HTML, apenas o conteúdo do texto – e não são selecionáveis ​​ou, por esse motivo, acessíveis por conta própria. Mas tudo bem, porque nosso conteúdo de texto ainda existe em formato acessível dentro do <h1>.

Se os posicionarmos absolutamente, eles irão sobrepor o cabeçalho original e podemos modelá-los individualmente.

h1::before,
h1::after {
  content: var(--text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  z-index: -1;
}

CSS

Agora podemos usar clip-path()os pseudo elementos para criar o efeito de fratura:

h1 {
  --high: 80%;
  --low: 20%;
  --gap: 0.5rem;
}

h1::after {
  -webkit-clip-path: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
  clip-path: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
}

h1::before {
  font-weight: 400;
  -webkit-clip-path: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );
  clip-path: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );
}

::beforepseudo-elemento é cortado na diagonal para que apenas a parte esquerda fique visível e ::afteré cortado para que o reverso seja visível, permitindo um pequeno espaço entre eles (o que criará o efeito de barra). Como alguns navegadores ainda exigem que o caminho do clipe seja prefixado, podemos aproveitar propriedades personalizadas para reduzir nosso código geral:

h1 {
  --high: 80%;
  --low: 20%;
  --gap: 0.5rem;

  --clipLeft: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );

  --clipRight: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
}

h1::before {
  font-weight: 400;
  -webkit-clip-path: var(--clipLeft);
  clip-path: var(--clipLeft);
}

h1::after {
  -webkit-clip-path: var(--clipRight);
  clip-path: var(--clipRight);
}

`path ()` agora é suportado como uma propriedade de caminho de clipe no Firefox, o que permite uma sintaxe de caminho SVG. Não sei se isso nos ajudaria aqui, pois ainda não tive a chance de brincar.

O texto original ainda está visível sob os pseudo elementos cortados, por isso estou definindo a cor como transparente. Os pseudo-elementos também têm um índice z menor – assim, o texto ainda pode ser selecionado, mas o visualizador verá apenas o texto cortado abaixo.

h1 {
  color: transparent;
}

Por fim, enquanto a maior parte do texto à esquerda da barra está no peso normal da fonte, a primeira palavra precisa estar em negrito. Infelizmente, não podemos estilizar isso como uma entidade separada content, portanto, ele precisa de um pouco de hackeamento, além de alterar a marcação para permitir a seleção da primeira palavra (na ausência de um ::first-wordseletor!):

<h1 style="--text: 'His Dark Materials'"><span>His</span> Dark Materials</h1>

Agora posso tornar o texto da primeira palavra visível e definir o peso da fonte para negrito, o que oculta efetivamente o conteúdo do pseudo-elemento correspondente:

h1 > span {
  font-weight: 700;
  color: white;
}

Não estou interessado nessa solução, pois ela é muito limitada. Se tivéssemos um caso em que a primeira palavra precisasse ser estilizada em uma fonte diferente ou com um peso menor, ocultar o conteúdo do pseudo-elemento não funcionaria. Mas é bom o suficiente para o nosso propósito neste momento.

Confira a demonstração completa:

Postado em Blog
Escreva um comentário