Gradientes Lineares CSS3 [Dicas CSS3]
Gradiente é uma ótima adição de recursos de cores no CSS3. Em vez de adicionar apenas uma única cor, agora podemos adicionar várias combinações de cores em um bloco de declaração sem depender de imagens, o que pode diminuir a solicitação de HTTP em nosso site, permitindo que o site seja carregado mais rapidamente.
Se você já brincou com gradientes em CSS3, você provavelmente está familiarizado com os dois métodos: gradiente radial e linear. O post de hoje será sobre o último.
Criando gradientes
Como a especificação diz que os gradientes em CSS3 são uma imagem, ela não tem nenhuma propriedade especial como outra adição de novos recursos, por isso é declarada usando o imagem de fundo propriedade em vez.
Se dermos uma olhada na sintaxe completa do gradiente, parece um pouco overstuffed, o que poderia levar a confusão para algumas pessoas.
div background-image: -webkit-linear-gradient (superior, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (superior, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradiente (superior, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradiente (superior, # FF5A00 0%, # FFAE00 100%); background-image: gradiente linear (top, # FF5A00 0%, # FFAE00 100%);
Então, vamos nos aprofundar em cada parte da sintaxe, uma por uma, para tornar as coisas mais claras.
Primeiro de tudo, gradiente linear é declarado com o Gradiente linear() função. A função tem três valores principais. O primeiro valor define a posição inicial do gradiente. Você pode usar uma palavra-chave descritiva, como topo para iniciar o gradiente que flui do topo;
div background-image: gradiente linear (superior, # FF5A00, # FFAE00);
O trecho acima é a versão oficial do W3C para criar gradientes. Na verdade, é mais simples e bastante autoexplicativo e também cria o seguinte gradiente.
Você também pode usar inferior fazer o oposto, ou então certo e esquerda.
Nós também podemos criar um gradiente diagonal usando grau de ângulo como a posição inicial do gradiente. Aqui está um exemplo:
div background-image: gradiente linear (45deg, #FF5A00, #FFAE00);
O snippet acima criará o seguinte gradiente de cor:
O segundo valor da função dirá ao primeira cor informação e sua parar a posição que é indicado em porcentagem. A posição de parada, na verdade, é opcional; o navegador é inteligente o bastante para determinar a posição correta, então, quando não especificarmos a primeira cor, o navegador levará 0% como padrão.
E o próximo valor é o segunda cor combinação. Funciona como o valor anterior, apenas que se for a última cor aplicada, e nós não especificamos o valor parar a posição, um valor de 100% será tomado como padrão. Agora, vamos ver o exemplo abaixo:
div background-image: gradiente linear (superior, # FF5A00 0%, # FFAE00 100%);
O snippet acima irá criar um gradiente como o que vimos anteriormente (sem diferença), mas agora especificamos a posição de parada de cor;
Agora vamos mudar o parada de cor, e desta vez vamos especificar 50% para a primeira cor e 51% para a segunda cor, e vamos ver como acontece;
div imagem de fundo: gradiente linear (superior, # FF5A00 50%, # FFAE00 51%);
Transparência
Criando transparência no gradiente também é possível. Para criar o efeito, precisamos traduzir a cor hexadecimal para dentro rgba modo e abaixe o canal alfa.
div imagem de fundo: gradiente linear (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
O fragmento acima irá diminuir a intensidade da cor 20%, e o gradiente ficará assim:
Várias cores
Se você quiser que mais cores sejam adicionadas, basta adicionar as cores próximas a outra com um delimitador de vírgula e deixar que o navegador determine cada posição de parada de cor..
div imagem de fundo: gradiente linear (superior, vermelho, laranja, amarelo, verde, azul, índigo, violeta);
O trecho acima irá criar o seguinte arco-íris.
Compatibilidade do Navegador
Infelizmente, no momento desta publicação, todos os navegadores atuais ainda precisam oferecer suporte à sintaxe padrão. Eles ainda precisam do prefixo do fornecedor (-webkit-, -moz-, -Senhora- e -o-). Então, é por isso que a sintaxe completa aparece assim:
div background-image: -webkit-linear-gradient (superior, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (superior, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradiente (superior, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradiente (superior, # FF5A00 0%, # FFAE00 100%); background-image: gradiente linear (top, # FF5A00 0%, # FFAE00 100%);
Por outro lado, o Internet Explorer, especificamente a versão 9 e inferior, está longe de ser o padrão. O gradiente em IE9 e abaixo é declarado com filtro, Então, se quisermos adicionar gradiente nesses navegadores, temos que escrever algo assim:
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
o filtro tem suas limitações: primeiro, ele não permite mais do que três cores adicionadas, e criar o efeito de transparência também é um pouco complicado - ele não permite rgba, mas o IE filtro usa #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Aqui está uma ferramenta para ajudá-lo a converter rgba para #ARGB.
- Demonstração
- Fonte de download
Escrevendo a sintaxe mais rapidamente
Como você pode ver acima, para manter a compatibilidade do gradiente nos navegadores, precisamos adicionar mais cinco linhas de códigos que são ineficientes.
Há muitas maneiras de simplificar a tarefa; como usar o Prefix-free, Prefixr, LESS ou Sass para ajudar a compilar os códigos, mas acima de tudo, recomendamos o uso desta ferramenta, o ColorZilla Gradient. Esta ferramenta irá simplesmente gerar todos os códigos necessários para os gradientes funcionarem em todos os navegadores.
Palavras finais
Hoje discutimos bastante sobre a criação de gradientes, examinamos cada parte da sintaxe, criando efeitos transparentes e mantendo a compatibilidade do navegador. Então, neste momento, esperamos que você já tenha um melhor entendimento sobre o assunto.
Ainda há muitas coisas que planejamos explorar Gradientes CSS3 em nossos posts futuros, fique ligado em Hongkiat.com. Por último, obrigado por ler este post, esperamos que você tenha gostado.
Leitura Adicional
- Bullet Proof Cruz Navegador Fundos RGBA - Lea Verou
- Imagem CSS3 - W3.org
- Quando posso usar gradientes de CSS3 - CanIUse.com
