Aujourd'hui, nous allons nous amuser en recréant la boîte animée de points d'interrogation Mario Bros. avec du CSS3 pur.
En cours de route, vous apprendrez à utiliser plusieurs technologies CSS3 intéressantes telles que les angles arrondis, les ombres de texte et de boîte et les animations d'images clés qui fonctionnent à la fois dans Safari et Firefox. Sautons dans!
Aperçu
Voici un aperçu de ce que nous allons construire aujourd'hui. En réalité, je pense que c'est beaucoup trop occupé pour être utilisé sur un site (ça pourrait faire mal aux yeux) mais c'est vraiment amusant à construire!
Démo: Cliquez ici pour lancer la démo
Télécharger: Cliquez ici pour télécharger
Pourquoi diable?
Pour commencer, je tiens à préciser que cet article décrit un projet purement expérimental destiné uniquement à des fins éducatives. Le produit final devrait se dégrader légèrement dans les autres navigateurs, mais les animations ne fonctionneront vraiment que dans les navigateurs Webkit ainsi que dans Firefox 5 (qui prend désormais en charge les animations par images clés).
Donc, si l'article n'est pas prêt à être utilisé, pourquoi me préoccuper de cet article? Tout d’abord, mener des expériences comme celle-ci est un moyen formidable de développer vos compétences en matière de dépannage CSS: vous rencontrez toujours plusieurs problèmes inattendus et devez vous en sortir. De plus, il est à espérer qu'un jour dans le futur, les animations d'images clés CSS seront prises en charge par tous les principaux navigateurs et il sera certainement utile de déjà avoir une idée de différentes techniques de mise en œuvre.
En fin de compte, c’est tout simplement ma tentative de justifier le fait que je suis un nerd de Nintendo qui a vu un bloc-notes animé Mario défiler l’autre jour et qui voulait instantanément le construire en CSS. En passant, un moyen simple de rendre cette technique plus accessible à tous les navigateurs consiste simplement à abandonner l’animation CSS et à utiliser jQuery à la place.
Mise en route: le HTML
La première chose à faire est de décrire le code HTML de base d’un bloc. Étant donné que le bloc est quelque chose que nous voulons utiliser à plusieurs reprises, nous utiliserons quelques classes. De cette façon, nous pouvons simplement copier et coller des blocs de code et le CSS sera automatiquement géré.
Tout d’abord, créez un conteneur qui contiendra tous les blocs lorsque nous en créerons plus. Drop suivant dans un div wrapper contenant une balise de paragraphe. Cette structure semble un peu redondante pour le moment, mais comme nous en ajouterons plus tard, cela aura du sens.
Notez que j'ai enveloppé toute ma balise de paragraphe dans un lien, ce qui est acceptable en HTML5. Je l'ai fait parce que le texte lui-même va apparaître et disparaître et que vous voulez que le lien soit cliquable tout le temps, pas uniquement lorsque le texte est visible. Encore une fois, cela aura plus de sens plus tard.
Démarrer CSS
Ensuite, nous voulons créer le style de base de notre bloc Mario. Nous aurons besoin de manipuler trois parties distinctes, décrites ci-dessous.
Dimensions
La première chose à faire est simplement de définir une hauteur et une largeur. C'est assez arbitraire, tant que vous créez un carré, vous êtes bon. J'ai mis le mien à 150px pour la largeur et la hauteur. Veillez également à définir votre débordement sur? Caché? pour l'animation.
Style de boîte
Ensuite, nous voulons que notre boîte ressemble à un bloc de points d’interrogation issu d’un jeu de Mario. Il existe plusieurs versions, donc pour tous les fans dévoués, nous allons baser la nôtre grossièrement sur celui de Super Mario Bros 3.
Dans le code ci-dessous, je règle la couleur, la bordure, le rayon de la bordure et l'ombre intérieure pour donner une certaine profondeur au bloc.
Style de texte
La dernière étape consiste à styler notre point d'interrogation. Rendre la couleur blanche, aligner le texte au centre, lui donner une ombre forte et définir la police à quelque chose que vous aimez. J'ai eu du mal à trouver une police qui semblait appropriée, mais le remplissage de Google Web Font Geostar se rapproche.
Aperçu
À ce stade, notre bloc Mario est plutôt beau! Il ne reste plus maintenant qu’à lui donner vie.
Animation du bloc
Maintenant que notre bloc est beau et stylé, il est temps d’animer ce petit point d’interrogation. Maintenant, si nous configurons l'animation pour utiliser les marges de notre paragraphe, le bloc entier bougera, ce qui n'est pas ce que nous souhaitons. Nous utilisons donc? Text-indent? comme base pour notre animation, ce qui n'affectera que le point d'interrogation.
Puisque nous voulons que l'animation se répète en boucle, nous ne pouvons pas utiliser une ancienne transition CSS simple, mais devons plutôt nous baser sur une animation par images clés. La syntaxe pour Webkit et Mozilla est identique, à l'exception des préfixes. D'abord, nommez votre animation (j'ai appelé le mien? Mariomation?). Ensuite, définissez l’état de l’animation aux différents points. Nous n'avons besoin que de deux cadres, un pour commencer et un pour finir, le navigateur comblera les lacunes.En donnant un retrait négatif pour commencer et un retrait positif pour terminer, nous ferons effectivement en sorte que le point d'interrogation se déplace de gauche à droite.
Pour activer l'animation, nous créons d'abord un sélecteur qui cible ce à quoi nous voulons l'appliquer, dans ce cas? P.block? Fait le travail. Ensuite, nous rappelons le nom de l'animation et définissons les paramètres: durée, comptage et fonction de minutage.
Avec ça, votre bloc devrait animer parfaitement! Si c'est tout ce que vous vouliez réaliser, n'hésitez pas à vous arrêter ici. Je vais aller un peu plus loin et ajouter quelques fonctionnalités similaires à la navigation.
Création du menu de navigation: HTML
Comme nous avons utilisé des classes au lieu d’ID, nous pouvons facilement répéter notre bloc avec seulement un copier-coller. Cette fois-ci, j'ai créé quatre blocs et ajouté une info-bulle supplémentaire que nous ferons apparaître en survol.
Menu de navigation CSS
Pour que tout ressemble à ce que nous voulons, il y a plusieurs étapes, chacune indiquée dans le CSS ci-dessous. La première chose que j'ai faite a été d'appliquer la largeur et les marges à mon conteneur. Il s'agissait simplement de le centrer sur la page et constitue une étape facultative.
La chose la plus importante dans la prochaine étape est de faire flotter le? BlockWrapper? classe à gauche. Cela fera apparaître vos blocs Mario les uns à côté des autres, par opposition à ceux empilés verticalement.
Enfin, j'ai positionné chaque extrait de texte d'info-bulle sur son bloc respectif et mis l'opacité à zéro. Ensuite, avec une transition CSS, je fais apparaître le texte lorsque vous survolez le bloc.
Avec ça, nous avons tous fini! Vous devriez maintenant avoir quatre blocs animés les uns à côté des autres.
Produit final
Démo: Cliquez ici pour lancer la démo
Télécharger: Cliquez ici pour télécharger
Conclusion
Ceci conclut notre tutoriel sur la création d’un bloc Mario animé avec du CSS pur. J'espère que vous avez eu autant de plaisir à le construire que moi!
Si vous pensez à des améliorations ou constatez que vous utilisez ce moyen, laissez un commentaire ci-dessous et je vérifierai.