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 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.
Conteúdo
CSS3 adicionou uma regra gradiente notável que faz gradientes nativamente através de CSS. Quando esta técnica é integralmente adoptada, faz gradientes muito mais fácil trabalhar com.
CSS3 suporta dois tipos principais de gradientes: linear e radial. Um gradiente linear muda de cor ao longo de uma linha recta, e um gradiente radial irradia para fora a partir de um ponto central.
O mecanismo de inclinação foi uma das partes mais lentas de CSS a ser padronizados e adotados, 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 é demonstrado na caixa 1. Ela varia a partir da esquerda para a direita, a partir de vermelho e terminando com o branco.
# Caixa1 {fundo-imagem: linear de gradiente (esquerda, vermelho, branco) -background-imagem: -moz-linear de gradiente (esquerda, vermelho, branco) -background-imagem: -webkit-linear de gradiente (esquerda, vermelho , branco) -}Veja como você construir um gradiente linear simples:
Defina o selector.
Um gradiente é definido 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 Gradiente linear função.
Alguns elementos CSS requerem parênteses porque tecnicamente 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 Gradiente linear técnica é uma função.
Determinar a direcção da inclinação irá fluir.
Você pode fazer um fluxo de 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. Use qualquer combinação de superior, esquerda, baixo e certo. Você também pode especificar um ângulo em graus, conforme demonstrado no próximo exemplo.
Indicar 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 até que termina a cor uniformemente.
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 regra para cada grande fabricante.
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 {fundo-imagem: linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul) -background-imagem: -moz-linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul ) -background-imagem: -webkit-linear de gradiente (75deg, vermelho, branco 33%, branco 66%, azul) -}Veja como você adicionar mais entusiasmo aos seus gradientes.
Use um ângulo de direção.
Em vez de especificar sua direção gradiente com o padrão 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 em cores é chamado de interrupção de cor. O exemplo mostra três cores diferentes.
Determinar onde as cores paradas acontecer.
Por padrão, as cores estão uniformemente distribuídas ao longo do gradiente. Se você quiser, você pode mover qualquer cor para aparecer em qualquer parte do gradiente desejar. Os locais de parada cor são indicados por percentagens. Não é necessário adicionar um local para a primeira e última parada cor, como eles se presume ser de 0% e 100%.
Criar uma banda de 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%. Esta quebra do 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é que esta técnica se torna mais padronizada.
Como construir um gradiente radial
CSS3 suporta um segundo tipo de gradiente da chamada gradiente radial. A ideia básica é a mesma, a não ser em vez de seguir uma linha recta, como um gradiente linear, um gradiente radial aparece a fluir a partir de um ponto central no elemento e irradiam para fora.
O gradiente radial de base mostrado na caixa 3 é criado com este código CSS:
# Box3 {fundo-imagem: radial de gradiente (branco, azul) -background-imagem: -moz-radial de gradiente (branco, azul) -background-imagem: -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 gradiente função em vez da Gradiente linear função.
gradientes radiais têm muitas opções, o que os torna bastante promissor, mas o suporte ao navegador para esses vários padrões é bastante irregular. Caixa 4 tem um gradiente radial com três cores:
# Box4 {fundo-imagem: radial de gradiente (vermelho, branco, azul) -background-imagem: -moz-radial de gradiente (vermelho, branco, azul) -background-imagem: -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.