JMiur [E]

Aunque las transiciones con CSS pueden aplicarse a muchas propiedades pero no a las gradientes aunque, como estas son "imágenes de fondo" lo que puede hacerse es aplicar esas transiciones sobre otras propiedades background y de tal modo, simular animaciones.

Los ejemplos de impressivewebs usan dos propeidades especiificas: background-size y background-position pero, podría probarse con cualquier otra y ver qué sale.
<a href="#" class="botonT ejemplo2">ejemplo #1</a>
Todo se reduce a un enlace donde hay dos clases, la primera (botonT ) es general, establece las mismas propiedades de todos los ejemplos:
.botonT:link, .botonT:visited {
  border: solid 2px rgba(0,0,0,0.2);
  border-radius: 10px;
  color: #FFF;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 200px;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}
La segunda es exclusiva de cada uno de ellos:


ejemplo #1

.ejemplo1:link, .ejemplo1:visited {
  background: #38B;
  background: -moz-linear-gradient(#38B, #22B);
  background: -webkit-linear-gradient(#38B, #22B);
  background: -o-linear-gradient(#38B, #22B);
  background: -ms-linear-gradient(#38B, #22B);
  background: linear-gradient(#38B, #22B);
  background-repeat: repeat;
  -moz-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
}

.ejemplo1:hover, .ejemplo1:focus, .ejemplo1:active {
  background-position: 0 -120%;
}

ejemplo #2

.ejemplo2:link, .ejemplo2:visited {
  background: #ABC;
  background: -moz-radial-gradient(#ABC, #456);
  background: -webkit-radial-gradient(#ABC, #456);
  background: -o-radial-gradient(#ABC, #456);
  background: -ms-radial-gradient(#ABC, #456);
  background: radial-gradient(#ABC, #456);
  -moz-background-size: 100% 10%;
  -webkit-background-size: 100% 10%;
  background-size: 100% 10%;
}

.ejemplo2:hover, .ejemplo2:focus, .ejemplo2:active {
  background-position: 0 0;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

ejemplo #3

.ejemplo3:link, .ejemplo3:visited {
  background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background-position: center center;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.ejemplo3:hover, .ejemplo3:focus, .ejemplo3:active {
   -moz-background-size: 100% 200%;
   -webkit-background-size: 100% 200%;
   background-size: 100% 200%;
}

2 comentarios:

Unknown  

Geniales! un encanto :)

JMiur  

Para jugar con cosas raras :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR