Colorzilla, Editor Online e Grátis de Degradês em CSS

0
1343

Pra quem trabalha com folhas de estilo (CSS) existe uma ferramenta excelente para criar degradês: Colorzilla Ultimate CSS Gradient Generator (Gerador de Degradês). A partir do site do serviço, sem precisar instalar nenhum programa, você edita degradês enquanto vê o código ser gerado automaticamente. E o melhor: ele será compatível com todos os navegadores, incluindo o temido Internet Explorer.

Com o desenvolvimento do CSS, criar degradês para fundos de elementos ficou mais fácil, já que antes era preciso usar imagens de fundo, o que acabava pesando mais a página. Com as regras de estilização do CSS3 usando o gradient, o preenchimento pode ser feito na diagonal, horizontal e com múltiplas cores.

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.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui