Texturizando fontes

Muito pode ser feito com fontes padrão da web e propriedades CSS como font-weight ou letter-spacing, mas agora muitas propriedades CSS3 podem ser usadas para oferecer ainda mais controle. Os navegadores WebKit oferecem uma pouco conhecida propriedade que pode ser aplicada ao texto, chamada mask-image. Ela pode ser usada para incluir pequenas texturas aos textos de título.

O uso desta técnica com textos de parágrafo prejudicaria a legibilidade, mas quando aplicada a uma fonte de tamanho grande é possível criar um efeito interessante.

Neste tutorial vamos ver a texturização de fontes a partir do zero – começando com HTML e CSS básico, criando uma textura semi-transparente no Photoshop e implementando no título de uma página web. Terminaremos ao acrescentar pouco de CSS e JavaScript.

O design para essa página foi inspirado nas cores e fontes encontradas em carros esportivos americanos dos anos 70, em especial o Boss 302 Mustang.

Passo 1: Definir o HTML e CSS

Vamos começar criando um simples index.html

texturizando-fontes1

Agora vamos adicionar o estilo e layout básicos com o arquivo style.css.

texturizando-fontes2

Temos então um texto em cinza escuro (#222) sobre um fundo laranja. Nesse caso, uma fonte sans-serif qualquer não dará certo, então usaremos a League Gothic. Abaixo está o CSS atualizado par ao body, h1, e a @fonte-face gerada pelo Font Squirrel (fontsquirrel.com):

texturizando-fontes3

Passo 2: Adicione textura via mask-image

É hora de abrir o Photoshop para criar uma textura PNG semitransparente para o texto. É importante lembrar que, quando uma imagem for usada como máscara vis CSS, onde houver transparência o texto será apagado. Sendo assim, queremos ter quantidades sutis de textura para garantir que o texto permaneça legível.

O arquivo PSD  foi feito:

  • A camada Background é simplesmente o preenchimento laranja.
  • A camada Texture – pre knockout foi usada para acrescentar um pouco de ruído por meio de brushes. Apesar desta camada não ser usada na exportação, foi incluída para ajudar a acompanhar o progresso.
  • A camada Texture – pre knockout foi duplicada e renomeada como Texture – used. Na paleta de estilos de camadas, o Fill Opacity foi ajustado para 0% e Knockout para Deep para ter transparência.

Agora vamos incluir o código da máscara da imagem no h1.

texturizando-fontes4

Pronto. Aquele texto plano e sem graça em uma caixa agora tem textura. E não se preocupe se o texto for maior que a imagem, pois como ela se repete automaticamente. Isso funciona apenas no WebKit, mas foram incluídos os prefixos de outros navegadores.

Passo 3 – Distorção vis CSS3

Os CSS Transforms estão ganhando suporte rapidamente entre os navegadores. Vamos colocar os códigos:

texturizando-fontes5

São vários estilos aplicados sem qualquer HTML extra, e não é difícil imaginar como usá-los em seu trabalho.

Passo 4 – Torne dimensionável via FitText.

Existe um grande obstáculo para redimensionar os títulos onde não se quer quebras de linha. É preciso torná-los dimensionáveis. Isso é possível com o FitText (fittextjs.com).

Para começar, vamos ajustar a largura do cabeçalho no CSS:

texturizando-fontes6

Agora que a largura será 80% da janela do browser, podemos carregar o jQuery e FitText, nessa ordem, no HTML:

texturizando-fontes7

O FitText precisa que ajustemos a compressão. quanto maior o número, maior compressão no tamanho da fonte. Aqui está o HTML final.

texturizando-fontes8

treinamento-webmaster.fw

 

Clique AQUI para baixar os arquivos usados nesse tutorial.

Artigo publicado na Revista W nº 138 pags. 62 a 64, da autoria de Trent Walton (www.trentwalton.com)

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.