Quem é que não se lembra daquela época em que os desenvolvedores e designers tinham que usar imagens para criar degradês? Parece que faz uma eternidade, não é mesmo? Mas, felizmente, o tempo voa e agora temos uma solução muito mais prática! É possível criar degradês diretamente com CSS, sem precisar se preocupar com imagens complicadas. Vamos dar adeus a esse pesadelo! ????

Bem, é verdade que os navegadores costumavam ser um pouquinho teimosos e usavam funções próprias para lidar com degradês. Em 2012, degrades não era um atributo oficial do CSS, então, por via das dúvidas, a dica era sempre definir uma background-color intermediária no documento, só pra garantir, né? Melhor prevenir do que remediar!

Olha só esse exemplo simples para criar um degradê que vai do preto (#000000) ao branco (#ffffff) e ser interpretado da mesma maneira no IE, Mozilla, Safari e Chrome:

.fundo-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;
}

O exemplo acima é do degradê básico. Se você quer outros efeitos degradê, uma boa ferramenta online é o CSS Gradient, aonde você escolhe o estilo de gradiente que mais lhe agrada, personaliza com as cores desejadas e aí e só copiar e colar o código CSS gerado em sua folha de estilos!

// Comente!

comentários