[Resolvido] JQuery Texto em Gradiente!

[Eliseu M. 2]

E aí gente, beleza dnv? xD

Então, tô ficando viciado em plugins de JQuery e, como ainda é difícil uma pessoa sem conhecimento avançados de JS, HTML e CSS entender os tutoriais dos criadores, vou repassar outro, sobre textos em gradiente, segundo o site LABS.DRAGONINTERACTIVE.COM. Esses caras são mestres do webdesign, só merecem elogios.

 

Bom, vamos começar?? (Lembrando que é bom baixar e hospedar os scripts)

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 1

 

Incluir o JQuery:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 2

 

Incluir o script Rainbows (como chamado pelos criadores):

<script type="text/javascript" src="http://labs.dragoninteractive.com/lib/j/rainbows.js"></script>

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 3

 

Incluir o script de configuração:

<script>

rainbows.init({

selector: '.demo',

highlight: true,

shadow: true,

from: '#000000',

to: '#eeeee'

});

</script>

Em vermelho: a classe do elemento.

Em azul: cor de início do gradiente (de cima para baixo).

Em roxo: cor de fim do gradiente.

Obs.: os textos em negrito, podem ter valores tanto de true como de false.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 4

 

Incluir o CSS (para mexer nas cores da sombra, distância, etc.):

<style>
.rainbow {
	background: transparent;
	display: block;
	position: relative;
	height: 1px;
	overflow: hidden;
	z-index: 4;
	}

	.rainbow span {
		position: absolute;
		top: 0;
		left: -1px;
		display: block;
		xwhite-space: nowrap;
		}
	
	a .rainbow span { /* para dentro de elementos flutuantes */
		white-space: nowrap; 
		}

.rainbows-highlight {
	color: #ffffff !important;
		opacity: 0.5;
	display: block;
	position: absolute;
	top: 1px;
	left: 0px;
	z-index: 3;
	}

.rainbows-shadow {
	color: #ffffff !important;
	display:block;
	position: absolute;
	top: 1px;
	left: -1px; /* pode ser um ou dois, dependo dos graus de luz gloal, 90 ou 135 */
	z-index: 3;
		opacity: 0.9;
	}

.back .text .rainbows-shadow {
	color: #ffffff !important;
	opacity: 0.5;
	}
.rainbows-shadow {
	color: #ffffff !important;
	opacity: 0.9;
	}
</style>

Eu coloquei efeitos alpha em todas as classes. Vai fuçando nos valores até achar um estilo ao seu gosto.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 5

 

Inserindo num elemento com texto (por exemplo DIV):

 

<div class="demo"><font size="10" face="Verdana"><b>iMasters!</b></font></div>

 

EXEMPLOS: http://labs.dragoninteractive.com/rainbows_demo.php

 

Bom galera, é isso, muito simples. Eu não testei em todos navegadores, mas no Google Chrome pega :D Até mais, dúvidas mandem PM ou e-mail!

 

Créditos: DragonInteractive, JQuery, SquareFree.