Design

Colorzilla: editor online de degradês em CSS (e grátis)

O serviço online facilita a criação de degradês em CSS, quase sempre complicados de gerar manualmente.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Lida com CSS? Existe uma ferramenta excelente para criar degradês: Colorzilla Ultimate CSS Gradient Generator. O nome é complicado, mas a função é simples e ótima: é gerador de degradês.

A partir do site do serviço, sem instalar programas, você edita degradês enquanto vê o código ser gerado automaticamente. Ele será compatível com todos os navegadores, incluindo o temido Internet Explorer.

Com o CSS, criar degradês para fundos de elementos ficou mais fácil. Antes era preciso usar imagens. Com as regras de estilização gradient, o preenchimento pode ser feito na diagonal, horizontal e com múltiplas cores. O único porém é que escrever tudo isso “na mão” dá um pouco de trabalho.

Como usar

Acesse o site do Colorzilla. Lá, você vai notar que a aparência é similar a um programa de edição de imagens, como o Photoshop.

Página do editor de degradês Colorzilla

Em Presets, estão diversos degradês prontos, caso não consiga editar um. Ao clicar, verá que o código na caixa CSS vai mudar automaticamente.

Na barra de cores logo abaixo dos Presets, verá que pode editar seus próprios degradês. É fácil: as caixinhas na parte de cima da barra controlam a opacidade até aquele ponto, e as caixinhas de baixo definem os pontos de cor.

Color Stop no Colorzilla, pontos em que as cores iniciam ou terminam no degradê

Se clicar em uma área vazia acima da barra (quando surge um sinal positivo ao lado do cursor), será adicionado um novo ponto de opacidade; do mesmo modo, clicar na parte inferior adiciona um novo ponto de cor.

Adicionando um opacity stop ao degradê

Para eliminar um ponto, clique sobre ele e arraste-o para longe ou para cima da barra. Para editar os pontos, clique uma vez sobre ele e edite os valores. Ao clicar nos pontos superiores, verá que a caixa Stops mostra o valor de opacidade, e sua posição (Location).

Editando o ponto de opacidade do degradê

Se clicar nas caixas de cor, o Stops vai ativar os ajustes de cor e posição. Se clicar no seletor de cor, será aberto uma paleta maior, como no Photoshop.

Seletor de cor para um ponto do degradê

Note que, enquanto edita, o resultado aparece em tempo real na janela Preview.

Janela de Preview do degradê

Outros ajustes podem ser feitos, como alterar a direção do degradê, em Orientation; o tamanho em Size; o modo que as cores serão definidas, na caixa Color format, além de manter comentários no código (marcando a caixa Comments) e obter ou não compatibilidade com o Internet Explorer.

Quando estiver satisfeito com seu degradê, é só copiar o CSS fornecido e usar em seus projetos. Veja um criado com a ferramenta.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Write A Comment

Pin