Criando gradientes lineares entre navegadores com CSS3
Gradientes Lineares
O tipo mais comum de gradiente que você verá é um gradiente linear de duas cores. Isso significa que o gradiente se moverá em linha reta, mudando gradualmente da primeira cor para a segunda ao longo dessa linha. A imagem nesta página mostra um gradiente simples da esquerda para a direita de # 999 (cinza escuro) para #fff (branco).
Os gradientes lineares são os mais fáceis de definir e têm mais suporte nos navegadores. Gradientes lineares CSS3 são suportados no Android 2.3+, no Chrome 1+, no Firefox 3.6+, no Opera 11.1+ e no Safari 4+. O Internet Explorer pode adicionar gradientes usando um filtro e os suporta de volta ao IE 5.5. Isso não é CSS3, mas é uma opção para compatibilidade entre navegadores.
Quando você define um gradiente, precisa definir várias coisas diferentes:
- Que tipo de gradiente é
linearouradial - Onde o gradiente deve começar
- Onde o gradiente deve parar
- Quais cores estão no gradiente e onde devem começar e parar
Para definir gradientes lineares usando CSS3, você escreve:
Gradiente linear(ângulo ou lado ou canto, parada de cor, parada de cor)
- Primeiro você define o tipo de gradiente com o nome
linear -gradiente. - Em seguida, você define os pontos inicial e final do gradiente de duas maneiras:
ânguloda linha em graus de 0 a 359, com 0 graus apontando para cima. Ou com a função “lado ou canto”, comoesquerda,certo,inferioretopo. Isso será explicado com mais detalhes na próxima página. Se você deixar isso de fora, o gradiente fluirá do topo para a parte inferior do elemento. - Então você define a cor para. Você define as paradas de cores com o código de cores e uma porcentagem opcional. A porcentagem informa ao navegador onde na linha começar ou terminar com essa cor. O padrão é colocar as cores uniformemente ao longo da linha. Você aprenderá mais sobre as paradas de cores na página 3.
Então, para definir o gradiente acima com CSS3, você escreve:
gradiente linear (esquerda, # 999999 0%, #ffffff 100%);
E para defini-lo como o fundo de um DIV você escreve:
div {imagem de fundo: gradiente linear (esquerda, # 999999 0%, #ffffff 100%;} Extensões do navegador para gradientes lineares CSS3
Para que seu gradiente funcione em vários navegadores, é necessário usar extensões de navegador para a maioria dos navegadores e um filtro para o Internet Explorer 9 e inferior (na verdade, 2 filtros). Todos eles usam os mesmos elementos para definir seu gradiente (exceto que você só pode definir gradientes de 2 cores no IE).
Filtros e Extensão da Microsoft-O Internet Explorer é o mais difícil de suportar, porque você precisa de três linhas diferentes para suportar as diferentes versões do navegador. Para obter o gradiente cinza para branco acima, você escreveria:
/ * IE 5.5–7 * /filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8–9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradiente (esquerda, # 999999 0%, #ffffff 100%);
Extensão Mozilla-O -moz- extensão funciona como a propriedade CSS3, apenas com o -moz- extensão. Para obter o gradiente acima para o Firefox, escreva:
-moz-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
Extensão Opera-O -o- extensão adiciona gradientes ao Opera 11.1+. Para obter o gradiente acima, escreva:
-o-gradiente linear (esquerda, # 999999 0%, #ffffff 100%);
Extensão de Webkit-O -webkit- extensão funciona muito como a propriedade CSS3. Para definir o gradiente acima para o Safari 5.1+ ou o Chrome 10+, você escreve:
-webkit-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
Há também uma versão mais antiga da extensão Webkit que funciona com o Chrome 2+ e o Safari 4+. Nela você define o tipo de gradiente como um valor, e não no nome da propriedade. Para obter o gradiente de cinza para branco com essa extensão, escreva:
-webkit-gradiente (linear, superior esquerdo, superior direito, cor-stop (0%, # 999999), cor-stop (100%, # ffffff)); Código CSS completo de gradiente CSS3
Para obter suporte completo a todos os navegadores para obter o gradiente de cinza para branco acima, primeiro inclua uma cor sólida substituta para navegadores que não suportam gradientes, e o último item deve ser o estilo CSS3 para navegadores totalmente compatíveis. Então você escreve:
fundo: # 999999;plano de fundo: -moz-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);background: -webkit-gradient (linear, superior esquerdo, superior direito, cor-stop (0%, # 999999), cor-stop (100%, # ffffff));background: -webkit-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);plano de fundo: -o-linear-gradiente (esquerda, # 999999 0%, #ffffff 100%);plano de fundo: -ms-linear-gradiente (esquerda, # 999999 0%, #ffffff 100%);filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);plano de fundo: gradiente linear (esquerda, # 999999 0%, #ffffff 100%);
As próximas páginas deste tutorial explicam as partes de um gradiente com mais detalhes, e a última página aponta para uma ferramenta que é uma excelente maneira de criar gradientes CSS3 automaticamente.
Veja este gradiente linear em ação usando apenas CSS.
02 de 04Criando gradientes diagonais - o ângulo do gradiente
Os pontos de início e parada determinam o ângulo do gradiente. A maioria dos gradientes lineares é de cima para baixo ou da esquerda para a direita. Mas é possível construir um gradiente que se mova em uma linha diagonal. A imagem nesta página mostra um gradiente simples que se move em um ângulo de 45 graus na imagem da direita para a esquerda.
Ângulos para definir a linha de gradiente
O ângulo é uma linha em um círculo imaginário no centro do elemento. 0deg aponta acima, 90deg aponta para a direita 180 graus aponta para baixo e 270deg aponta para a esquerda. Você pode definir qualquer ângulo de 0 a 359 graus.
Você deve notar que em um quadrado, um ângulo de 45 graus se move do canto superior esquerdo para o canto inferior direito, mas em um retângulo os pontos inicial e final estão ligeiramente fora da forma, como você pode ver na imagem.
A maneira mais comum de definir um gradiente diagonal é definir um canto, como canto superior direito e o gradiente se moverá daquele canto para o canto oposto. Você pode definir a posição inicial com as seguintes palavras-chave:
- topo
- certo
- inferior
- esquerda
- Centro
E eles podem ser combinados para serem mais específicos, como:
- canto superior direito
- canto superior esquerdo
- centro superior
- canto inferior direito
- inferior esquerdo
- centro inferior
- centro direito
- centro esquerdo
Aqui está o CSS para um gradiente semelhante ao apresentado, vermelho para branco movendo-se do canto superior direito para o canto inferior esquerdo:
fundo: ## 901A1C;background-image: -moz-linear-gradient (topo direito, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (linear, superior direito, inferior esquerdo, cor-stop (0, # 901A1C), cor-stop (1, #FFFFFF));background: -webkit-linear-gradient (topo direito, # 901A1C 0%, #ffffff 100%);plano de fundo: -o-linear-gradiente (parte superior direita, # 901A1C 0%, #ffffff 100%);plano de fundo: -ms-linear-gradiente (parte superior direita, # 901A1C 0%, #ffffff 100%);plano de fundo: gradiente linear (topo direito, # 901A1C 0%, #ffffff 100%);
Você deve ter notado que não há filtros do IE neste exemplo. Isso ocorre porque o IE só permite dois tipos de filtros: de cima para baixo (o padrão) e da esquerda para a direita (com o GradientType = 1 interruptor).
Veja este gradiente linear diagonal em ação usando apenas CSS.
03 de 04Cor pára
Com gradientes lineares CSS3, você pode adicionar várias cores ao seu gradiente para criar efeitos ainda mais extravagantes. Para adicionar essas cores, você adiciona cores adicionais ao final de sua propriedade, separadas por vírgulas. Você deve incluir onde na linha as cores devem começar ou terminar também.
Os filtros do Internet Explorer suportam apenas duas paradas de cores; portanto, ao criar esse gradiente, você deve incluir apenas a primeira e a segunda cores que deseja exibir.
Aqui está o CSS para o gradiente de 3 cores acima:
plano de fundo: #ffffff;background: -moz-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -webkit-gradiente (linear, superior esquerdo, superior direito, cor-stop (0%, # ffffff), cor-stop (51%, # 901A1C), cor-stop (100%, # ffffff));background: -webkit-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);background: -o-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);background: -ms-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);plano de fundo: gradiente linear (esquerda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Veja este gradiente linear com três paradas de cores em ação usando apenas CSS.
04 de 04Torne os gradientes de construção mais fáceis
Existem dois sites que eu recomendo para ajudá-lo a construir gradientes, cada um deles tem benefícios e desvantagens para eles, eu não encontrei um construtor de gradiente que faz tudo ainda.
Gerador final de gradiente de CSSEsse gerador de gradiente é muito popular porque funciona de maneira semelhante aos construtores de gradiente em programas como o Photoshop. Eu também gosto disso porque ele te dá todas as extensões CSS, não apenas Webkit e Mozilla. O problema com este gerador é que ele suporta apenas gradientes horizontais e verticais. Se você quiser fazer gradientes diagonais, você tem que ir para o outro gerador que eu recomendo. Gerador de gradiente CSS3Esse gerador demorou um pouco mais para entender do que o primeiro, mas suporta mudar a direção para uma diagonal. Se você souber de outro Gerador de Gradiente de CSS de que gosta mais do que isso, informe-nos.
