Olá pessoal, nessa dica irei falar sobre outra ferramenta online que auxilia os desenvolvedores front-end, dessa vez iremos ver como fazer para gerar códigos CSS3 para criar Gradient de cores.

Essa é uma ferramenta muito simples, com uma interface visual muito agradável e que você facilmente irá conseguir criar lindos gradientes.

Primeiro é preciso entrar no site da ferramenta: http://www.colorzilla.com/gradient-editor/

Após entrar no link, a página que deverá ser mostrada é essa:

Página inicial da ferramenta
Figura 1: Página inicial da ferramenta

Como podemos ver na imagem, existem diversas opções de customização do efeito de grandient, no nosso exemplo vamos escolher o efeito “Blue Gloss Default” mas fiquem a vontade para escolher o que acharem melhor.

Vamos usar a cor azul com orientação diagonal, vejamos o código que o sistema gera para nós.

Listagem 1: Código do efeito Gradient


background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Além disso a ferramenta dá uma opção de suporte para o IE9, nos disponibilizando o seguinte código:

Listagem 2: Suporte IE9


<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Ela explica para adicionarmos a classe “gradient” em todos os elementos que tiverem o efeito gradiente, além de adicionarmos o código acima da listagem 2 em nosso código html.

Também existe a opção de escolha de formato de cor(hex/rgb/rgba/hsl/hsla), ou seja, a ferramenta possui uma infinidade de opções e customizações, use sua criatividade para criar o melhor efeito gradiente.

Resultado do efeito escolhido no exemplo.

Figura 2: Resultado do efeito escolhido no exemplo.

Espero que essa dica tenha sido útil, é uma ferramenta muito poderosa e usual para quem quer inserir efeitos de gradiente em seu website e assim minimizar o uso de imagens para isso, o que torna o carregamento da página muito mais rápido e leve, melhorando a performance do seu website.

Espero que tenham gostado e até a próxima.