Hover – los efectos que ocurren al pasar el mouse con html5 y css3


Hover – los efectos que ocurren al pasar el mouse con html5 y css, presentamos una colección de CSS3 impulsado con efectos de activación que se aplicarán a llamar a las acciones de botones o logos. Puedes aplicar fácilmente a tus propios elementos (etiquetas html), modificar o simplemente utilizar para probar el plugin.

Los detalles del front-end cuentan en la implementación de algún sistema, sitio web o más si eres una persona muy entusiasta y que realiza detalles con los botones, puedes implementar Hover que sin pensarlo te ayudara en lo que posibolemente te lleve un poco de tiempo y sea más de lo predestinado.

Lo que Hover tiene para nosotros es:

  1. Transformaciones 2D
  2. Transiciones
  3. Sombrear e iluminar.
  4. Burbujas
  5. Dobles

Las diferentes modalidades las cuales actúa esta librería son sin duda una manera en que los diseñadores o programadores están buscando la manera de ayudar a quien necesita apoyo y la de compartir su conocimiento, tal es el grado que la documentación esta muy clara:

1.- Descarga hover.css
2.- En hover.css, busca ‘Grow’ CSS, ahí están los efectos.

Este es el código de Grow:

[css]
/* Grow */

.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
[/css]

La implementación

[html]
<a class="button grow">Add to Basket</a>
[/html]

Puedes ver los ejemplos antes de utilizar: http://ianlunn.github.io/Hover/

La descarga también la puedes realizar en github: https://github.com/IanLunn/Hover.

[adjuntos descripcion=”Hover” link=”docs.google.com/uc?id=0B1D53uMGH6xzUldfeEZrMmpoOEE”]

Recuerda que normalmente los plugins o librerías que tenemos a disposicion para la descarga cuentan con ejemplos implementados dentro de la carpeta, que te puedes descargar en la parte superior izquierda de este sitio.