Criar gradientes com CSS 3

Gradientes são um efeito favorito dos designers gráficos em todos os lugares, porque gradientes de criar uma transição suave da cor. Adicionando gradientes ao fundo de uma página web ou para seções dentro de uma página acrescenta riqueza e profundidade a um projeto.

Na figura, você pode ver a diferença entre uma radial e um gradiente linear.

Nas versões anteriores do CSS, se você quisesse usar um gradiente de fundo de um elemento, como um tag, você tinha que usar uma imagem. Se você fosse inteligente, você criou um 1 pixel de largura gráfica que era tão alto quanto você queria o gradiente e depois inseri-lo como um fundo para que ele repetiu para preencher o espaço. Se você projetou uma imagem de fundo bem, o tamanho do arquivo de imagem pode ser pequeno, mas as limitações muitos.

Por exemplo, você teve que fazer o gradiente tão alto ou mais alto do que o espaço que você queria encher, o que limita a sua capacidade para criar designs de página flexíveis. Da mesma forma, combinando uma segunda imagem de fundo por trás do gradiente, se um projeto tinha este tipo de imagem, não era uma tarefa simples. Em suma, acrescentando gradientes de designs de página era possível, mas também um verdadeiro aborrecimento.

Digite CSS 3 e designers de todo o mundo podem comemorar as novas opções de gradiente para resolver todos os problemas antigos de uma só vez. Gradientes gerados com CSS 3 download mais rápido e ajustar automaticamente para preencher o espaço perfeitamente.

CSS 3 gradientes pode ser concebido como linear ou radial, e você pode aplicar diferentes faixas de cores em diferentes espaçamentos ao longo do continuum. Ao todo, 3 gradientes CSS pode ser usado na maioria das situações onde um designer iria querer usar um e são uma melhoria significativa para CSS.

Quando você adiciona um gradiente de um fundo - se é o plano de fundo da página inteira ou um elemento dentro de uma página, como uma tag - o gradiente ajusta automaticamente para preencher todo o espaço, a menos que você especificar um tamanho. Gradientes também pode ser utilizado na fronteira de elementos e para preencher o centro de uma bala em uma lista ordenada.

Aqui está a sintaxe mais simples para a criação de um gradiente linear em CSS 3 para navegadores WebKit:

-webkit de gradiente (linear, 
, , a partir de(), para()) -

gradientes radiais são criados desta forma:

-webkit-gradiente (radial, , , , [, ] *) -

Aqui estão dois exemplos de gradientes usado como imagem de fundo:

• O código a seguir cria um gradiente linear com duas cores:

  background-image: -webkit de gradiente (linear, inferior esquerdo, superior esquerdo, cor-stop (0,32, #FFFFFF), cor-stop (0,66, # 245FAB)) -

• Este exemplo de código cria um gradiente radial com várias cores:

  

background: -webkit-radial de gradiente (radial, centro, 0, centro, 70,5, a partir de (verde), para (amarelo)) -

Aqui está o código usado para criar o gradiente nas áreas do corpo, títulos de fundo, e apartes no site da Jelly Rancher mostrado na figura.

body {background-image: -webkit de gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0, azul), cor-stop (0,25, # 98fc45), cor-de paragem (1, transparente)) -}

No exemplo, você pode ver que um gradiente linear foi criado que começa no topo e se move para o fundo. Você pode variar o gradiente iniciando-o no canto superior esquerdo e terminando no canto inferior direito, que formaria o gradiente ao longo de um caminho diagonal. Existem também vários limites de cor mostrados no exemplo, cada um dos quais representa uma cor ao longo do gradiente. O exemplo gradiente progride como se segue:

• Comece com a cor azul: cor-stop (0, azul).

• Mudar para a cor hexadecimal # 98fc45 a 25 por cento: cor-stop (0,25, # 98fc45).

• Então # 98fc45 torna-se transparente através do resto do gradiente até que o fundo é completamente transparente: cor-de paragem (1, transparente).