CSS3 Repeating Gradients [CSS3 Tips]
Há muitos recursos de CSS3 que mudam a maneira como decorar um site, um dos quais é CSS3 Gradients. Antes de CSS3, definitivamente, precisamos de imagens para criar o efeito de gradiente, agora somos capazes de entregar o mesmo (e melhor) efeitos usando apenas CSS.
Nós discutimos dois tipos de gradientes que podem ser conseguidos com CSS3:
Desta vez, vamos olhar para o seu irmão: repetição de gradientes.
Repetição Básica
Repetição de Gradients é essencialmente uma extensão. A sintaxe é semelhante à forma como se define gradientes radiais e lineares, só que como o nome indica, ele também irá repetir as cores em uma direção específica. Para repetir gradientes lineares, podemos usar esta função: repeating-linear-gradient, enquanto a repetir gradientes radiais ou elíptica que usamos esta função: repeating-radial-gradient.
[sourcecode language=”css”]
/*Linear*/
.gradient {
background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
}/*Radial*/
.gradient {
background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
}
[/sourcecode]
Não há muita diferença para o resto do código, exceto para a repetição de cor. Abaixo está uma ilustração simples para descrever como essa repetição cor funciona.
Embora a imagem acima ilustra apenas para a repetição de gradientes lineares, a ideia de base aplica-se também aos gradientes radiais em que as cores se repetem infinitamente, neste caso, em qualquer direcção. Siga o link abaixo para ver a demonstração.
Na seção seguinte, vamos mostrar como podemos fazer uso de CSS3 Gradients repetindo em exemplos reais.
Exemplo: Criando Padrões
A implementação mais comum de Gradientes de repetição é para criar padrões de fundo. Neste exemplo, vamos criar simples da listra vertical padrões.
[sourcecode language=”css”]
.gradient {
background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}
[/sourcecode]
Observe como nós definimos duas cores diferentes – #f9f9f9 e # cccccc – no mesmo local, 20px. Este exemplo vai aguçar a diferença entre estas duas cores e eliminar a imprecisão.
Para dirigir a orientação simplesmente mudar o ângulo – 90deg irá dirigir o horizontalmente enquanto 45deg irá dirigir o diagonalmente e assim por diante.
Exemplo: Criando Paperline
Neste segundo exemplo, vamos criar um paperline que você pode ver muitas vezes em um caderno. Para criar esse efeito, só precisamos de uma div, não há imagens, apenas CSS.
[sourcecode language=”css”]
.gradient {
width: auto;
height: 500px;
margin: 0 50px;
background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background-size: 100% 21px;
}
[/sourcecode]
Observe que também acrescentou CSS3 propriedade background-size para especificar os tamanhos de imagens de fundo para 100%, 20px. Embora CSS3 Gradients exibir “cores”, é realmente classificado como imagem, não de cor.
Em seguida, utilizaremos: antes de pseudo-element para adicionar uma faixa do lado esquerdo do papel.
[sourcecode language=”css”]
.gradient:before { content: ""; display: inline-block; height: 500px; width: 4px; border-left: 4px double #FCA1A1; position: relative; left: 30px; }
[/sourcecode]
Ajude a divulgar e muito obrigado por acessar o blog =) .