Gradient – Jquery Plugin

Jquery-Plugins
20, maio 2009

Javascript é realmente uma linguagem de programação muito poderosa. Não falo isso só por ser apaixonado pela linguagem, mas sim por diariamente programar Javascript e ver o seu poder.
Frameworks ajudam claro, mas não se esqueçam que no fundo é tudo o mais puro e belo Javascript.
Na lista do Jquery que participo, seguido vejo algumas pessoas equivocadamente confundindo um pouco isso, mas isso fica pra um próximo Post.

O que vou abordar neste Post é um plugin muito bom desenvolvido pelo Brandon Aaron.
Pra quem não conhece, esse cara mora lá pelas bandas do Texas e é um dos principais membros do time de desenvolvedores do Jquery.

A idéia básica do plugin é criar um efeito de Gradient(vai de uma cor para outra) em um elemento HTML. Isso mesmo! Nada de Photoshop. O/
O que precisamos:  obviamente o Jquery, e o plugin Gradient.

Mas dessa vez vou um pouco mais além…
O plugin nos permite especificar o código RGB inicial, o o código RGB final e ainda a direção do Gradient(vertical ou horizontal).
Vamos ver o código pra entender melhor:

$('#meu_elemento').gradient({
from:      'ffffff',
to:        '000000',
direction: 'vertical';
});

Neste exemplo o efeito Gradient será aplicado no elemento com o ID meu_elemento, começando de branco e indo até preto com direção vertical.
Simples !

Bom, mas como eu disse acima, vamos um pouco mais além.  Se precisamos passar valores RGB para o plugin, então quem sabe podemos usar um outro plugin bem conhecido e muito bom também, o Color Picker.
Preparei um script onde uso as funcionalidades dos  2 plugins. Vejam abaixo como ficou. E novamente vejam o poder do Javascript:

Veja aqui o exemplo: http://jaydson.org/code/jquery/plugins/gradient/index.html

Espero que tenham gostado e que seja útil para alguma Aplicação de vocês.
Qualquer dúvida comentem ai.
Abraço, e até a próxima.

Minha Avaliação: Nota 8.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+

Site oficial do Plugin: http://brandonaaron.net/code

Download

Download

7 Respostas para “Gradient – Jquery Plugin”

  1. Robson Almeida

    No Chrome acontece o mesmo quando seleciono a cor…

    Mas ficou muito bom baguan keliê!

    Parabéns!

    Responder

Deixar uma Resposta