Olá, pessoal. Tudo certo? Hoje iremos aprender um efeito que é muito, mas muito utilizado hoje em diversos sites, o Background Gradient.
Antes do CSS3, para realizarmos este efeito, precisávamos criar imagens com o gradiente que queríamos fazer e colocar essas imagens de plano de fundo do elemento onde queríamos o efeito. Era um tanto quanto trabalhoso, mas nada de outro mundo. Porém, com o CSS3 nós podemos fazer este efeito simplesmente digitando os códigos certos.
Primeiro vamos criar um link que será a nossa cobaia, por assim dizer. Abra seu editor HTML preferido, coloque as tags básicas de um template HTML (caso você não saiba quais são, leia a
Parte 1 da série Aprenda HTML na Prática) e, dentro das tags
<body> </body> do seus arquivo copie ou digite o seguinte código:
<a href="#">Teste de Gradiente</a>
Agora salve o arquivo como
gradiente.html, em um local de sua escolha. Agora vamos ao nosso código CSS. Para este tutorial, é completamente desnecessário criarmos um arquivo
*.css separado apenas para digitar algumas linhas de código. Por tanto, vamos utilizar a "segunda" forma de escrevermos arquivos CSS (leia novamente a
Parte 1 da série Aprenda HTML e CSS na Prática). Portanto, dentro da tag
<head> </head> do seu arquivo
gradiente.html coloque o seguinte:
<style type="text/css">
</style>
Agora vamos inserir o código CSS. A primeira vista você pode se assustar, mas calma, só parece um bicho de sete cabeças, mas é muito simples.
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #111;
padding: 10px;
float: left;
margin: 30px;
font-family: "trebuchet ms";
background: rgb(167,199,220); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,199,220,1) 0%, rgba(58,146,209,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,199,220,1)), color-stop(100%,rgba(58,146,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 2%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#3a92d1',GradientType=0 ); /* IE6-9 */
}
Salve e veja o resultado. E então, gostou? Agora vamos a explicação do código CSS.
*{
margin:0;
padding:0;
}
Este trecho refere-se a
todos os elementos da página. No caso todos os elementos terão uma
margin:0 e
padding:0. Isso chama-se
CSS Reset e é utilizado pois alguns navegadores colocam, por si próprios, uma margem nos elementos da página, isso faz com que, por vezes, o layout fique descaracterizado ou criando barras horizontais, o que não é interessante.
a{
text-decoration: none;
color: #111;
padding: 10px;
float: left;
margin: 30px;
font-family: "trebuchet ms";
background: rgb(167,199,220); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,199,220,1) 0%, rgba(58,146,209,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,199,220,1)), color-stop(100%,rgba(58,146,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 2%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(167,199,220,1) 0%,rgba(58,146,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#3a92d1',GradientType=0 ); /* IE6-9 */
}
Neste trecho é que começamos a configurar o link. Mas como assim, o link? Lembra-se que a tag HTML para link é a
<a> </a>? Pois então. Neste caso, fazemos com que o link
não tenha nenhuma
text-decoration, ou seja, sabe aquele
underline que fica em baixo dos links? Acabamos de retirá-lo. Depois, atribuímos uma
color: #111, que é quase um preto.
Definimos um
padding, que é um preenchimento, de
10px para todos os lados (em outro tutorial aprenderemos a diferenciar os lados, com valores para topo, direita, base e esquerda). Fazemos o texto
flutuar para esquerda. Tera uma
margem de
30px para todos os lados. Muita gente confunde e não sabe exatamente a diferença entre
margin e
padding. Na verdade é muito simples,
margin refere-se ao bloco e
padding ao conteudo do bloco. No nosso caso aqui, a
margin fará com que nosso link afaste-se
30px de cada lado da nossa tela, já o
padding fará com que o text do nosso link (Teste de Gradiente) tenha um espaçamento de
10px para todos os lados. Backgrounds, sendo gradientes ou não, sempre vão ter o tamanho do padding de cada elemento. Como definimos, no início, que por padrão todos os elementos terão
padding: 0, caso você não especifique no elemento que deseja, o background não terá o efeito desejado. Faça um teste e retire o
padding do nosso link e visualize no navegador e depois recoloque e visualize novamente. Faça a mesma coisa com o
margin e entenderá melhor o que digo.
A
fonte do link será a
Trebuchet MS. E teremos o nosso
background-gradient.
Não se assuste com o tamanho do código para o gradiente. Ele está assim pois está configurado para rodar em todos os navegadores, e isso é o que queremos, certo? Ao final de cada linha, temos os comentários referentes a quais navegadores estão sendo referidos os códigos. Infelizmente não há um padrão único para o gradiente com CSS3, existem padrões para determinados navegadores e o Internet Explorer. O que quero ressaltar é o código de cores utilizado. Neste exemplo foi utilizado o padrão RGB (Red Green Blue), mas podem ser utilizados outros dois padrões como o Hexadecimal (meu preferido) e HSL. Acho o código do gradiente bastante intuitivo, por exemplo:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,199,220,1)), color-stop(2%,rgba(58,146,209,1)));
Aqui temos: um gradiente
linear, partindo do
topo esquerdo e acabando no
rodapé esquerdo, a cor do inicio (
topo esquerdo) será
rgba(167,199,220,1) e a cor do final (
rodapé esquerdo) será
rgba(58,146,209,1).
Simples, não?
Existem na internet diversas ferramentas que geram códigos de gradientes. Sinceramente, EU não gosto muito. Prefiro aprender o código, pois talvez você se encontre em uma situação que não terá como recorrer a estes recursos e então ficará em maus lençóis. Mas de qualquer maneira, uma ótima ferramenta é a do site
ColorZilla, que você pode experimentar. O código deste tutorial foi gerado lá (pura preguiça de escrever, rs).
Mas atenção!! Utilize esta propriedade com sabedoria e cuidado!
Então é isso. Acho que ficou muito grande, mas acontece. Até a próximo e continuem acompanhando o site.
Cássio Fabre
