Hover
2.3.1
Una colección de efectos de desplazamiento con tecnología CSS3 que se aplicarán a enlaces, botones, logotipos, SVG, imágenes destacadas, etc. Aplíquelo fácilmente a sus propios elementos, modifíquelo o simplemente utilícelo como inspiración. Disponible en CSS, Sass y MENOS.
Demostración | Tutorial
npm install hover.css --savebower install hover --saveHover.css se puede utilizar de varias maneras; Copie y pegue el efecto que desea usar en su propia hoja de estilo o haga referencia a la hoja de estilo. Luego simplemente agregue el nombre de clase del efecto al elemento al que desea aplicarlo.
Si planea usar solo uno o varios efectos, es mejor copiar y pegar un efecto en su propia hoja de estilo, para que el usuario no tenga que descargar css/hover.css en su totalidad.
Suponiendo que desea utilizar el efecto Crecer:
Descargar Hover.css
En css/hover.css , busque Grow CSS (cada efecto se nombra usando un comentario encima):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}Copie este efecto y luego péguelo en su propia hoja de estilo.
En el archivo HTML en el que desea que aparezca el efecto, agregue la clase .hvr-grow al elemento elegido.
Elemento de ejemplo antes de aplicar el efecto Hover.css:
< a href =" # " > Add to Basket a >Elemento de ejemplo después de aplicar el efecto Hover.css:
< a href =" # " class =" hvr-grow " > Add to Basket a > Nota : A partir de 2.0.0 todos los nombres de clases de Hover.css tienen el prefijo hvr- para evitar conflictos con otras bibliotecas/hojas de estilo. Si usa Sass/LESS, esto se puede cambiar fácilmente usando la variable $nameSpace / @nameSpace en scss/_options.scss o less/_options.less .
Si planea utilizar muchos efectos de Hover.css, es posible que desee consultar la hoja de estilo completa de Hover.css.
hover-min.csshover-min.css a los archivos de su sitio web, en un directorio llamado css por ejemplohover-min.css en < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >Alternativamente, puedes agregar una referencia a una hoja de estilo existente de esta manera (esto puede ser útil para los usuarios de WordPress que no pueden editar HTML):
@import url ( "hover-min.css" );.hvr-grow al elemento elegido.Elemento de ejemplo antes de aplicar el efecto Hover.css:
< a href =" # " class =" button " > Add to Basket a >Elemento de ejemplo después de aplicar el efecto Hover.css:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayPara hacer que un elemento sea "transformable", Hover.css proporciona lo siguiente a todos los elementos a los que se aplica:
display : inline-block;
vertical-align : middle; Si desea anular este comportamiento, elimine el CSS anterior de Hover.css o cambie la propiedad display del elemento. Asegúrese de declarar la anulación después de las declaraciones de Hover.css para que la cascada CSS entre en vigor. Alternativamente, si está utilizando la versión Sass/LESS de Hover.css, puede eliminar/comentar el mixin forceBlockLevel() que se encuentra en scss/_hacks.scss o less/_hacks.less .
Para obtener más información sobre los elementos transformables, consulte el módulo Transformaciones CSS.
Para agregar un ícono Hover.css, coloque el ícono HTML dentro del elemento al que se aplica un efecto Hover.css. Por ejemplo:
En el código anterior, le hemos dado a un elemento de enlace una clase de hvr-icon-forward que hará que un icono avance cuando se coloque el cursor sobre el enlace. Al ícono en sí se le asigna una clase de hvr-icon para que Hover.css sepa que este es el ícono que queremos animar. En este ejemplo, nuestro ícono es de FontAwesome, que hemos cargado en el de nuestra página web según las instrucciones de FontAwesome, así:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Nota: A partir de Hover.css v2.3.0, puede usar cualquier método que desee para agregar íconos (anteriormente, solo se admitía FontAwesome de fábrica). Por ejemplo, puede usar otra biblioteca de íconos o, en su lugar, usar una imagen así:
Aquí, la imagen actuará como icono porque tiene aplicada la clase hvr-icon y, cuando se pasa el cursor sobre ella, el icono girará según lo definido por la clase hvr-icon-spin en el elemento principal.
La posición del icono está totalmente bajo tu control. Podrías colocarlo antes del texto, así:
O utilice CSS personalizado para colocar el icono como mejor le parezca.
El proyecto consta de las siguientes carpetas y archivos:
Otros archivos destacados incluyen:
Muchos efectos de Hover.css se basan en características de CSS3, como transiciones, animaciones, transformaciones y pseudoelementos; por esa razón, es posible que los efectos no funcionen completamente en navegadores más antiguos.
Aparte de los navegadores mencionados anteriormente, Hover.css es compatible con todos los navegadores principales. Consulte caniuse.com para obtener soporte completo para muchas tecnologías web y pruebe sus páginas web en consecuencia. Se recomienda aplicar efectos alternativos para navegadores más antiguos, utilizando CSS compatible con esos navegadores o una biblioteca de prueba de funciones como Modernizr.
Grunt no es esencial pero puede acelerar el desarrollo. Con Grunt instalado, ejecute grunt desde la línea de comando para configurar un servidor de desarrollo al que se accede en http://127.0.0.1:8000/ o su IP local para realizar pruebas de red. Con Grunt ejecutándose, se preprocesará Sass o LESS (dependiendo de si trabaja con la carpeta scss o less ) y los archivos CSS se minimizarán.
Nota: Originalmente, Grunt se configuró para prefijar automáticamente las propiedades CSS, pero para que el proyecto sea lo más accesible posible, este ya no es el caso. En su lugar, se debe utilizar el mixin Sass/LESS prefixed(property, value) para el prefijo del navegador. Consulte Uso de Sass/LESS para desarrollo y [Uso de LESS para desarrollo].
Sass/LESS no son esenciales pero pueden acelerar el desarrollo. Preprocese Sass/LESS con su software favorito o el entorno proporcionado a través de Grunt.
Sass/LESS se utiliza en el proyecto Hover.css para separar varios CSS en archivos específicos. Cada efecto está dentro de su propio archivo en el directorio effects . Hover.css también utiliza los siguientes archivos .scss y .less :
Contiene hacks (líneas de código no deseadas pero generalmente necesarias) aplicadas a ciertos efectos. Hacks explicados aquí.
Contiene mixins prefixed y keyframes que aplican los prefijos necesarios que especifique en _options.scss / _options.less a las propiedades y fotogramas clave.
Las propiedades pueden tener prefijos así:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); Al mixin prefixed se le pasa la propiedad que desea prefijar, seguida de su valor.
Los fotogramas clave pueden tener prefijos así:
@include keyframes(my-animation) {
to {
color : red;
}
} Al mixin de keyframes se le pasa el nombre del fotograma clave, seguido del contenido mediante la directiva @content.
. keyframes ( my-animation , {
to {
color : red;
}
}); Al mixin de keyframes se le pasa el nombre del fotograma clave, seguido del contenido, ambos como argumentos.
Contiene opciones predeterminadas, varias opciones de efectos y los prefijos del navegador que le gustaría usar con el mixin prefixed . De forma predeterminada, solo el prefijo -webkit- está configurado en true (debido a que la mayoría de los navegadores ahora no requieren prefijos).
A partir de 2.0.0 , _options también incluye una opción $nameSpace / @nameSpace que le permite cambiar el nombre con el que tienen el prefijo todas las clases. El espacio de nombres predeterminado es hvr .
La opción $includeClasses / @includeClasses de forma predeterminada está configurada en true y generará todos los efectos de Hover.css bajo sus propios nombres de clase, hvr-grow por ejemplo. Si desea agregar las propiedades que componen los efectos de Hover.css a sus propios nombres de clase, configure esta opción en false .
Si desea contribuir con sus propios efectos, consulte la Guía de contribución.
Hover.css está disponible bajo licencias personales/de código abierto gratuitas o licencias comerciales pagas, según sus requisitos. Para comparar licencias, visite la tienda Ian Lunn Design Limited y compre una licencia comercial aquí.
Para uso personal/de código abierto, Hover.css está disponible bajo una licencia del MIT.
Leer licencia completa
Para uso comercial, Hover.css está disponible bajo licencias Comercial, Comercial Extendida y Comercial OEM.
Compra | Leer licencia completa
*Con excepción de las aplicaciones que permiten a los usuarios finales producir aplicaciones independientes. Consulte la Licencia comercial OEM.
Compra | Leer licencia completa
Si su aplicación permite a los usuarios finales producir aplicaciones independientes que incorporen el software de Ian Lunn Design Limited, por ejemplo, un kit de herramientas de desarrollo, una biblioteca o un creador de aplicaciones, debe obtener una licencia comercial OEM. Comuníquese con nosotros para obtener más información sobre la licencia comercial OEM.
Hover.css anteriormente estaba disponible bajo una licencia MIT para uso comercial y no comercial. Cualquiera que haya obtenido una licencia MIT para uso comercial antes de la v2.2.0 (24 de marzo de 2017) puede continuar usando las versiones de Hover.css anteriores a la v2.2.0 bajo esa misma licencia.
Si desea actualizar a la versión 2.2.0 o superior, o simplemente desea mostrar su soporte para Hover.css (¡se lo agradeceríamos mucho!), compre una licencia comercial actualizada. Compra una licencia comercial.
Ian Lunn es un desarrollador front-end independiente y autor de CSS3 Foundations.
Contrate a Ian para sitios web responsivos, sitios web de WordPress, JavaScript, animación y optimización.
