Gradientes de repetição CSS3 [CSS3 Tips]
Há muitos recursos do CSS3 que alteram a maneira como decoramos um site, um dos quais é o gradiente de CSS3. Antes do CSS3, definitivamente precisamos de imagens para criar o efeito de gradiente; agora somos capazes de entregar os mesmos (e melhores) efeitos usando apenas CSS
Em nossos posts anteriores, discutimos dois tipos de gradientes que podem ser obtidos com CSS3:
- Radial e
- Gradientes Lineares.
Desta vez vamos olhar para o irmão deles: gradientes repetitivos.
Repetição Básica
Gradientes Repetitivos é essencialmente uma extensão. A sintaxe é semelhante à forma como definimos os gradientes Radial e Linear, apenas que, como o nome indica, também repetirá as cores em uma direção especificada. Para repetir gradientes lineares, podemos usar esta função: gradiente linear de repetição, enquanto para repetir gradientes radiais ou elípticos usamos esta função: gradiente repetitivo-radial.
/ * Linear * / .gradient background: gradiente linear de repetição (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: gradiente repetitivo-radial (50% 50%, círculo, # f9f9f9, #cccccc 20px);
Não há muita diferença para o resto do código, exceto pelo repetição de cor. Abaixo está uma ilustração simples para descrever como esta repetição de cores funciona.
Embora a imagem acima apenas ilustre a repetição de gradientes lineares, a idéia básica também se aplica a gradientes radiais nos quais as cores se repetem infinitamente, neste caso, em qualquer direção. Siga o link abaixo para ver a demonstração.
- Ver demonstração
Na próxima seção, mostraremos como podemos usar Gradientes de Repetição CSS3 em exemplos reais.
Exemplo: Criando Padrões
A implementação mais comum de Gradientes Repetitivos é criar padrões de fundo. Neste exemplo, vamos criar padrões simples de listras verticais.
.gradient background: gradiente linear de repetição (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Observe como definimos duas cores diferentes - # f9f9f9 e #cccccc - no mesmo local, 20 px. Este exemplo vai aguçar a diferença entre estas duas cores e eliminar a imprecisão.
Para direcionar a orientação, simplesmente mudamos o ângulo - 90deg irá direcioná-lo horizontalmente enquanto 45 graus irá direcioná-lo na diagonal e assim por diante.
- Ver demonstração
Exemplo: Criando Linha de Papel
Neste segundo exemplo, vamos criar uma linha de papel que você pode ver frequentemente em um caderno. Para criar esse efeito, precisamos apenas de um div, sem imagens, apenas CSS.
.gradiente largura: auto; altura: 500 px; margem: 0 50px; background: -webkit-repeat-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-repeat-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -o-repetição-linear-gradiente (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: gradiente linear de repetição (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tamanho de fundo: 100% 21px;
Observe que também adicionamos o CSS3 tamanho de fundo propriedade para especificar os tamanhos das imagens de 100%, 20 px. Embora os gradientes de CSS3 exibam "cores", ele é categorizado como imagem, não cor.
Em seguida, vamos usar :antes pseudo-elemento para adicionar uma faixa no lado esquerdo do papel.
.gradiente: antes de content: ""; display: bloco inline; altura: 500 px; largura: 4 px; borda esquerda: 4px dupla # FCA1A1; posição: relativa; esquerda: 30px;
E nós terminamos, é realmente simples, certo? Agora podemos ver todos em ação nos links abaixo.
- Ver demonstração
- Fonte de download
Mais recursos
- Gradientes do Webkit CSS3
- Gradientes CSS3 na Microsoft Developer Network
