Tableless - Desenvolvimento inteligente com Padrões Web

23/02/2012
CSS

CSS3 – Texturizando textos

Com funcionalidades que apoiam resultados visuais exclusivamente à folhas de estilo, o CSS3 está sendo criado para otimizar fluxo e ritmo de trabalho, além de aproximar ainda mais Designers de Interfaces à profissionais Front-End. Com vocês, a texturização de textos via CSS3.

Por

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:

1
2
3
4
5
<body>
   <header>
      <h1>Wood</h1>
   </header>
</body>

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

1
2
3
4
5
6
7
8
body{background:#fff}
h1{      
font:72px bold "Arial Black", Gadget, sans-serif;     
color:#930;     
text-transform:uppercase;     
border:solid 20px #930;     
padding:10px;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
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);
}

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!

;)

Por Thaiana Poplade

Graduada em Comunicação Social habilitada à Produção em Mídia Digital, atualmente busco as oportunidades nos negócios on-line, a constante evolução no desenvolvimento web e o pote de ouro ao fim do arco-íris. Sou curitibana, viciada em internet, filmes, música e conversas intermináveis. @thaipoplade

http://www.thaianapoplade.com/blog

Veja os outros posts de

  • http://twitter.com/denerpatrick Dener Patrick

    Tem que acertar o “src” das imagens =) Algumas estão com acentuação.  

  • http://www.udgwebdev.com/ Caio Ribeiro Pereira

    Nossa mais uma magia negra que o CSS3 possui!! Se não o maldito IE não dominasse o mundo ou se ele adotasse desde o IE7 CSS3 o mundo do desenvolvimento web será perfeito em todos os casos! 

    excelente post!

  • Robson Sobral

    Considerando que a propriedade “mask-image” não é parte da especificação do CSS3, não deveria ser divulgada. Ninguém sabe se essa propriedade continuará desse jeito ou sequer se será implementada em algum outro navegador.

    Foi assim que a encrenca com as propriedades prefixadas começou: divulgando propriedades apenas do webkit. Sugiro a leitura de http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/

  • André Vieira

    Apoiado!

  • Rafael

    Show de bola!

  • Br2msi

    Apoiado!

    Ainda digo um pouco mais, sites que são referência para muita gente, e que tem objetivo de ensinar boas práticas, principalmente estes devem se preocupar com o que divulgam =/

    Tem gente que lê os artigos aqui e fica só por aqui…

  • thaianalp

    Robson
    e Br2msi, compreendo a preocupação de vocês e concordo com ela. Também
    temos o receio que nem tudo o que tem sido divulgado seja levado à
    outros browsers, etc.
    Por isso, que ao escrever o artigo não fiz uso
    de hack’s ou scripts que pudessem implantar a funcionalidade – tão
    incerta – nos demais navegadores e deixo claro em quais deles os testes
    acusaram resultado positivo.

    Ainda assim, mesmo que não haja suporte, nem faça parte do
    webstandars, é perfeitamente aplicável à projetos que sejam visualizados
    nos navegadores mencionados.

    Nosso trabalho aqui é trazer a novidade, possibilidades e reafirmar
    as regulamentações. Na verdade não estamos ensinando diretamente
    ninguém, mas sim incentivando a curiosidade de todos a conhecer e ter o
    discernimento de qual melhor maneira aplicar o conhecimento adquirido.

    ;)

  • Robson Sobral

    Thaiana, sinto muito, mas a sua postura é errada. Você pode querer divulgar novidades, mas não deve incentivar erros. Mask-image não é parte da especificação aprovada nem em estudo. Não é uma iniciativa de nenhuma das equipes do CSS3, mas particular da equipe do webkit.

    Foi assim que a encrenca dos prefixos começou: divulgando funcionalidades do webkit. Você poderia dizer que é algo exclusivo do webkit e discutir o que acha da idéia, como algumas pessoas tem feito com as propostas do Trident, para o IE10. Só, por favor, não dê a entender que é algo válido, não incentive ninguém a usar. Deixe tudo claro.

    Sugiro que confira o status dos diversos módulos do CSS3: http://www.w3.org/Style/CSS/current-work

    Por favor, não me leve a mal. Não tenho intenção de implicar contigo, mas de ver uma web melhor.

    P.S.: Só vi sua resposta por acaso. Não recebi notificação e não sei se receberei uma possível resposta. Se não receber, sinta-se a vontade para me escrever.

  • http://twitter.com/wadrigues Wagner Rodrigues

    Essa de posar de gatão com as “especificações W3C” debaixo do braço chega a ser chato em alguns. A autora passou uma função nova suportada por alguns navegadores, a título de conhecimento, qual o problema nisso? Você pode muito bem usar um recurso desse num sistema intranet onde há uma padronização de browsers por exemplo, sem prejuízo à semântica ou acessibilidade, apenas como um recurso visual diferenciado. 

    Não sou contra os padrões web, são necessários e fundamentais para o crescimento da web. Mas tem gente que não pode se deparar com uma regra que já quer criar um igreja.

    Thaiana, parabéns pelo artigo. Os desenvolvedores de bom senso saberão fazer proveito da informação, sem “xiliques”.

  • Fer

    E como dito no artigo, pode muito bem ser usado para sites para Tablets, por exemplo, onde o Safari domina! = )

  • Julio Cezar Giacobbo

    Olá, em meus últimos projetos resolvi começar a usar o CSS3 e estou adorando. Tem me proporcionado um ganho de tempo enorme em relação a sombras e a arrendodamento dos cantos de botões e divs.Mas é uma pena os browsers não aceitem todas as propriedades ainda.

    Valeu pelo post ThaianaAbs,Julio Giacobbohttp:\www.stocksites.com.br

  • Sandro Costa

    Na internet é assim, 1 ajuda, compartilha, e etc…. vem meia duzia de nego sem noção pra falar FEZES, até parece que trabalha dentro da W3C… O que precisava ser PADRONIZADO, é a mente de algumas pessoas que não podem ver um campo em branco na net escrito “POST” OU COMMENT” pa cabaaaa

  • Miriam Dias

    Sempre existe os q não pensam “fora da caixa”… Lamentável