Como usar gradientes CSS3
Um gradiente CSS3 (que é uma mistura entre duas ou mais cores) pode ser um fundo agradável. Anteriormente, os desenvolvedores iria criar um gradiente através da construção de uma tira fina de gradiente em um editor de imagem e, em seguida, usando o repeat-x ou repetir-y regras para tornar a imagem mais pequena replicar em toda a página. Esta era uma técnica boa, mas não foi terrivelmente flexível e somente inclinações lineares relativamente simples eram possíveis.
Menu
CSS3 adicionou uma regra inclinação notável que faz gradientes nativamente através de CSS. Quando esta técnica é integralmente adoptada, faz gradientes muito mais fácil de trabalhar.
CSS3 suporta dois principais tipos de gradientes: linear e radial. Um gradiente linear muda de cor ao longo de uma linha reta, e um gradiente radial irradia para fora de um ponto central.
O mecanismo de inclinação foi uma das partes mais lentas de CSS a ser padronizados e aprovados, por isso ainda está mudando, mas parece que os navegadores estão finalmente a criação de um padrão. Infelizmente, os prefixos específicos do fornecedor são necessárias para o momento.
Como construir um gradiente simples
O gradiente mais simples é demonstrada na caixa 1. Ela varia de esquerda para a direita, começando no vermelho e terminando com branco.
# Box1 {background-image: linear de gradiente (à esquerda, vermelho, branco) -background-image: -moz-linear de gradiente (à esquerda, vermelho, branco) -background-image: -webkit-linear de gradiente (à esquerda, vermelho , branco) -}Veja como você construir um gradiente linear simples:
Defina o selector.
A inclinação é definida em CSS, e você vai precisar usar qualquer um dos seus seletores CSS padrão para determinar qual elemento você estará adicionando o gradiente.
Use a regra background-image.
Um gradiente é uma forma especial de imagem. Você pode usar a regra de background-image para aplicar um gradiente ao fundo de qualquer elemento, incluindo todo o corpo da página.
invocar o linear de gradiente função.
Alguns elementos CSS requerem parênteses porque tecnicamente eles são funções. A distinção não importa agora, mas você precisa incorporar os parênteses quando você usa esse tipo de valor. o linear de gradiente técnica é uma função.
Determinar a direção do gradiente irá fluir.
Você pode fazer um fluxo gradiente em qualquer direção que você quer dentro do elemento. indicador esquerda faz com que o elemento a fluir a partir da esquerda para a direita. Você pode usar a fluir de cima para baixo, ou superior esquerdo para ir do canto superior esquerdo para canto inferior direito. Usar qualquer combinação de superior, esquerda, inferior e certo. Você também pode especificar um ângulo em graus, conforme demonstrado no próximo exemplo.
Indicam uma cor inicial.
Use qualquer uma das ferramentas de cor padrão (nomes de cores, cores hexadecimais, rgb () / rgba (), ou hsl ()) Para determinar a cor começando.
Indicar uma cor final.
A última cor indicada será a cor final do gradiente. O gradiente flui desde o início para acabar com cor uniforme.
Repita com as extensões do navegador.
Você vai precisar adicionar variantes para os navegadores específicos. Você vai precisar fazer uma nova versão do imagem de fundo governar para cada fornecedor importante.
Como fazer um gradiente mais interessante
Como você olhar para a caixa 2, você verá um gradiente mais complexo mostrando várias cores e um ângulo interessante.
# Box2 {background-image: linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul) -background-image: -moz-linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul ) -background-image: -webkit-linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul) -}Veja como você adicionar mais pizazz a seus gradientes.
Use um ângulo para a direção.
Em vez de especificar o seu sentido de gradiente com a norma topo/esquerda palavras-chave, você pode especificar um ângulo inicial. Ângulos são medidos matematicamente em graus, com 0 que vem da direita e 90 vindo de cima para baixo. Você deve especificar a medição graus com deg, assim 75 graus é escrito como 75deg.
Adicione tantas cores como você deseja.
Um gradiente pode ter qualquer número de cores na mesma. Cada mudança de cores é chamada de interrupção de cor. O exemplo mostra três cores diferentes.
Determinar onde as cores paradas acontecer.
Por padrão, as cores são distribuídas uniformemente ao longo do gradiente. Se você quiser, você pode mover qualquer cor para aparecer em qualquer parte do gradiente desejar. Os locais de parada de cor são indicados por percentagens. Não é necessário adicionar um local para a primeira e última parada cor, uma vez que se presume ser de 0% e 100%.
Criar uma faixa da cor, fornecendo duas paragens da mesma cor.
Caixa 2 apresenta uma banda de branco. Para obter esse efeito, duas paradas de cor foram produzidas com o branco, que aparece em 33%, e o outro em 66%. Isso quebra o gradiente aproximadamente em terços.
Coloque duas cores no mesmo local para uma mudança de cor abrupta.
Se você quer uma mudança de cor abrupta, basta colocar duas cores diferentes no mesmo percentual.
Repita o procedimento para todos os navegadores.
Novamente, você precisa considerar os vários navegadores, até esta técnica torna-se mais padronizado.
Como construir um gradiente radial
CSS3 suporta um segundo tipo de gradiente chamado gradiente radial. A ideia básica é a mesma, excepto em vez de seguir uma linha recta, como um gradiente linear, aparece um gradiente radial de fluir a partir de um ponto central no elemento e irradiam para fora.
O gradiente radial básica mostrada na caixa 3 é criado com este código CSS:
# Box3 {background-image: radial de gradiente (branco, azul) -background-image: -moz-radial de gradiente (branco, azul) -background-image: -webkit-radial de gradiente (branco, azul) -}Como você pode ver, o gradiente radial básico é criado muito parecido com um gradiente linear, só que usa o radial-gradient função em vez da linear de gradiente função.
gradientes radiais têm muitas opções, o que os torna bastante promissor, mas o suporte ao navegador para essas diversas normas é bastante irregular. Box 4 tem um gradiente radial com três cores:
# Box4 {background-image: radial de gradiente (vermelho, branco, azul) -background-image: -moz-radial de gradiente (vermelho, branco, azul) -background-image: -webkit-radial de gradiente (vermelho, branco , azul) -}É também possível alterar a forma do gradiente de círculo em elipse, para mudar o centro do gradiente para um ponto diferente dentro do elemento, e para especificar limites de cor. Você precisa verificar as especificações atuais para ver como estas coisas são feitas, como eles são ainda bastante experimental.