Inove com novos títulos

Nos exemplos que serão apresentados, as fontes são baseadas em texto HTML padrão, estilizadas usando CSS e com uma quantidade mínima de imagens.

Texto padrão – Este é ponto de partida para todos os exemplos deste tutorial. Sobre o código de marcação, este é o primeiro nível do título dentro de um elemento DIV. O CSS define a família de fonte como Arial, com o line-height e o font-size configurados com 120px.

inove1

Componentes de imagens – Dentro da pasta images, existem sete itens decorativos já preparados para uso, embora nenhuma da simagens seja da fonte em si – o texto nesses exemplos serão sempre criados usando HTML. A maioria das imagens são PNG.

Borda Vermelha – Agora uma borda vermelha de 300px é adicionada na parte inferior do título. Uma borda inferior normalmente fica abaixo da linha base, mas é possível deixa-la acima, juntamente com o título, apenas reduzindo o valor do line-height (no caso, para 81px).

inove2

inove3

Refinar e posicionar – A fonte está muito espaçada. Adicione um valor negativo ao letter-spacing (-10px). Um fundo simulando uma tinta jogada um uma parede é adicionado para conseguir mais interesse visual e adicionar um espaço acima e à esquerda do texto.

inove4

inove5

Um segundo fundo – Com o fundo em formato PNG, uma transparência pode ser adicionada, definindo um container para o título, Neste caso, o estilo pop é acentuado. E devido aos métodos utilizados, tanto a fonte como as imagens podem ser facilmente editadas.

inove6

inove7

Título desgastado – Para o segundo exemplo, um título com o visual desgastado será criado. A fonte usada é Impact, do tipo normal com 160 px. O texto foi deixado todo em maiúsculas usando a propriedade Text-Transform.

inove8

inove9

O efeito – Uma vez que o efeito desgastado deverá ficar sobre o texto, um PNG é colocado dentro do primeiro nível do título. No CSS, o efeito é definido como elemento de bloco e com uma imagem superior negativa igual a altura da imagem, puxando para frente do texto.

inove10

HTML

 

 

inove11

CSS

inove12

As dimensões – Ao configurar o fundo do título com a cor preta, os espaços na imagem são mais facilmente identificados. Com a imagem sendo exibida com um elemento de bloco, o conteúdo do título agora se estende pela imagem e não mais pelo texto.

inove13

HTML

inove14

CSS

inove15

Largura – Para que a largura dos títulos realmente fique próxima do conteúdo, é definido um valor width e pixels via CSS e a propriedade overflow recebe valor hidden. Note que o antialiasing produz variações na largura em diferentes navegadores. Ajustes serão necessários.inove16

HTML

inove17

CSS

inove18

Outros cortes – Ao trabalhar com fontes, é comum cortar as extremidades superior e inferior do texto. Para fazer esse efeito com CSS, o valor height deverá ter 100px, acompanhado por um valor de line-height alterado, o que resultará em um texto recortado.

inove19

HTML

inove20

CSS

inove21

Edição rápida – Como a fonte não é baseada em imagens, sua cor e conteúdo podem ser alterados com extrema rapidez e o efeito desgastado pode ser usado em múltiplas páginas (assumindo, claro, que a imagem desgastada seja larga o suficiente para todos os seus strings de texto).

inove22

HTML

inove23

CSS

inove24

Hora dos testes – Já vimos como reduzir o espaçamento do texto, mas agora vamos um pouco mais além. Na imagem abaixo, o texto vermelho em maiúsculas teve seu espaçamento reduzido um pouco. Adicionando o valor -6px ao letter-spacing.

inove25

HTML

inove26

CSS

inove27

Texto Sobreposto – Abaixo, o valor letter-spacing foi reduzido ainda mais, para -20px. Isso deixou os caracteres ligeiramente sobrepostos, fazendo com que as letras se fundissem.

inove28

HTML

inove29

CSS

inove30

Adicione o fundo – Algumas linhas horizontais serão adicionadas ao fundo para conseguir um título que prenda a atenção. No entanto, a legibilidade ficará um pouco comprometida.

inove31

HTML

inove32

CSS

inove33

Títulos em duas linhas – Para posicionar as palavras, foi definido um container com largura estreita. Porém, cada palavra poderá ser um elemento de bloco. Para facilitar, cada palavra está envolvida em um elemento span com um valor de classe específico.

inove34

HTML

inove35

CSS

inove36

Melhore o posicionamento – O fundo do container recebe a cor preta e o seu conteúdo, a cor branca e um pixel de padding é adicionado. Os elementos spans são estilizados com uma largura de 450px, padding de 20px e definidos como elementos de bloco.

inove37

HTML

inove38

CSS

inove39

Adicione imagens – Agora, cada elemento span com valores de classes individuais permite cores distintas e um fundo deve ser definido para cada uma delas: o topo tem um texto preto com um fundo branco, com um efeito “splat” preto. Na parte de baixo, acontece o contrário. Note que o padding de um pixel funciona com uma borda.

inove40

HTML

inove41

CSS

inove42

O último efeito – Veja como as imagens podem evitar que os componentes da página acabem como boxes – o efeito splat é aplicado como fundo do container e com padding que posiciona o título (com um fundo colorido) para que ele fique à esquerda do box.

inove43

HTML

inove44

CSS

inove45

Ajustes – Muitas vezes, valores de line-height precisam de ajustes e a largura dos caracteres podem mudar em diferentes navegadores, devido ao antialiasing. Além disso, o IE6 precisa de correções para trabalhar com PNGs.

 

quatropassos-pq

 

Para fazer o download dos arquivos desse tutorial, clique AQUI.

Tutorial extraído da revista W nº 103, pgs. 62 a 64; artigo de Craig Grannel para a revista Net

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 *