A maioria das pessoas vai querer algo um pouco mais emocionante do que uma cor de fundo ou um frame para seus sites CSS3. Por exemplo, você pode contar com uma função linear de gradiente () para executar a tarefa. Usando um gradiente linear (), você pode criar linhas (horizontais, verticais e inclinados), diamantes e praças.

Quando você combinar o gradiente linear () com outros métodos de gradiente (como a radial de gradiente ()) você pode criar todos os tipos de padrões. Por agora, criar um gradiente linear simples () usando o procedimento a seguir para ter uma idéia de como eles funcionam.

1. Criar um novo arquivo HTML5 com o seu editor de texto.

2. Digite o seguinte código para a página HTML.

   Um simples título
   de texto simples para ir com o título.

   A principal finalidade deste exemplo é se concentrar em fundos, de modo que o conteúdo é bastante simples. Tudo o que você vê é um cabeçalho simples e parágrafo.

3. Salve o arquivo como PatternedBackground.HTML.

   A amostra será exibido em outros capítulos, de modo nomenclatura é importante.

4. Criar um novo arquivo CSS com o seu editor de texto.

5. Digite o seguinte informações de estilo CSS.

   body {background: linear de gradiente (45deg, Crimson, Transparente, RoyalBlue) -background-color: # 00ff00-background-size: 100px 100px;}

   O ponto focal deste padrão é a propriedade do fundo, que conta com a função linear de gradiente (). Você pode usar esta função em um número de maneiras, o exemplo mostra uma maneira simples. Ele começa contando a função linear de gradiente () para desenhar a linha em 45 graus.

   Existem três cores no gradiente: Crimson, a cor de fundo (transparente mostra o plano de fundo), e RoyalBlue. O gradiente começará com Crimson, transição para a cor de fundo, e terminam com RoyalBlue, tudo em proporções iguais.

   A propriedade background-color define um valor de verde neste caso. A propriedade background-size define o tamanho do padrão de gradiente. Seria fácil de se obter um número de efeitos diferentes, utilizando o mesmo gradiente linear-() e variando estas duas últimas propriedades.

6. Salve o arquivo como PatternedBackground.CSS.

   A amostra será exibido em outros capítulos, de modo nomenclatura é importante.

7. Salve o arquivo HTML e recarregue a página.

   Você vê o fundo mostrado, o que é bastante dramática. O fundo repete automaticamente, não importa como o usuário redimensiona a janela.

   

É possível combinar gráficos e gradientes para criar efeitos ainda mais incomum, sem recorrer a programação. Basta substituir uma das entradas de cor com o URL para um gráfico para download usando a função url (). O gradiente resultante irá combinar cores, gráficos, transparência e efeitos de transição para criar um fundo incomum para você.