Image Image Image Image Image
Scroll to Top

Topo

ie

20

dez
2011

Sem Comentários

Em Blog
CSS
JavaScript

Por Allison

Javascript para fazer degrade/gradiente

Em 20, dez 2011 | Sem Comentários | Em Blog, CSS, JavaScript | Por Allison

Cada vez que eu vejo um layout com algum tipo de degrade chega a me dar coceira, me vejo recordando um png em milhares de pequenos pedacinhos para poder fazer os gradientes pq os navegadores ainda não implementaram o código de gradiente do css3, como a minha vida seria mais fácil.

Se funcionasse via css seria somente fazer algo assim:

.div_qualquer {
background: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#f3f3f3));
background: -moz-linear-gradient(top,  #dfdfdf,  #f3f3f3);
}

Mas isto exclui o IE, e é bem difícil explicar aos clientes.

Outra forma é recortar uma imagem em 1px de largura ou altura, deixar ela bem comprida ou larga e usar ela como bg e replicar ela um montão de vezes, assim:

.div_qualquer {
background: url(images/background.png) top repeat-x;
}

Então pesquisando um pouco me surgiu uma opção usando jQuery muito simples que faz isto extremamente bem. Escrito pelo grande Brandon Aaron (contribuidor do jQuery) e fez o jquery-gradient, que de uma forma bem simples pode criar os gradientes para vc, mas ou menos desta forma:

<script type="text/javascript">
// <![CDATA[
    $(document).ready(function(){
         $('.div_qualquer').gradient({ from: 'dfdfdf', to: 'f3f3f3' });
    });
// ]]>
</script>

O que o script faz é criar um bando de divs de 1px diminuindo as cores aos pouquinhos para fazer o degrade linear. Realmente funciona bem para pequenos objetos, mas para objetos muito grandes pode ficar muito pesado e até travar o browser.

Fonte: Rafael Cirolini/NerdHead

Tags | , , , , ,

12

nov
2011

Sem Comentários

Em Blog

Por Allison

JQuery 1.7

Em 12, nov 2011 | Sem Comentários | Em Blog | Por Allison

A última versão do framework JavaScript jQuery, versão 1.7, trás a maneira fácil para desenvolvimento com JavaScript. O uso da nova API é recomendada, porém os antigos métodos continuarão funcionando por um período mínimo.

Foi aprimorado o desempenho na manipulação de eventos delegados; esta mudança é baseada no exame do código cruzado do Code Search da Google e através de observação de como os seletores são usados. Onde foi otimizado os eventos delegados na metade do tempo em comparação ao jQuery 1.6.4.

Outras mudanças considerável foi um desempenho melhor para o HTML5 para os browsers IE6, IE7 e IE8, animações com comportamento mais intuitivo, suporte a API Asynchronus Module Definition (AMD API), melhorias ao jQuery.Deferred e a adição da função jQuery.isNumeric().

Os desenvolvedores também removeram as propriedades event.layerX e event.layerY e os metódos não documentados jQuery.isNaN() e jQuery.event.proxy().

Download no link abaixo:

Fonte: Alex/Bitmasters

Tags | , , , , , , , ,