Contente
Usando o código CSS, é possível gerar um fundo listrado para uma página unteira da web sem fazer uso de gráficos. Esse efeito utiliza níveis gradientes do CSS com múltiplas interrupções de cor, além da propriedade "background-size" (tamanho do fundo de tela) para fazer o vetor gradiente se repetir por toda a tela. A melhor maneira de fazer isso é começar com uma cor de fundo sólida e fazer uma das suas listras transparentes para que a cor seja realçada. Usuários que visitarem sua página utilizando navegadores de internet antigos verão a cor sólida.
Instruções
-
Abra o arquivo de folha de estilo CSS no Bloco de notas ou em um programa de edição de código. Adicione esta regra ao final do arquivo:
html { height: 100%; }
Essa regra torna possível preencher todo o fundo de uma página da web com a listra gradiente que criará.
-
Defina uma cor de fundo para sua página dentro de "html {}" para fornecer a cor base para suas listras e um padrão para navegadores antigos:
html { height: 100%; background-color: black; }
-
Adicione o seguinte código ao seu padrão "html {}" para criar um efeito de listra horizontal:
background-image: linear-gradient(transparent 50%, white 50%);
Ele criará duas interrupções de cor, sendo a primeira transparente e a segunda branca. Cada interrupção de cor toma 50% do espaço do gradiente na tela. Ajuste a largura das tiras alterando os valores percentuais.
-
Adicione um valor zero à primeira interrupção de cor e separe-a com uma vírgula:
Background-image: linear-gradient(0, transparent 50%, black 50%);
Isso posicionará suas listras na vertical, em vez posicioná-las na horizontal.
-
Duplique a propriedade “background-image” (imagem de fundo) e seus valores numa nova linha. Faça isso duas vezes, criando três linhas com o mesmo código. Adicione o prefixo "-moz" ao gradiente linear em uma das linhas de código duplicadas. Adicione o prefixo "-webkit" à outra linha duplicada:
background-image: linear-gradient(0, transparent 50%, white 50%); background-image: -moz-linear-gradient(0, transparent 50%, white 50%); background-image: -webkit-linear-gradient(0, transparent 50%, white 50%);
-
Restrinja o gradiente a uma certa quantidade de pixels, definindo o "background-size" na próxima linha em seu código CSS:
background-size: 20px;
Altere o número de pixels do “background-size” para modificar o tamanho do gradiente. Por conta da repetição constante do gradiente na largura da página, cada repetição corresponderá a um conjunto de listras na tela.
Instruções
Aviso
- Alguns navegadores antigos não suportam os gradientes do CSS3. Quando desejar exibir listras para todo tipo de navegador, utilize comentários condicionais para incluir uma folha de estilos com um gráfico repetitivo.