Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Criando efeito gradiente

12-02-2008 08:50

Vou mostrar aqui uma forma de aplicar efeito gradiente sobre um texto usando png.

Para o efeito você deve criar uma imagem transparente, em png, com altura relativa ao seu texto.

Use o seguinte png para esse exemplo

Para salvar o gradiente, segure a tecla Ctrl e dê um click no link abaixo, vai abrir uma nova janela, só que é claro, não vai ver o gradiente porque ele é transparente.

Para vê-lo, pressione Ctrl+a que irá deixá-lo selecionado, em seguida, clique com o botão direito do mouse sobre ele e escolha: Salvar imagem como...

http://www.codigosnaweb.com/gradiente.png

Agora o código

<style type="text/css"> div { position: relative; font-family:arial; font-size:300%; color: black; } div span { background: url(fade.png) repeat-x; position: absolute; display: block; width: 100%; height: 100%; } </style> <div><span></span>GRADIENTE</div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado