Textos Gradientes com CSS
Jan 20, 2008 I Design.Texto Gradiente
O seu Amigo Designer decidiu que os titulos do Redesigner daquele portal de notícias tem que ter um Gradiente, Ele está Afim de Seguir as tendências Web2.0 e nos dias de hoje isso é normal, quem não está seguindo tendências não é mesmo!?
Mas vamos lá cabe a você agora a missão de conseguir todo esse estilo, de forma que os titulos sejam gerados de forma dinâmica e sem perde a acessibilidade, o que elimina de cara o uso de imagens, mesmo com aquele atributo alt, ae você pensa logo no seu amigo sIFR, que te salvou tantas vezes não é mesmo, mas calma agora existe um nova solução
O pessoal do WebDesignerWall recentemente publicou um artigo que mostra como criar um efeito de gradiente no seu texto com uma imagem PNG (só CSS, sem Javascript ou Flash, nem Indentação de Texto).
Tudo que você precisa é perde um pouco de semântica(Nada é perfeito, vamos lá sempre há um jeitinho pra você) aplicando uma tag <span> vazia no titulo e fazendo uma sobreposição de imagem usando a propriedade css position:absolute.
Segundo a WebDesigner Wall essa técnica foi testada na maioria dos browsers incluindo: Firefox, Safari, Opera e Internet Explorer 6(é Claro com o Hack lá do PNG Transparente,Ou você esqueceu a razão número 101 porquê você ama o ie).
Logo Abaixo o Link para o Artigo, Que Inclui os Arquivos para Download e a Técnica Explicada Linha a Linha - Inglês.
Técnica de Texto Gradiente Com Css - Inclui o Jeitinho pra Quem é Amante da Semântica
Demostração do Efeito na Prática