Hover
2.3.1
Une collection d'effets de survol alimentés par CSS3 à appliquer aux liens, boutons, logos, SVG, images sélectionnées, etc. Appliquez-le facilement à vos propres éléments, modifiez-le ou utilisez-le simplement pour vous inspirer. Disponible en CSS, Sass et LESS.
Démo | Tutoriel
npm install hover.css --savebower install hover --saveHover.css peut être utilisé de plusieurs manières ; copiez et collez l'effet que vous souhaitez utiliser dans votre propre feuille de style ou référencez la feuille de style. Ensuite, ajoutez simplement le nom de classe de l’effet à l’élément auquel vous souhaitez l’appliquer.
Si vous prévoyez d'utiliser uniquement un ou plusieurs effets, il est préférable de copier et coller un effet dans votre propre feuille de style, afin qu'un utilisateur n'ait pas à télécharger css/hover.css dans son intégralité.
En supposant que vous souhaitiez utiliser l’effet Grow :
Télécharger Hover.css
Dans css/hover.css , recherchez le Grow CSS (chaque effet est nommé à l'aide d'un commentaire au-dessus) :
/* 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 );
}Copiez cet effet puis collez-le dans votre propre feuille de style.
Dans le fichier HTML dans lequel vous souhaitez que l'effet apparaisse, ajoutez la classe .hvr-grow à l'élément choisi.
Exemple d'élément avant d'appliquer l'effet Hover.css :
< a href =" # " > Add to Basket a >Exemple d'élément après application de l'effet Hover.css :
< a href =" # " class =" hvr-grow " > Add to Basket a > Remarque : Depuis 2.0.0 tous les noms de classes Hover.css sont préfixés par hvr- pour éviter les conflits avec d'autres bibliothèques/feuilles de style. Si vous utilisez Sass/LESS, cela peut facilement être modifié en utilisant la variable $nameSpace / @nameSpace dans scss/_options.scss ou less/_options.less .
Si vous prévoyez d'utiliser de nombreux effets Hover.css, vous souhaiterez peut-être référencer l'intégralité de la feuille de style Hover.css.
hover-min.csshover-min.css aux fichiers de votre site Web, dans un répertoire nommé css par exemplehover-min.css dans < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >Alternativement, vous pouvez ajouter une référence dans une feuille de style existante comme ceci (cela peut être utile aux utilisateurs de WordPress qui ne peuvent pas modifier le HTML) :
@import url ( "hover-min.css" );.hvr-grow à l'élément choisi.Exemple d'élément avant d'appliquer l'effet Hover.css :
< a href =" # " class =" button " > Add to Basket a >Exemple d'élément après application de l'effet Hover.css :
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayPour rendre un élément "transformable", Hover.css donne ce qui suit à tous les éléments auxquels il est appliqué :
display : inline-block;
vertical-align : middle; Si vous souhaitez remplacer ce comportement, supprimez le CSS ci-dessus de Hover.css ou modifiez la propriété display de l'élément. Assurez-vous de déclarer le remplacement après les déclarations Hover.css afin que la cascade CSS prenne effet. Alternativement, si vous utilisez la version Sass/LESS de Hover.css, vous pouvez supprimer/commenter le mixin forceBlockLevel() trouvé dans scss/_hacks.scss ou less/_hacks.less .
Pour plus d'informations sur les éléments Transformable, consultez le module CSS Transforms.
Pour ajouter une icône Hover.css, placez l'icône HTML à l'intérieur de l'élément auquel un effet Hover.css est appliqué. Par exemple:
Dans le code ci-dessus, nous avons donné à un élément de lien une classe hvr-icon-forward qui fera avancer une icône lorsque le lien sera survolé. L'icône elle-même reçoit une classe hvr-icon pour faire savoir à Hover.css qu'il s'agit de l'icône que nous voulons animer. Dans cet exemple, notre icône provient de FontAwesome, que nous avons chargé dans le de notre page Web selon les instructions de FontAwesome, comme ceci :
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Remarque : depuis Hover.css v2.3.0, vous pouvez utiliser n'importe quelle méthode pour ajouter des icônes (auparavant, seul FontAwesome était pris en charge par défaut.) Par exemple, vous pouvez utiliser une autre bibliothèque d'icônes ou à la place, utiliser un image comme ceci :
Ici, l'image agira comme une icône car la classe hvr-icon lui est appliquée, et lorsqu'elle est survolée, l'icône tournera comme défini par la classe hvr-icon-spin sur l'élément parent.
La position de l'icône est entièrement sous votre contrôle. Vous pouvez le placer avant le texte, comme ceci :
Ou utilisez du CSS personnalisé pour positionner l’icône comme bon vous semble.
Le projet se compose des dossiers et fichiers suivants :
D'autres fichiers à noter incluent :
De nombreux effets Hover.css reposent sur des fonctionnalités CSS3 telles que les transitions, les animations, les transformations et les pseudo-éléments. Pour cette raison, les effets peuvent ne pas fonctionner pleinement dans les anciens navigateurs.
Outre les navigateurs mentionnés ci-dessus, Hover.css est pris en charge par tous les principaux navigateurs. Veuillez consulter caniuse.com pour une prise en charge complète de nombreuses technologies Web et tester vos pages Web en conséquence. Il est recommandé d'appliquer des effets de secours pour les anciens navigateurs, en utilisant CSS pris en charge par ces navigateurs ou une bibliothèque de test de fonctionnalités telle que Modernizr.
Grunt n'est pas essentiel mais peut accélérer le développement. Une fois Grunt installé, exécutez grunt à partir de la ligne de commande pour configurer un serveur de développement accessible à l'adresse http://127.0.0.1:8000/ ou votre adresse IP locale pour les tests réseau. Avec Grunt en cours d'exécution, Sass ou LESS seront prétraités (selon que vous travaillez à partir du dossier scss ou less ) et les fichiers CSS seront minifiés.
Remarque : à l'origine, Grunt a été configuré pour préfixer automatiquement les propriétés CSS, mais pour rendre le projet aussi accessible que possible, ce n'est plus le cas. Le mixin Sass/LESS prefixed(property, value) doit plutôt être utilisé pour le préfixe du navigateur. Voir Utilisation de Sass/LESS pour le développement et [Utilisation de LESS pour le développement].
Sass/LESS ne sont pas essentiels mais peuvent accélérer le développement. Prétraitez Sass/LESS avec votre logiciel préféré ou l'environnement fourni via Grunt.
Sass/LESS est utilisé dans le projet Hover.css pour séparer divers CSS en fichiers spécifiques. Chaque effet se trouve dans son propre fichier dans le répertoire effects . Hover.css utilise également les fichiers .scss et .less suivants :
Contient des hacks (lignes de code indésirables mais généralement nécessaires) appliqués à certains effets. Les hacks expliqués ici.
Contient des mixins prefixed et keyframes qui appliquent les préfixes nécessaires que vous spécifiez dans _options.scss / _options.less aux propriétés et aux images clés.
Les propriétés peuvent être préfixées comme ceci :
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); Le mixin prefixed reçoit la propriété que vous souhaitez préfixer, suivie de sa valeur.
Les images clés peuvent être préfixées comme suit :
@include keyframes(my-animation) {
to {
color : red;
}
} Le mix keyframes reçoit le nom de l'image clé, suivi du contenu à l'aide de la directive @content.
. keyframes ( my-animation , {
to {
color : red;
}
}); Le mix keyframes reçoit le nom de l'image clé, suivi du contenu, tous deux comme arguments.
Contient les options par défaut, diverses options d'effets et les préfixes du navigateur que vous souhaitez utiliser avec le mixin prefixed . Par défaut, seul le préfixe -webkit- est défini sur true (car la plupart des navigateurs ne nécessitent désormais pas de préfixes).
Depuis 2.0.0 , _options inclut également une option $nameSpace / @nameSpace qui vous permet de changer le nom avec lequel toutes les classes sont préfixées. L'espace de noms par défaut est hvr .
L'option $includeClasses / @includeClasses par défaut est définie sur true et générera tous les effets Hover.css sous leurs propres noms de classe, hvr-grow par exemple. Si vous souhaitez ajouter les propriétés qui composent les effets Hover.css à vos propres noms de classe, définissez cette option sur false .
Si vous souhaitez contribuer avec vos propres effets, veuillez consulter le Guide de contribution.
Hover.css est mis à disposition sous des licences personnelles/open source gratuites ou commerciales payantes en fonction de vos besoins. Pour comparer les licences, veuillez visiter la boutique Ian Lunn Design Limited et acheter une licence commerciale ici.
Pour un usage personnel/open source, Hover.css est mis à disposition sous licence MIT
Lire la licence complète
Pour un usage commercial, Hover.css est disponible sous licences commerciales, commerciales étendues et commerciales OEM.
Achat | Lire la licence complète
*À l'exception des applications permettant aux utilisateurs finaux de produire des applications distinctes. Voir la licence commerciale OEM.
Achat | Lire la licence complète
Si votre application permet aux utilisateurs finaux de produire des applications distinctes intégrant le logiciel de Ian Lunn Design Limited, par exemple une boîte à outils de développement, une bibliothèque ou un générateur d'applications, vous devez obtenir une licence commerciale OEM. Veuillez nous contacter pour plus d’informations sur la licence commerciale OEM.
Hover.css était auparavant disponible sous une licence MIT pour une utilisation commerciale et non commerciale. Toute personne ayant obtenu une licence MIT pour un usage commercial avant la v2.2.0 (24 mars 2017) peut continuer à utiliser les versions Hover.css antérieures à la v2.2.0 sous cette même licence.
Si vous souhaitez passer à la version 2.2.0 ou supérieure, ou si vous souhaitez simplement montrer votre soutien à Hover.css (nous l'apprécierions beaucoup !), veuillez acheter une licence commerciale à jour. Achetez une licence commerciale.
Ian Lunn est un développeur front-end indépendant et auteur de CSS3 Foundations.
Embauchez Ian pour les sites Web réactifs, les sites Web WordPress, JavaScript, l'animation et l'optimisation.
