Hola, desafortunadamente, no puedes hacer una transición de gradientes. A lo que me refiero, es que tienes que utilizar o una imagen o un color determinado. No un gradiente.
Te dejo un ejemplo de como hacerlo:
Codigo CSS
<style type="text/css" media="screen">
.dm_box{
/* Safari 5.1+ - Chrome 10.0+*/
background: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
/* Mozilla Firefox 3.6+ */
background: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
/* Ms Internet Explorer 10+ */
background: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
/* Opera 11.10+ */
background: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
/* Estandart, todavia no se ha implementado xD */
background: linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
width:300px;
height:200px;
text-align:center;
padding-top:100px;
}
.dm_box:hover {
background: #000;
color: #fff;
-webkit-transition-property: background, color;
-webkit-transition-duration: 0.7s, 0.3s;
-webkit-transition-timing-function: linear;
-moz-transition-property: background, color;
-moz-transition-duration: 0.7s, 0.3s;
-moz-transition-timing-function: linear;
-o-transition-property: background, color;
-o-transition-duration: 0.7s, 0.3s;
-o-transition-timing-function: linear;
transition-property: background, color;
transition-duration: 0.7s, 0.3s;
transition-timing-function: linear;
}
</style>
Codigo html
<div class="dm_box">Soy un dios en tu culo xD
</div>
PD: Para evitar los problemas con compatibilidades, yo usaría jQuery por ejemplo. Es javascript pero te evitas 999 lineas de css para un efecto un tanto cutre xD.
Saludos
Autor
, la cosa es que cuando pasas el puntero verticalmente hacia abajo o vice versa, vez como si quedara una leve sombra al estilo estela de barco, pero cuando quize implementar el efecto con un degradado no supe como hacerlo desde css, alguién me podría decir como se tendría que hacer?, porque en transition-propety: linear-gradient con sus respectivos -moz-, -o-, -webkit- y sin ellos no me funka, la verdad estoy un poco confundido ya que son propios de los navegadores y no de css3, no se si pudieran funcionar... me dan una mano?...saludos
En línea
