CSS3 - Parte 2

Gradients

---

Gradientes CSS3 permitem exibir transições suaves entre duas ou mais cores especificadas.

Antes, você tinha que usar imagens para estes efeitos. No entanto, usando gradientes CSS3, você pode reduzir o tempo de download e uso de banda. Além disso, os elementos com gradientes parecer melhor quando ampliada, porque o gradiente é gerado pelo navegador.

CSS3 define dois tipos de gradientes:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

---

Navegadores que suportam

 

 

Internet Explorer 10 + , 16 + Firefox , Chrome 26 + e Opera 12.1 + apoiar as quatro funções de gradiente.Safari 5.1 + requer o prefixo -webkit- .Chrome 10 a 25 requerem o prefixo -webkit- .Opera 11,1-12,0 exigem o prefixo -o- .Firefox 3,6-15 exigem o prefixo -moz- .Internet Explorer 9 e versões anteriores não suportam gradientes.CSS3 lineares gradientesPara criar um gradiente linear que você deve definir pelo menos duas paradas de cor. Paradas de cores são as cores que deseja para tornar transições suaves entre . Você também pode definir um ponto de partida e uma direção (ou um ângulo ), juntamente com o efeito de gradiente .Exemplo de gradiente linear : 

gradiente Linearsintaxebackground: linear de gradiente (direção , cor - STOP1 , cor - stop2 , ...);Linear Gradiente - De cima para baixo ( este é o padrão)O exemplo a seguir mostra um gradiente linear que começa no topo . Começa vermelho, a transição para o azul:

Exemplo 

Um gradiente linear de cima para baixo :

# grad 

{

 background: -webkit- linear de gradiente ( vermelho, azul ); 

/ * Para Safari * /background: -o- linear de gradiente ( vermelho, azul ); 

/ * Para Opera 11,1-12,0 * /background: -moz- linear de gradiente ( vermelho, azul ); 

/ * Para Firefox 3,6-15 * /background: linear de gradiente ( vermelho, azul ); / * sintaxe padrão * / 

}

Linear 

Gradiente - Da esquerda para a direitaO exemplo a seguir mostra um gradiente linear que começa a partir da esquerda . Começa vermelho, a transição para o azul: 

Exemplo

Um gradiente linear da esquerda para a direita:

# grad

 {

background: -webkit- linear de gradiente ( à esquerda, vermelho, azul ); 

/ * Para Safari * /background: -o- linear de gradiente (à direita , vermelho, azul ); 

/ * Para Opera 11,1-12,0 * /background: -moz- linear de gradiente (à direita , vermelho, azul ); 

/ * Para Firefox 3,6-15 * /background: linear de gradiente ( para a direita, vermelho, azul ); 

/ * sintaxe padrão * /

 }
 

Linear Gradiente - Diagonal 

Você pode fazer um gradiente em diagonal , especificando ambas as posições iniciais horizontais e verticais.O exemplo a seguir mostra um gradiente linear que começa no canto superior esquerdo ( e vai para o canto inferior direito ) . Começa vermelho, a transição para o azul: 

Exemplo 

Um gradiente linear que começa no canto superior esquerdo ( e vai para o canto inferior direito ) :

# grad{background: -webkit- linear de gradiente (canto superior esquerdo , vermelho, azul ); 

/ * Para Safari * /background: -o- linear de gradiente (canto inferior direito , vermelho, azul ); 

/ * Para Opera 11,1-12,0 * /background: -moz- linear de gradiente (canto inferior direito , vermelho, azul ); 

/ * Para Firefox 3,6-15 * /background: linear de gradiente ( a parte inferior direita , vermelho, azul ); / * sintaxe padrão * /

  } 

Usando Angles 

Se você quiser mais controle sobre a direção do gradiente , você pode definir um ângulo, em vez de as direções pré-definidos ( para baixo , para cima, para a direita, para a esquerda, para a direita inferior , etc.)sintaxebackground: linear de gradiente (ângulo , cor - STOP1 , cor - stop2 );O ângulo é especificado como um ângulo entre uma linha horizontal ea linha de gradiente , indo sentido anti-horário . Em outras palavras, 0deg cria um gradiente de baixo para cima , enquanto o 90graus gera um gradiente da esquerda para a direita.O exemplo a seguir mostra como usar ângulos gradientes lineares : 

