Backgrounds – Parte 5: Degradê Parte 1

Degradê


Então pessoal! desta vez vamos aprender como conseguir o efeito Degradê usando apenas o CSS3 puro. Assim como outras novidades trazidas pelo CSS3, nos possibilita criar efeitos que nos liberta da escravidão das imagens.

O recurso degradê em CSS foi introduzido pela Webkit por cerca de dois anos, mas raramente foi utilizado devido à incompatibilidade com a maioria dos browers. Mas agora com o Firefox 3.6 +, também dando suporte, podemos criar o estilo de degradê sem ter de criar uma imagem.

Portanto navegadores modernos baseados em -moz e -webkit terão suporte adequado a esta propriedade que atualmente é aceita apenas no Chrome, Firefox e Safari em suas versões recentes.

Mozilla e Webkit geralmente adotam a mesma sintaxe para propriedades CSS3, mas infelizmente isso não acontece com o degradê. E a sintaxe definida por convenção pela W3C foi adotada pelo Firefox, e é nela que temos que prestar atenção. Mas para podermos apresentar o efeito degradê em navegadores baseados em -webkit como Chorme e Safari também colocaremos no código.

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz- antes da propriedade.

Existem dois tipos básicos de degradê definidos atualmente, linear e radial. E são especificados pelo linear-gradient e radial-gradient.

Podemos usá-las como valores em quaisquer propriedades que aceitem imagens. Por exemplo:

  • background-image
  • border-image
  • list-style-image
  • content

Linear Gradient

Um degradê linear é aquele que muda de cor em um eixo em linha reta do objeto em questão.

Declaração da sintaxe:

O primeiro argumento para a função especifica a linha que dá ao degradê uma direção e determina como as cores são posicionadas. Ela pode ser expressa através de posicionamento ou através de ângulo.

<Posicionamento>

Para ajudar vai aqui os valores válidos se utilizarmos o posicionamento:

  • x-pos y-pos
  • x-% y-%
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Exemplo

A melhor maneira de se aprender é fazendo, então vamos aos exemplos usando o posicionamento:

  • Degradê da ESQUERDA(Left) para DIREITA(Right)

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

  • Degradê da DIREITA(Right) para ESQUERDA(Left)

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

  • Degradê de TOPO(top) para BAIXO(bottom)

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

  • Degradê de BAIXO(bottom) para TOPO(top)

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Continua no próximo post…

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 1 comments. Add yours

  1. 10th fevereiro 2011 | jhon says: Responder
    Sinceramente ... o cara que usa Internet Explorer é um retardado ... nada funciona nessa bosta... Mesmo na versão 9 ... muitas coisas no css ainda não funcionam... AFfff ... Vlws aew pela postagem....

Join the Conversation