Tableless

Busca Menu

Criando listras com CSS3

Seja o primeiro a comentar por

Cada vez mais, com o passar do tempo as ferramentas CSS3 aos poucos vem ganhando seu devido destaque. Com a constante atualização dos navegadores, a morte declarada do Windows XP, e novos dispositivos a cada dia, podemos finalmente colocar em projetos reais as funcionalidades, pelo menos algumas do CSS3.

Anteriormente sempre que queríamos algo assim, era necessário a utilização de imagens, texturas ou dependendo do caso nem era possível. Agora com a criação de listras em CSS você poderá fazer de maneira fácil, simples e melhorar o desempenho do carregamento do seu código no browser.

O início de tudo vem com a utilização CSS Gradientes quando foi falado inicialmente há 4 anos atrás sobre Gradientes em CSS e foi apresentado um guia de Como usar linear-gradient de maneira consciente fornecendo uma base para o que precisamos saber agora.

Primeiro precisamos saber quais são os tipos de gradientes que podemos utilizar :

propriedades

Tabela explicativa das propriedades gradiente com CSS3

O Bernard de Luna escreveu um arquivo completo aqui no Tableless mostrando como usar o linear-gradient de forma consciente, vale a pena dar uma olhada para se familiarizar com cada tipo de gradiente. Neste post vamos utilizar basicamente a propriedade repeating-linear-gratient. Bom, chega de conversa e vamos entender inicialmente como podemos montar nosso fundo CSS.

Listras Diagonais simples

Veja o seguinte exemplo :

listra-css

Veja o código:

.listra {
background: repeating-linear-gradient(
90deg,
#FCFF7C,
#FCFF7C 10px,
#FFE13A 10px,
#FFE13A 20px
);

A propriedade contém as seguintes informações o nível de inclinação ( em graus ) de qual será as listras, as cores que você deseja colocar e a largura das mesmas. Veja a mesma imagem só que com o nível de inclinação em 45 graus :

fundo-listras-css

Vamos analisar a imagem com um pouco mais de atenção :

listra-css-analise

Podemos ver as dimensões de 10px em vermelho, a segunda lista iniciando com 20px e o grau de inclinação de 45º.

Listras diagonais Gradiente

Se você fizer o background com uma listra padrão , e depois fazer metade das listras totalmente transparente ao invés de utilizar cores,você poderá implementar o efeito de gradiente na sua propriedade e fazer isso único elemento:

listra-css-gradiente

Veja seu código:

.listra {
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
#ccc 10px,
#ccc 20px),
linear-gradient(
to bottom,
#fff,
#000
);}

 

Neste exemplo estou fazendo um fundo listrado com transparente e cinza, e utilizando a propriedade linear-gradient do branco ao preto cobrindo todas as listras. Viu como fica interessante?

Listras sobre uma imagem

Sim, isto mesmo! Podemos utilizar texturas, imagens que acabam dando um maior efeito ao nosso background, veja como é fácil fazer :

Vamos analisar a seguinte imagem :

listra-css-com-imagem

Veja o código equivalente :

.listra {
background: repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 10px,
rgba(0, 0, 0, 0.3) 10px,
rgba(0, 0, 0, 0.3) 20px
),
url(textura.jpg);
}
);

 

Diante desta propriedade podemos analisar que inicialmente possuímos 45º de inclinação e desta vez, ao invés de utilizarmos cores no formado hexadecimal, utilizamos cores em modo rgba pois assim podemos colocar transparência (0.2 e 0.3) nas listras para que a mesma dê visibilidade a textura que foi colocada mais ao fundo da propriedade.

Listras radiais

Bom, o CSS3 é uma ferramenta poderosa, não temos como duvidar disto, imagine criar o seguinte efeito:

listra-imagem-radial

Bom, isto é possível, veja só que simples:

.listra {
background: repeating-radial-gradient(
  circle,
  blue,
  blue 10px,
  #87A9FF 10px,
  #87A9FF 20px
);}

A única diferença que ao invés de colocarmos a rotatividade em graus, adicionamos um círculo e o próprio CSS3 fez o resto!

Bom, acaba por aqui? Claro que não, ainda tem muito o que se pode fazer apenas com estas propriedades, a autora deste blog por exemplo, criou um tabuleiro de xadrez só com estas propriedades, veja só : http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

Ficamos por aqui, espero que tenham gostado!

Publicado no dia