Você já viu uma série de outros programas descritos que criam imagens de gradiente. Parece como se cada site, incluindo CSS3, fornece um. The Drive Gradiente dinâmico Imagem Maker é diferente, no entanto: Ele realmente cria um arquivo de imagem, em vez de criar CSS que, eventualmente, cria uma imagem na tela.

A diferença é importante. Usando uma imagem significa que o navegador só precisa dar suporte a imagens - algo que cada navegador fora hoje pode fazer - mas quando se usa CSS, que você precisa saber que o navegador do anfitrião realmente suporta o nível exigido de CSS. Você acessa Gradiente em Image Maker, clicando Imagem Gradiente no menu Ferramentas web da página principal.

A Gradiente em Image Maker possui uma interface simplificada. Tudo o que fazer é selecionar o tipo de gradiente que você deseja criar (horizontal, vertical ou diagonal), definir o tamanho de gradiente, e escolher as cores que deseja usar.

Ao escolher uma cor, você pode clicar em uma área no seletor de cor ou você pode digitar o código hexadecimal da cor que deseja usar. Há pouca flexibilidade na utilização desta ferramenta. Ele foi projetado especificamente para fornecer um meio simples e rápida de criar um gradiente.

Quando estiver satisfeito com o gradiente, escolha um formato de saída da imagem. O formato JPEG geralmente produzem arquivos menores, enquanto o formato PNG geralmente produzem arquivos de maior qualidade. Clique em Obter Full Size Image e você ver um outro guia aberta com a imagem gradiente que você solicitou. direita; clique na imagem e escolha Salvar Imagem Como no menu de contexto para salvar a imagem em seu disco rígido.

Há um truque para usar a imagem como um fundo. HTML suporta um atributo de fundo para o tag. Supostamente este atributo é obsoleto e você não deve confiar nele estar disponível para sempre. No entanto, ele ainda funciona em todos os navegadores (e em todas as plataformas). O código a seguir usa o atributo de fundo e irá exibir uma página com o gradiente como uma imagem de fundo no tamanho solicitado.

Testando uma imagem Gradient
Alguns texto de exemplo

Esta técnica tem a vantagem de não utilizar qualquer forma de CSS para exibir a imagem, mas é um pouco arriscado como futuras alterações são feitas à forma como HTML funciona em navegadores. Por agora, no entanto, parece que cada navegador no planeta ainda suporta este método particular de exibir uma imagem de fundo (quando alguns não vão usar o método CSS). Isto é o que o gradiente parece em ação.

A forma atual para usar a imagem é aplicá-lo usando CSS. Neste caso, você aplicá-lo usando a propriedade de fundo para o estilo de corpo, como mostrado aqui.

Testando uma imagem Gradient
Alguns texto de exemplo

A vantagem dessa abordagem é que você pode controlar o tamanho do fundo, origem e outras características. Usando CSS, sempre que possível, aumenta bastante a flexibilidade de usar uma imagem de gradiente. No entanto, se você estiver indo para usar o CSS de qualquer maneira, que muitas vezes paga para aplicar o gradiente de si usando CSS.

A principal vantagem de usar uma imagem sobre CSS pura é que você pode trocar rapidamente uma imagem para outra, usando qualquer um de uma série de técnicas para alterar a aparência da página, sem escrever nenhum código novo.