CSS3 – Texturizando textos

Com o uso da versão 3, já podemos tornar possível a criação de sombra em textos e boxes, arredondamento de bordas, múltiplos backgrounds, etc; objetivando reduzir o tempo de carregamento da página e estimulando o cuidado na utilização de códigos e textos limpos que servirão de comunicação para robôs de busca ou favorecerão a acessibilidade

Com o uso da versão 3, já podemos tornar possível a criação de sombra em textos e boxes, arredondamento de bordas, múltiplos backgrounds, etc; objetivando reduzir o tempo de carregamento da página e estimulando o cuidado na utilização de códigos e textos limpos que servirão de comunicação para robôs de busca ou favorecerão a acessibilidade do website.

A exemplo de mais uma das vantagens do CSS3, vamos conhecer melhor como aplicar uma imagem de textura ao preenchimento de um texto, utilizando apenas declarações “fonts” na folha de estilo.

Vale ressaltar que o exemplo abaixo funcionará, neste momento, exclusivamente no Chrome e no Safari em suas últimas versões. E antes que você pense: “então, não poderei aplicar aos meus projetos…”, te tranquilizo; talvez você não possa aplicar aos projetos para web em desktop e diversos tipos de outros navegadores, mas você poderá aplicar a seus projetos mobile ou para tablets.  Pense nisso! 😉

Então, vamos lá!

Crie um novo documento html com a seguinte marcação:

[cc lang=”css”]

Após, adicione as características de estilo (uso aqui a aplicação incorporada para facilitar os testes):

[cc lang=”css”]body{background:#fff}

h1{      

font:72px bold “Arial Black”, Gadget, sans-serif;     

color:#930;     

text-transform:uppercase;     

border:solid 20px #930;     

padding:10px;

}[/cc]

A princípio, seu texto está assim:

Agora, vamos abrir um dos editores de imagem – Photoshop ou Fireworks – e criar uma imagem PNG com a nossa textura. Em meu teste inicial, eu utilizei uma imagem de textura pronta, mas o resultado não ficou como esperado, então aconselho colocar seus dotes de criação em atividade e realmente criar a textura.

Abaixo uma breve explicação da textura que criei no Fireworks.

Utilizando o Fireworks, crie um novo documento (1900×200), selecione a ferramenta pincel, depois aplique as seguintes características (barra de ferramentas inferior): Tip size – 300 | Stroke Category – Pencil Pixel Soft | Texture – Line vertical e Burlap.

Na hora de escolher a melhor forma de exportar sua imagem, o cuidado com o peso em kb continua valendo. Em se tratando de PNG, é muito fácil um simples arquivo ficar com mais de 500kb, por isso, em meus testes observei que exportando em PNG8 você vai ter um arquivo de 52kb com uma qualidade visual menor, mas que dependendo do estilo de textura é perfeitamente aplicável, ou exportando em PNG32 você preza por uma qualidade visual melhor, mas ao custo de um arquivo de 200kb. A escolha vai depender da velocidade de conexão ao qual você vai estabelecer para esta aplicação e do resultado visual que você julgar aceitável.

Criada a imagem, vamos incluir ao style do texto o atributo “mask-image” que definem a textura no texto.

[cc lang=”css”]h1{      

font:72px bold “Arial Black”, Gadget, sans-serif;     

color:#930;

text-transform:uppercase;     

border:solid 20px #930;     

padding:10px;     

-webkit-mask-image: url(text2.png);

-o-mask-image: url(text2.png);

-moz-mask-image: url(text2.png);

mask-image: url(text2.png);

}[/cc]

Reload no navegador… e voilá! Um texto com um preenchimento texturizado.

Daí para frente você pode incrementar utilizando font-face, text-shadow ou outras texturas. Fica a critério da sua criatividade.

Até a próxima!

😉

Deixe um comentário

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