BACKGROUD EM DEGRADÊ COM CSS

Autor: Emerson Farias

Há algum tempo atrás, quando os designers web necessitavam trabalhar com os degradês era necessário utilizar imagens, o que era mais trabalhoso, além de ter criar a imagem e era necessário em seguida implantar a imagem no código, também tinha uma influência no que diz respeito ao "peso" do site, isto é, o site demorava mais para carregar, além de outras desvantagens.

Atualmente, como é do conhecimento de todos, isso não é mais interessante, devido aos novos padrões web e principalmente no que diz respeito a velocidade necessária para abrir o site nos dispositivos móveis. 

Por isso, podemos substituir os efeitos em degradês formado a partir de imagens utilizando o CSS3, contudo temos que lembrar que os navegadores IE, Firefox, Opera, Safari, Chrome entre outros, por exemplo pode interpretar as cores no formato hexadecimal de maneiras diferentes. 

Abaixo um simples exemplo de uma degradê linear do preto para branco utilizando CSS3:

.background-degrade{
 
background-color: #000;
 
/* IE */
 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff)";
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff);
 
/* Mozilla */
 
background: -moz-linear-gradient(top, #000, #fff) repeat-X;
 
/* Safari, Google Chrome */
 
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) repeat-X;
 
}

Mas na Internet, encontramos várias ferramentas online que facilitam a vida dos designs nesta tarefa, e sem nenhum esforço, criam e geram o código fonte necessário do degradê, é só copiar e colar, uma mão na roda. Mas use com moderação! Pois na programação é necessário praticar, pois na hora que for necessário fazer algo no "braço", isto é, nos dedos, você vai saber desenvolver sem problemas ou dificuldades.

Segue os links de algumas destas ferramentas:

CSSMatic - Gradient Gerator

CSSPortal - CSS Gradient Generator

Colorzilla - Ultimate CSS Gradient Generator

CSS Gradient Generator

AngryTools - CSS Gradient Generator