Exemplo

Um gradiente linear com um ângulo especificado :

 # grad

 { 

background: -webkit- linear de gradiente (180 , vermelho, azul ); 

/ * Para Safari * /background: -o- linear de gradiente (180 , vermelho, azul ); 

/ * Para Opera 11,1-12,0 * /background: -moz- linear de gradiente (180 , vermelho, azul ); 

/ * Para Firefox 3,6-15 * /background: linear de gradiente (180 , vermelho, azul ); / * sintaxe padrão * /

}

Usando vários limites de corO exemplo a seguir mostra como configurar múltiplas paragens de cores: 

Exemplo 

Um gradiente linear de cima para baixo com cor múltipla para :

# grad

 {

 background: -webkit- linear de gradiente (vermelho, verde, azul ); 

/ * Para Safari * /background: -o- linear de gradiente (vermelho, verde, azul );

/ * Para Opera 11,1-12,0 * /background: -moz- linear de gradiente (vermelho, verde, azul ); 

/ * Para Firefox 3,6-15 * /background: linear de gradiente (vermelho, verde, azul ); / * sintaxe padrão * /

 }

 
O exemplo seguinte mostra como criar um gradiente linear com a cor do arco-íris e um texto : 

Exemplo

# grad

 {

/ * Para Safari * /background: -webkit- linear de gradiente ( à esquerda, vermelho, laranja , amarelo, verde , azul, anil e violeta ); 

/ * Para Opera 11,1-12,0 * /background: -o- linear de gradiente ( à esquerda, vermelho, laranja , amarelo, verde , azul, anil e violeta );

/ * Para Fx 3,6-15 * /background: -moz- linear de gradiente ( à esquerda, vermelho, laranja , amarelo, verde , azul, anil e violeta );

/ * Sintaxe padrão * /background: linear de gradiente ( para a direita, vermelho, laranja , amarelo, verde , azul, anil e violeta ); 

}

 
Usando Transparência

Gradientes CSS3 também suporta a transparência , o que pode ser usado para criar efeitos de desvanecimento .Para adicionar transparência , usamos a função rgba () para definir os limites de cor . O último parâmetro na função rgba () pode ser um valor de 0 a 1 , e define a transparência da cor : 0 indica total transparência, 1 indica full color (sem transparência).O exemplo a seguir mostra um gradiente linear que começa a partir da esquerda . Ele começa totalmente transparente , a transição para o vermelho completo : 

Exemplo

Um gradiente linear da esquerda para a direita, com a transparência : 

# grad

{

background: -webkit- linear de gradiente ( à esquerda, rgba ( 255,0,0,0 ) , rgba ( 255,0,0,1 ) ); 

/ * Safari * /background: -o- linear de gradiente (à direita , rgba ( 255,0,0,0 ) , rgba ( 255,0,0,1 ) ); 

/ * Opera 11-12 * /background: -moz- linear de gradiente (à direita , rgba ( 255,0,0,0 ) , rgba ( 255,0,0,1 ) ); / * Fx 3,6-15 * /background: linear de gradiente ( para a direita, rgba ( 255,0,0,0 ) , rgba ( 255,0,0,1 ) ); / * Standard * /

 }

 
Repetindo um gradiente linear 

A função repetir -linear de gradiente () é usado para repetir gradientes lineares : 

Exemplo 

Um gradiente linear de repetição:

# grad 

{

/ * Safari * /background: -webkit- repetindo -linear de gradiente ( vermelho, amarelo 10% , verde 20%);/ * Opera 11,1-12,0 * /background: -o- repetindo -linear de gradiente ( vermelho, amarelo 10% , verde 20%);/ * Firefox 3,6-15 * /background: -moz- repetindo -linear de gradiente ( vermelho, amarelo 10% , verde 20%);/ * Sintaxe padrão * /background: repetir -linear de gradiente ( vermelho, amarelo 10% , verde 20%); 

}

 
CSS3 radial gradientes

Um gradiente radial é definida pelo seu centro.Para criar um gradiente radial , você também deve definir pelo menos duas paradas de cor. Você também pode especificar o centro do gradiente , forma ( círculo ou elipse ), bem como o seu tamanho. Por padrão, o centro é o centro , a forma é elipse, e tamanho é o mais distante canto .Exemplo de gradiente radial :

