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 :
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 :
Veja o código:
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 :
Vamos analisar a imagem com um pouco mais de atenção :
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:
Veja seu código:
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 :
Veja o código equivalente :
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:
Bom, isto é possível, veja só que simples:
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ó : https://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
Ficamos por aqui, espero que tenham gostado!