Ir para o conteúdo

Gradiente Css


Criado por Leonardo Souza, Out 04 2010 12:57

2 respostas neste tópico
  • Por favor, faça o login para responder

#1 Leonardo Souza

Leonardo Souza
  • Leonardo Souza
  • Colaborador
  • 1 Revisões

Revisou 04 outubro 2010 - 12:57

*
REVISÃO POPULAR!


<style type="text/css">
div.box{
background-color:#BOTTOM;
background-image:none;
/*firefox*/
background:-moz-linear-gradient(top, #TOP, #BOTTOM) repeat scroll 0 0 transparent;
/*chorme e outros webkit*/
background:-webkit-gradient(linear, left top, left bottom, from(#TOP), to(#BOTTOM));
/*ie*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#TOP, endColorstr=#BOTTOM);
}
</style>

<div class="box">
box que vai receber o gradiente.
</div>



onde:
#TOP - cor inicial do gradiente
#BOTTOM - cor final do gradiente

#2 Rick =)

Rick =)
  • Rick =)
  • Colaborador
  • 16 Revisões

Revisou 11 dezembro 2010 - 21:24

Só corrigindo uma coisinha, esse tipo de gradiente é LINEAR, não RADIAL como notítulo.
Loading Module: Computer Engineer
|############-------------------| 50%

#3 Paulo Eduardo

Paulo Eduardo
  • Paulo Eduardo
  • Colaborador
  • 2 Revisões

Revisou 25 novembro 2011 - 10:41

Vai um exemplo de gradient radial, é só trocar as cores.

background: -moz-radial-gradient(center, ellipse cover, #ffe732 1%, #d83131 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#ffe732), color-stop(100%,#d83131));
background: -webkit-radial-gradient(center, ellipse cover, #ffe732 1%,#d83131 100%);
background: -o-radial-gradient(center, ellipse cover, #ffe732 1%,#d83131 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffe732 1%,#d83131 100%);
background: radial-gradient(center, ellipse cover, #ffe732 1%,#d83131 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe732', endColorstr='#d83131',GradientType=1 );

Bom a notícia ruim é que não pega nos IEs. Mas para dar um jeito pro 9 você terá que acrescentar uma implementação no HTML.

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->





1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)