Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Anderson Narciso

Tutorial como fazer um Gradient, luz ou sobra em textos sem imagem&#33

Por , em Javascript

Recommended Posts

Anderson Narciso    3

Anderson Narciso
Postado

Olá pessoal tudo bem? Espero que sim.

 

Em meus pulos de para-quedas pela internet, acabei encontrando a algum tempo atrás um tutorial muito bacana utilizando JQuery e a biblioteca Rainbows do pessoal da Dragon Interactive, mas só agora que fui metido a tentar ler e entender e achei muito bom.

 

O tutorial é interessante, espero que gostei.

 

Bom, vamos la!

 

Link para os arquivos clique aqui!

 

O script é geralmente aplicado a blocos de texto, como nos cabeçalhos. É mais compatível em um recipiente com largura fixa. Para começar, configurar os estilos de fonte e posicionamento por meio de regras CSS como faria normalmente.

 

Em primeiro lugar, em algum lugar do <head>, vamos chamar o arquivo jQuery e o script Rainbows. Para obter mais informações sobre este assunto, consulte a documentação do jQuery o/.

 

<script src="biblioteca/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="biblioteca/js/rainbows.js" type="text/javascript"></script>

Em seguida adicionamos algum tipo de classe ou de id informando elementos alvos que você quer dar gradientes, luzes ou sombras. Tenha em mente que isto só funciona no texto. Se você está tentando fazer um gradiente normal como um fundo para destacar o texto por cima, é recomendado porque não atrabalha em nada.

 

O gradiente precisa de dois valores de cor hexadecimal (faixa 6 dígitos, não abreviar a ffffff para fff ou o vai virar um pepino \o\). Seja criativo na escolha, você pode criar ilusões, como o texto tornar-se transparente (com uma semelhante à cor de fundo) ou metálicos (do branco para um tom acinzentado é o padrão).

 

Também é possível dar destaques nas sombras.

 

<script type="text/javascript">

rainbows.init({
		selector: 'seletor do texto aqui - por exemplo um h2 ou #titulo',
		highlight: true ou false,
		shadow: true ou false,
		from: '#código hexadecimal da parte de cima do gradiente vai aqui',
		to: '# código hexadecimal da parte de baixo do gradiente vai aqui'
	});
</script>

Sombras

 

Ao contrário de quando utilizamos o Photoshop, o tamanho da sombra não pode ser controlado. A opacidade, porém, pode e deve ser ajustada dependendo da direção que ela está seguindo. Uma sólido e negra pode ser muito forte.

 

Destaques

 

Parecido com sombras, o destaque usa o mesmo conceito, mas em outra direção e com o branco, em vez de preto. Funciona melhor em textos grandes, não tão bem em um texto menor, uma vez ao contrário da sombra que ele usa uma ilusão e amplia o texto, cerca de 1px. Se esta é uma pequena porcentagem do tamanho da fonte, não é perceptível e pode ficar agradável.

 

Coloração

 

Por padrão os destaques são brancos e as sombras são negras. Isso pode ser alterado no arquivo CSS para outros efeitos como a inserção de texto, que ja vamos ver.

 

Por padrão, adicionando o script, ele não vai processa nada de arco-íris com uma classe, ele lhe dá o efeito padrão. Novas instâncias podem ser criadas com os seguintes parâmetros, que podem ser adicionados no fim do arquivo arco-íris ou em um arquivo separado (recomendado), ou incorporado no documento dentro de uma tag <script> (fica de sua vontade).

 

<script type="text/javascript">

rainbows.init({
		selector: '.sua_clsse_aqui',
		highlight: true,
		shadow: true,
		from: '#555555',
		to: '#000000'
	});
</script>

A cor no topo é o 'de' e as cores no fundo é a 'a'. Tenha em mente que se aplica à altura do elemento, portanto, o gradiente pode não ser tão forte, especialmente em linha de grandes alturas ou texto, sem descendentes.

 

A ordem das declarações não é importante, apenas certifique-se de não colocar uma vírgula após o último atributo ou o vai gerar pepino /o/, além de que vai falhar o JavaScript no IE (mas não será perceptível em outros navegadores).

 

Por padrão. o inicio d Rainbows está no arquivo JavaScript e podem ser alterados ou removidos, se necessário. Alternativamente, você pode apenas criar novas instâncias, dependendo de qual elemento e estilo que você precisa.

 

Adicione esta CSS para o seu estilo ou a sua estilizaçção própria incluído no final. Divida ele certinho para não se perder, ou ensira com php, do jeito que achar melhor.

 

<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 { /* Por dentro de elementos flutuantes. */
		white-space: nowrap; 
		}

.rainbows-highlight {
	color: #fff !important;
	display: block;
	position: absolute;
	top: -1px;
	left: 0px;
	z-index: 2;
	}

.rainbows-shadow {
	color: #000 !important;
	display:block;
	position: absolute;
	top: 1px;
	left: 2px; /*pode ser um ou dois, dependendo de 90 ou 135 graus de luz global */
	z-index: 3;
	}

.back .text .rainbows-shadow {
	color: #fff !important;
	opacity: 0.3;
	}
</style>

Basicamente esta CSS dá a denominação necessárias para os elementos gerados pelo JavaScript. Sem ele você só tem um monte de texto repetido, não como moda.

Por padrão, as sombras são a pretas e destaques são em branco. Eles são escalonados um pixel vertical e horizontalmente, com base no que está no arquivo rainbows.css. Isso pode ser mudado.

 

Insere no texto

 

<style>
.rainbows-shadow {
	color: #fff !important;
	opacity: 0.7;
	}
</style>

Fazer a sombra branca e se livrar do destaque ou alterá-lo para uma sombra, você pode facilmente fazer a inserção de texto tradicional. Configuração da sombra para branco irá gerar um truque, ams recomendo reduzir a opacidade.

 

Para Impressão

 

Como isso funciona através da clonagem, se a página se destina a ser impressa (por exemplo, em um artigo), você pode querer considerar a adição de um estilo de impressão. Nós vamos querer esconder todas as instâncias, como as sombras e destaques, e então mostrar apenas uma. E talvez mais preto em vez do branco ou o que quer.

 

<style>
.rainbow,.rainbow-highlight,.rainbow-shadow { display: none }

.rainbow-1 { display: block; color: #000; }
</style>

Não ponha isso em seu estilo normal, ou coisas ruins vão acontecer.

 

Isso é realmente tudo o que existe para o efeito!

 

Você pode baixar e começar a usá-lo, ou confira a demo para ver o que é possível. Se você está curioso para ver como foi feito, você pode querer ler o artigo (inglês) sobre o assunto direto no site da dragon interactive.

 

Se algo não estiver claro, você tiver dúvidas ou quiser apenas para mostrar sua aplicação, deixe um comentário na area de discussão

 

Os arquivos do link tem possuim tudo isso que foi dito.

 

Espero que tenham gostado :)

Até a próxima!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito