Como trabalhar com gradientes lineares em css3
Video: CSS3 linear-gradient background tutorial HTML5 Linear Gradient Parameters
Conteúdo
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 (), é possível criar linhas (horizontais, verticais e inclinadas), diamantes, e praças.
Quando você combina o de 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.
Criar um novo arquivo de HTML5 com seu editor de texto.
Digite o seguinte código para a página HTML.
Um Fundo não-imagem Um simples título
de texto simples para ir com o título.
A principal finalidade deste exemplo é se concentrar em fundos, para que o conteúdo é bastante simples. Tudo que você vê é um cabeçalho simples e parágrafo.
Salve o arquivo como PatternedBackground.HTML.
A amostra será exibido em outros capítulos, de modo nomenclatura é importante.
Criar um novo arquivo CSS com seu editor de texto.
Digite o seguinte informações de estilo CSS.
{corpo fundo: linear de gradiente (45deg, carmesim, transparente, RoyalBlue) -background-cor: # 00ff00-fundo-de tamanho: 100 p 100 p;}O ponto focal de este padrão é a propriedade de fundo, que se baseia na função linear de gradiente (). Você pode usar esta função em um número de maneiras-o exemplo mostra uma maneira simples. Inicia-se, dizendo a função linear de gradiente () para traçar a linha em 45 graus.
Existem três cores no gradiente: carmesim, a cor do fundo (transparente mostra o plano de fundo), e RoyalBlue. O gradiente começa com carmesim, a transição para a cor de fundo, e terminam com RoyalBlue, todos em proporções iguais.
A propriedade background-color define um valor de verde neste caso. A propriedade de fundo de tamanho 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.
Video: Background com gradient - CSS3
Salve o arquivo como PatternedBackground.CSS.
A amostra será exibido em outros capítulos, de modo nomenclatura é importante.
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ê.