gradiente radialsintaxebackground: radial gradiente ( centro , tamanho da forma , começar a cores , ..., última cor );Radial Gradient - uniformemente espaçados limites de cor ( este é o padrão)exemploUm gradiente radial com a cor uniformemente espaçados para :
 

# grad 

{

 background: -webkit- radial gradiente (vermelho, verde, azul ); 

/ * Safari * /background: -o- radial gradiente (vermelho, verde, azul ); 

/ * Para Opera 11,1-12,0 * /background: -moz- radial gradiente (vermelho, verde, azul ); / * Para Firefox 3,6-15 * /background: radial gradiente (vermelho, verde, azul ); / * sintaxe padrão * /

 }

 
Radial Gradiente - Diferentemente espaçado Cor Stops 

Exemplo

Um gradiente radial com cor diferente espaçados para :

# grad

 {

 background: -webkit- radial gradiente (vermelho 5% , 15% verde , azul 60%); 

/ * Safari * /background: -o- radial gradiente (vermelho 5% , 15% verde , azul 60%); 

/ * Para Opera 11,1-12,0 * /background: -moz- radial gradiente (vermelho 5% , 15% verde , azul 60%);

 / * Para Firefox 3,6-15 * /background: radial gradiente (vermelho 5% , 15% verde , azul 60%); / * sintaxe padrão * /

 }

 
Definir Forma

O parâmetro de forma define a forma . Pode levar o círculo valor ou elipse. O valor padrão é elipse.

Exemplo 

Um gradiente radial com a forma de um círculo :

# grad 

{

 background: -webkit- radial - gradiente ( círculo, vermelho , amarelo, verde ); 

/ * Safari * /background: -o- radial - gradiente ( círculo, vermelho , amarelo, verde ); 

/ * Opera 11,1-12,0 * /background: -moz- radial - gradiente ( círculo, vermelho , amarelo, verde ); 

/ * Firefox 3,6-15 * /background: radial gradiente ( círculo, vermelho , amarelo, verde ); / * sintaxe padrão * /

 }

 
Use palavras-chave de diferentes tamanhosO parâmetro de tamanho define o tamanho do gradiente . Ele pode ter quatro valores :

    the side nearest
    the far side
    nearest corner
    farthest corner

 
Exemplo

Um gradiente radial com palavras-chave diferentes tamanho : 

# grad1 

{

/ * Safari * /background: -webkit- radial gradiente (60% de 55% , mais próximo do lado , azul, verde , amarelo, preto ); 

/ * Para Opera 11,1-12,0 * /background: -o- radial gradiente (60% de 55% , mais próximo do lado , azul, verde , amarelo, preto ); 

/ * Para Firefox 3,6-15 * /background: -moz- radial gradiente (60% de 55% , mais próximo do lado , azul, verde , amarelo, preto );/ * Sintaxe padrão * /background: radial gradiente (60% de 55% , mais próximo do lado , azul, verde , amarelo, preto );

 }

 # grad2 

{ 

/ * Safari * /background: -webkit- radial gradiente (60% de 55% , o mais distante do lado , azul, verde , amarelo, preto ); 

/ * Opera 11,1-12,0 * /background: -o- radial gradiente (60% de 55% , o mais distante do lado , azul, verde , amarelo, preto );

 / * Para Firefox 3,6-15 * /background: -moz- radial gradiente (60% de 55% , o mais distante do lado , azul, verde , amarelo, preto );/ * Sintaxe padrão * /background: radial gradiente (60% de 55% , o mais distante do lado , azul, verde , amarelo, preto );

 }

 
Repetindo um gradiente radial

A função repetir - radial gradiente () é usado para repetir gradientes radiais :

Exemplo

Um gradiente radial repetir:

# grad

{

/ * Para Safari * /background: -webkit- repetindo - radial - gradiente ( vermelho, amarelo 10% , verde 15%);/ * Para Opera 11,1-12,0 * /background: -o- repetindo - radial - gradiente ( vermelho, amarelo 10% , verde 15%); 

/ * Para Firefox 3,6-15 * /background: -moz- repetindo - radial - gradiente ( vermelho, amarelo 10% , verde 15%);/ * Sintaxe padrão * /background: repetir - radial - gradiente ( vermelho, amarelo 10% , verde 15%); 

}