Le partage fait partie intégrante de l'expérience Web et les concepteurs recherchent en permanence de nouvelles méthodes intéressantes pour mettre en valeur ou afficher la partie de partage de leurs pages.
Aujourd'hui, nous allons créer un menu de partage simple qui intègre une police d'icônes ainsi que des animations. Le produit final est inspiré de Disqus, mais possède une touche unique. Faisons un saut et voyons comment cela fonctionne.
Découvrez la démo finale: Cliquez ici
Menu de partage Disqus
L’idée du tutoriel d’aujourd’hui vient du menu de commentaires de Disqus que vous voyez au bas de cet article et de tous les autres articles de Design Shack. Lorsque quelqu'un laisse un commentaire, vous pouvez le partager via un petit menu de partage soigné. Par défaut, il s’agit simplement du mot "partage", mais lorsque vous la survolez, trois icônes sociales s’échappent et deviennent visibles. C'est un effet accrocheur qui est très simple à créer, alors j'ai pensé qu'il serait amusant de le parcourir.
Étape 1. La police d'icônes
Pour ce menu, nous aurons besoin d’au moins trois icônes de partage social. Pour éviter les problèmes de dimensionnement que vous voyez dans l'exemple Disqus ci-dessus, j'aimerais qu'ils soient basés sur des vecteurs. Pour ce faire, nous pourrions procéder de deux manières différentes. La première consiste à utiliser les graphiques SVG, ce qui est assez simple. Peut-être une voie encore plus facile consiste-t-elle simplement à utiliser une police d’icônes.
Après quelques recherches, j'ai trouvé Socialico de FontFabric, un logiciel gratuit qui contient de nombreuses icônes et dont l'utilisation est autorisée à l'intégration sur des sites Web.
Maintenant, pour nous assurer que nous avons une compatibilité maximale pour incorporer cette police dans notre page, passons à FontSquirrel. Ce site nous permettra de télécharger un fichier de police unique et de télécharger un kit @ font-face bien emballé, contenant tous les types de fichiers et le code nécessaires pour intégrer la police avec CSS.
Après avoir téléchargé le kit @ font-face, récupérez tous les fichiers de polices inclus et jetez-les dans le répertoire de votre site principal pour ce projet. Si nous ouvrons le fichier CSS généré, nous trouvons le code suivant, que nous pouvons copier et coller dans notre propre CSS.
Jusqu'ici tout va bien! Nous disposons maintenant d'une police géniale qui intégrera des icônes sociales infiniment évolutives dans notre page. Vous devez apprécier ce genre de commodité.
Étape 1. Le HTML
Maintenant il est temps de marquer ce meunier. Faire cela est extrêmement facile. Commencez par créer un paragraphe avec un nom de classe "share", puis tapez "share". dans le texte aussi.
Ensuite, ajoutez trois liens après le partage? texte. Je vais utiliser les majuscules F, L et S, qui se traduisent par Facebook, Twitter et StumbleUpon dans notre police d'icônes de réseaux sociaux.
C'est tout! Tout ce dont nous avons besoin, c'est de ce simple balisage. Nous allons faire appel à CSS pour tous les éléments sophistiqués.
Étape 2. Paragraphe CSS
La première chose que nous allons devoir styler est le paragraphe lui-même. Il y a quelques points clés à obtenir ici. Premièrement, nous devons définir la position pour relatif. C’est le cas par la suite, lorsque nous utiliserons le positionnement absolu sur les icônes, celles-ci resteront dans les limites du paragraphe.
Ensuite, nous ajoutons de la marge, du rembourrage, des dimensions, de la couleur et définissons la police. Notez que tout est super-dimensionné pour les besoins de la démo. N'hésitez pas à réduire tout cela!
Avec ce morceau de code, voici à quoi devrait ressembler votre page. Notez que, à ce stade, les icônes ne sont que des lettres, car nous n’avons pas encore défini la police des liens. Prenons soin de cela ensuite.
Étape 3. Paragraphe CSS
Il est maintenant temps de coder ces balises d'ancrage. Ici, nous allons utiliser le positionnement absolu, ce qui, encore une fois, réinitialise la position de ces liens dans les limites de notre paragraphe relativement positionné. Avec le positionnement absolu, nous pouvons mettre les articles en place avec le Haut et la gauche Propriétés.
Ensuite, prenons soin de l’apparence des liens. Nous voulons définir la couleur, la décoration du texte et la police. Pour la police, assurez-vous d’utiliser le kit de polices Socialico créé à la première étape.
Ce code transforme nos lettres en icônes sociales que nous recherchons. Le problème, c'est qu'ils sont tous regroupés du côté gauche.
En réalité cependant, ce n'est pas un problème du tout, c'est exactement ce que nous voulons. Nous voulons seulement que ceux-ci soient répartis de manière animée et agréable. Pour l'instant cependant, nous devons rendre ces icônes invisibles et ajouter une transition afin que tout changement ultérieur soit progressif.
Étape 4. Hovers de base
Nous avons à peu près le point de départ de notre menu, tous codés. Maintenant, nous avons juste besoin de créer tout un gâchis d'états instables pour que tout cela fonctionne. Nous commençons avec quelques effets de base.
Le premier survol change le curseur en pointeur même si le mot? Share? n'est pas techniquement un lien. La seconde apporte l'opacité pour nos icônes cachées. La troisième change la couleur d'une icône lorsque l'utilisateur la survole.Parce que nos icônes sont en fait du texte, c'est vraiment facile! Cela aurait nécessité de se déplacer dans une image-objet ou de changer l'image de fond si nous avions utilisé une approche basée sur l'image.
Étape 5. Déplacer les icônes
Nous devons ensuite déplacer les icônes lorsque l'utilisateur passe au-dessus de "partager". Pour ce faire, nous utilisons simplement le la gauche la propriété de les pousser.
Le vrai truc consiste à déterminer comment sélectionner et positionner chaque lien individuellement. Heureusement, CSS3 a un excellent sélecteur qui fonctionne parfaitement ici: nth-of-type.
Ce sont des sélecteurs compliqués alors décomposons-les. Le premier morceau indique au navigateur que nous déclenchons un événement de survol pour le "partage". classe. Ensuite, utilisez nième de type pour cibler les première, deuxième et troisième ancres, qui saisissent efficacement chacune de nos icônes.
Avertissement de compatibilité
Une chose à garder à l'esprit, nième de type est un sélecteur de niveau trois, ce qui signifie que vous n’êtes plus chanceux pour IE8 et les versions antérieures. Nous pouvons faire l'une des deux choses pour résoudre ce problème. Si cela ne vous dérange pas un peu de JavaScript, vous pouvez utiliser Selectivizr pour ajouter cette fonctionnalité à IE6.
Si vous ne voulez pas utiliser la route JavaScript, votre seule option est d’ajouter du balisage supplémentaire. Dans ce scénario, chaque ancre a sa propre classe unique.
Maintenant, dans votre CSS, vous avez un crochet unique qui vous permet d'accéder facilement à chaque icône. Cette solution est certainement beaucoup plus encombrée que la route Selectivizr, mais le manque de JavaScript est un bonus.
Étape 6. Ajouter plus d'effets
Par défaut, nos icônes glissent vers la droite et disparaissent. Cependant, si nous voulons rendre cet effet un peu plus excitant, nous pouvons nous tourner vers les transformations CSS et obtenir une variété de résultats différents. Voici un ensemble d'options différentes à considérer, qui seront toutes présentées dans la démo finale.
Voyez-le en action!
Avec ça, nous avons tous fini! Suivez le lien ci-dessous pour voir la page de démonstration, puis survolez les différents menus pour voir les fruits de notre travail.
Démo: Cliquez ici
Conclusion
Vous disposez maintenant d'un excellent menu de partage animé que vous pouvez utiliser pour attirer l'attention sur votre prochain projet. Laissez un commentaire ci-dessous et laissez-moi savoir ce que vous en pensez et comment vous pourriez l'améliorer!