Fontes com layers, no html

Tudo começou com o post do Wagnão… então eu fiquei pensando, se dá pra fazer no illustrator, será que dá pra fazer a fonte com layers em html/css?

Dá. Não vai funcionar em todos os browsers, e mesmo assim não vai ficar 100% igual – afinal, estou usando algumas coisas que são muito novas –  mas dá sim.

O vídeo é longo, e a ‘transcrição’ está logo após o jump – também fiz um jsfiddle, que você pode ver aqui.

Estou usando o Textmate pra escrever o código, Codekit pra compilar o HAML e o SASS, e ainda recarregar o Safari 6 a cada modificação.

… o vídeo está em HD, se não der leitura, é só dar um ‘full screen’.

http://vimeo.com/46496580

Texto do vídeo:

Vou usar o Codekit para compilar o HAML e SASS, e atualizar o browser, conforme formos trabalhando – muito bom para tarefas como essa.

Primeiro vamos escrever o html. Estou usando HAML, que é um ‘pré-compilador’ de html, e ajuda a prevenir erros.

Html criado

Vamos usar o attribute data, que é uma novidade do html. Vamos usar para que possamos saber qual o conteúdo de cada item que vamos sombrear. O html é bem simples: h1 e h2 definem o tamanho da fonte.

A class .volume define a borda e as sombras. As outras classes definem alinhamento e posicionamento de cada item.

Estou usando fontes do typekit, por isso o javascript.

Agora o css. É aqui que começa a diversão. Estou usando SASS, que é um ‘pré-compilador’ de CSS, e ajuda bastante na hora de organizar o CSS.

Primeiro o fundo. Centralizando e colocando um gradiente.

Agora as fontes: Estou usando ‘proxima-nova’ do typekit.com

Ajustando o espaçamento.

Vou criar um ‘mixin’, que é uma função no sass, pra facilitar tudo

Agora vem a diversão:

Vamos duplicar o conteúdo de cada DIV usando o ‘data-type’ que criamos. Vamos adicionar este conteúdo antes do DIV dinamicamente, e posicioná-lo abaixo, para depois poder aplicar a borda e as sombras.

Pra entender melhor, eu vou tirar temporariamente os ajustes de posicionamento…

O :before adiciona um div antes do div, duplicando seu conteúdo, usando os dados do ‘data-type’

Arrumando agora o espaçamento

Agora a parte ‘casca’ Vamos criar um monte de sombras, deslocando cada uma delas para dar o efeito do volume.

De novo, vamos criar uma função, pra facilitar

A primeira sombra já aparece… agora vamos duplicar e andar com ela

Agora a sombra do outro lado.

Agora só mais uns ajustes

Pronto.

Dúvidas, perguntas?

twitter: @rvillas rvillas.com.br

Updater: rvillas