Hover.css - Bibliothèque CSS3 avec plus de 40 effets planant

Lorsque vous tentez d'attirer l'attention des utilisateurs, il existe plusieurs façons d'y parvenir. Pour les cas particuliers, survol est un excellent moyen d'attirer l'attention sur un lien ou un bouton. Normalement, hover fonctionne en modifiant la couleur de l'élément ou l'état du dégradé lorsque les utilisateurs déplacent leurs curseurs. Mais avec beaucoup de fonctionnalités dans CSS3, beaucoup de choses peuvent également être personnalisées avec l'effet hover. L'un d'eux est l'application de l'animation. Et Hover.css peut y arriver facilement.

Hover.css est une bibliothèque CSS gratuite pour appliquer facilement une animation en utilisant l'effet hover. Vous pouvez appliquer le hover dans l'appel à des actions, des boutons, des logos, des images et bien plus encore. Cette bibliothèque est proposée avec plus de 40 effets et ils sont classés en fonction des éléments suivants: transformations 2D, transitions de bordure, transitions d'ombre et de lueur, bulles et boucles de page .

Premiers pas avec Hover

Pour commencer, vous devez télécharger Hover puis mettre le fichier hover.css dans votre dossier de projet. Ou si vous préférez, vous pouvez utiliser hover-min.css, une version plus compacte, plus petite et plus rapide à charger. Enfin, lier le fichier dans votre page Web comme ceci:

 ..  .. 

Ajouter un vol plané à un élément

Pour ajouter un effet de survol cool dans votre élément, il suffit d'inclure le nom de l'effet dans la classe d'élément. Vous pouvez voir la démo en direct de tous les effets disponibles dans la page de destination Hover. Assurez-vous de n'utiliser que des lettres minuscules et s'il y a de l'espace entre les deux, remplacez-le simplement par un tiret.

Disons que j'ai le lien suivant:

Si stylé correctement, le lien sort comme ça:

Le lien a changé pour ressembler à un bouton. Mais quand je déplace le curseur dessus, le bouton ne change pas et reste statique. Avec un effet Hover, Hover Shadow, je modifie le balisage et lui ajoute une classe comme ceci:

Maintenant, le bouton a un effet de flottement cool flottant avec une ombre en dessous, tout comme la démo GIF suivante.

Certains piratage et personnalisation

Si vous ouvrez hover.css avec un éditeur, vous constaterez que chaque effet est livré avec des propriétés par défaut. Ces propriétés donnent à l'élément le résultat le plus désiré à la fois pour l'affichage et le look. Voici les propriétés par défaut, allez-y et personnalisez-les pour répondre à vos besoins:

• display : nécessaire pour qu'un effet fonctionne.
• transform : utilisé pour les transformations CSS3 pour améliorer les performances sur mobile et tablette
• box-shadow : donne une ombre de boîte transparente, ce qui rend les bords des éléments transformés CSS3 sur le mobile / tablette plus lisse

Pensée finale

Hover est une autre meilleure pratique de mise en œuvre de CSS3. Mais comme la plupart des effets tels que les transitions, les transformations et les animations utilisent de nouvelles fonctionnalités CSS3, vous devrez effectuer un travail supplémentaire sur les anciens navigateurs qui ne prennent pas en charge ces fonctionnalités pour vous assurer que l'effet hoverback fonctionne bien.

Exécutez le code SQL dans votre navigateur avec SQLPad

L'essor des IDE basés sur le cloud facilite le codage de n'importe où. Avec les IDEs cloud, vous pouvez apprendre à créer des sites Web sans aucun logiciel de codage!Et avec les avancements du navigateur, vous pouvez même commencer à exécuter des codes plus dynamiques comme la base de données SQL. La web

(Conseils techniques et de conception)

Comment faire pour promouvoir votre chaîne YouTube au budget zéro

Vous produisez peut-être du contenu vidéo génial et diffusez une excellente chaîne YouTube, mais si vous ne faites pas un effort supplémentaire pour la promouvoir, il devient difficile de gagner de nouveaux abonnés .Pensez-y comme un entonnoir. Pour devenir votre abonné, il faut que vous trouviez votre vidéo via la recherche YouTube ou via un lien de parrainage, ils le regarderaient, et s'ils le trouvaient assez intéressant, ils s'abonneraient à votre chaîne .Cependant,

(Conseils techniques et de conception)