Crie gradientes com CSS

Nós vamos precisar
Um editor de código
Os códigos alfanuméricos das cores a usar
Um navegador da web

Passo 1

Vou começar criando uma pasta para este tutorial que chamarei de "trucos_css"Dentro dele vou criar outra chamada"css”, Neles guardarei os arquivos de que necessito.

Passo 2

Vou para o meu editor de código, neste caso vou usar Brackets e prosseguir com a criação de um novo arquivo "index.html"Que vou guardar na raiz da pasta"tricks_css", Também vou criar um arquivo"style.css"Isso irei salvar na pasta" css "criada no passo 1.

etapa 3

No meu arquivo "index.html" vou escrever a estrutura html básica e adicionar uma referência à folha de estilo "style.css"Que na etapa anterior salve no caminho"css / style.css”.
Código de index.html:

 Truques CSS - Gradientes 

Passo 4

No arquivo "index.html" irei incluir um novodentro do qual irei mais tarde atribuir a classe "gradiente"Que vou escrever mais tarde no arquivo"style.css”.
O código index.html terá a seguinte aparência:

 Truques CSS

Etapa 5

Agora vou trabalhar no arquivo "style.css”, Começarei por definir o tamanho que a etiqueta irá cobrir , Vou definir uma largura de 100%, uma altura de 100%, vou declarar que não terá margens ou preenchimento e direi que sua posição será absoluta para cobrir o tamanho total na tela.
Código Style.css:

 corpo {largura: 100%; altura: 100%; margem: 0px; preenchimento: 0px; posição: absoluta; }

Etapa 6

Continuamos editando nosso css, agora vou adicionar a classe "gradiente"Nele irei indicar que deve ser exibido com altura de 100% e largura igual, escreverei que terá um seletor de fundo que conterá a propriedade"Gradiente linear ()Que funciona da seguinte maneira …
Dentro dos parênteses, indicamos para onde o final do nosso gradiente é direcionado e as cores que ele irá mostrar de uma extremidade à outra. A sintaxe seria mais ou menos assim:

 fundo: gradiente linear (direção, cor-stop1, cor-stop2, …); 

Onde na posição chamada direção definiremos a direção que o gradiente seguirá na telatopo esquerdo = esquerda e para cima
bem no topo = direita e para cima
canto inferior direito = para baixo e para a direita
inferior esquerdo = para baixo e para a esquerda
para o canto inferior direito = para baixo e para a direita começando do canto superior esquerdo
para a esquerda inferior = abaixo e à direita começando do canto superior direito
para cima à direita = superior e direita começando da parte inferior esquerda
para cima à esquerda = superior e esquerdo começando do inferior direito
Quanto às cores você pode escolher as de sua preferência, neste caso irei fazer um gradiente que vai do branco ao preto passando por dois tons de azul.
Nosso código css seria o seguinte:

 corpo {largura: 100%; altura: 100%; margem: 0px; preenchimento: 0px; posição: absoluta; } .gradient {largura: 100%; altura: 100%; plano de fundo: gradiente linear (para o canto inferior direito, # fff, # 00e2ff, # 00f, # 000); } 

O resultado seria o seguinte.

Mas como tudo neste mundo, existem outras maneiras de fazer isso muito mais fácil e rápido e sem digitar muito, podemos ir para nosso navegador e procurar o seguinte endereço da web http: //www.colorzill… radient-editor /

Nele encontrarão uma série de gradientes já predefinidos e que também podem personalizar, só terão que selecionar um, ajustá-lo à sua preferência se quiserem, copiar o código ccs que é mostrado no lado direito da tela e cole-o dentro da camada "gradiente" que já criamos, substituindo o que encontramos escrito nele no passo 6. Eu recomendo esta opção porque eu particularmente a uso e o código que ela nos fornece está pronto para funcionar em qualquer navegador.

Depois de copiar este código, iremos colá-lo em nosso css, deixando-o da seguinte forma:

 corpo {largura: 100%; altura: 100%; margem: 0px; preenchimento: 0px; posição: absoluta; } .gradient {largura: 100%; altura: 100%; fundo: rgb (212,228,239); / * Navegadores antigos * / background: -moz-linear-gradient (superior, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * FF3.6 + * / background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, rgba (212,228,239,1)), cor-stop (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Chrome10 +, Safari5.1 + * / background: gradiente -o-linear (topo, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Opera 11.10+ * / background: gradiente -ms-linear (topo, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * IE10 + * / background: gradiente linear (para baixo, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

E o resultado neste caso seria este.
PROLONGAR
Espero que seja útil, para mais manobras não esqueçam de me seguir …
Se gostou deste tutorial, não se esqueça de avaliá-lo e caso tenha dúvidas ou comentários deixe-os abaixo, terei todo o gosto em responder. Saudações … Gostou e ajudou este Tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo