Nous avons fait une tonne de choses amusantes récemment avec le :flotter sélecteur. Des effets de survol de bouton pour les débutants aux tutoriels de survol plus avancés et même à l'utilisation de survols à plusieurs arrière-plans. Aujourd'hui, nous passons à autre chose et découvrons un sélecteur lié, mais tout aussi génial, souvent négligé.
Avec :actif, nous pouvons contrôler l’état d’un objet lorsqu’il est cliqué. En général, cela prend la forme simple de changer la couleur d'un lien lorsque la souris est enfoncée, mais nous allons faire quelque chose de beaucoup plus intéressant. Suivez-nous pendant que nous construisons un jeu-questionnaire présidentiel très cool sur CSS.
Ce que nous construisons
L'idée de base ici est assez simple. Nous avons une grille de huit images dans le but d’identifier les hommes représentés, chacun étant un ancien président américain. En survolant une image, vous la glissez un peu pour révéler d'autres instructions, ce qui vous encourage à cliquer. Cliquez et maintenez enfoncé pour faire glisser l'image vers le bas afin de révéler le nom du président affiché.
Démo: Cliquez ici pour lancer la version en direct
Télécharger: Cliquez ici pour télécharger les fichiers source
Sélecteurs de pseudo-classes
Un sélecteur de pseudo-classe est quelque chose que nous pouvons utiliser en CSS pour modifier un sélecteur de base. Si cela semble trop technique à votre goût, ne vous inquiétez pas, vous les utilisez déjà sans même le savoir! Celui que vous connaissez probablement le mieux est le :flotter sélecteur de pseudo-classe, qui vous permet de changer l'apparence de quelque chose en survol. Vous connaissez peut-être aussi des sélecteurs de pseudo-classes plus sophistiqués tels que :premier enfant.
En ce qui concerne les liens ou les ancres, vous devriez vous familiariser avec quatre de ces sélecteurs de pseudo-classes. Les voici avec des explications pour leur utilisation:
Comme vous pouvez le constater, notre sélecteur de survol souvent utilisé fait partie d’une jolie petite famille qui peut régir le style d’un lien à peu près à tous les états de son existence. Il est important de noter cependant que ce serait un ensemble d'outils beaucoup plus intéressant si :a visité n'étaient pas si problématiques. En raison de problèmes de sécurité, les navigateurs limitent ce que vous pouvez faire avec cette pseudo-classe. Par exemple, vous pouvez l'utiliser pour changer la couleur d'un lien, mais vous ne pouvez pas manipuler l'image d'arrière-plan de ce lien.
Pour cette raison, nous nous tournons vers :actif si nous voulons faire quelque chose de vraiment amusant avec un événement de clic pur CSS. Ce n’est pas intuitif de cliquer et de rester enfoncé, vous devez donc agir avec précaution lorsque vous utilisez cette fonctionnalité et assurez-vous toujours d’informer clairement l’utilisateur.
Assez des trucs ennuyeux, commençons notre projet!
Le HTML
Le code HTML de notre projet est assez simple. Nous commençons par une brève introduction décrivant le jeu et la manière de le jouer. Nous posons ici une question simple: "Qui étaient les huit premiers présidents américains?" Notez que tout cela est jeté dans un simple conteneur div.
Ensuite, nous créons un module réutilisable pour contenir notre image, qui sert en quelque sorte de question visuelle, et la réponse, un simple paragraphe qui se cache sous l’image. Le concept de réutilisabilité est la clé ici. Nous voulons répéter cela pour sept autres présidents et nous ne souhaitons évidemment pas passer par la douleur de nommer chaque module individuellement. Pour cette raison, nous appliquons une classe (président), que nous pouvons coiffer une fois et que ces styles affectent tout ce à quoi la classe est appliquée.
Vérification des progrès
Maintenant, vous devriez avoir de belles marges qui éloignent le contenu du bord et un joli titre qui n’utilise plus le style typographique par défaut.
Style la classe présidentielle
Nous allons maintenant commencer à ajouter du style à la classe président, ce qui devrait faire une énorme différence dans notre mise en page. Pour commencer, nous voulons tous les faire flotter à gauche et définir leurs dimensions. Comme nous allons faire glisser les images vers l'intérieur et l'extérieur, nous avons défini le débordement sur caché pour que rien ne sorte de notre petit boîtier de 200 pixels par 200 pixels.
Ensuite, nous fixons la marge à 20 pixels, ce n’est pas un nombre arbitraire. C'est la valeur soigneusement calculée qui permet quatre images par ligne dans notre mise en page. Notre largeur est de 960 pixels, divisée en quatre images de 200 pixels, mais 4 * 200 = 800, ce qui laisse 160 pixels pour les marges. 160px / 4 images correspond à 40px de marge par image, 20 à gauche et 20 à droite.
Il y a quelques autres points d'intérêt ici aussi. Nous ajouterons plus tard un certain z-index voodoo, ce qui fera en sorte que toute couleur d'arrière-plan recouvrira notre texte de réponse. Pour tenir compte de cela, j'ai utilisé un remplissage d'arrière-plan RGBa à 20%. Les anciennes versions d'IE n'apprécient pas cela, elles ne reçoivent donc aucun remplissage d'arrière-plan.
J'ai aussi placé le curseur sur? Pointeur? ce qui fera apparaître la petite main lorsque nous survolerons un président. Enfin, j'ai ajouté une ombre incrustée juste pour rendre notre arrière-plan un peu plus joli. Cette partie est complètement optionnelle.
Vérification des progrès
À ce stade, les choses semblent un peu bizarres, mais nous sommes sur la bonne voie. Les images de notre président sont contenues et coupées, ce qui est bien, mais le texte d’arrière-plan les abaisse, ce que nous ne voulons pas. Au lieu de cela, nous voulons que l'image flotte sur le texte. Nous allons accomplir cela dans la prochaine étape.
Correction des styles de texte et de l'ordre d'empilement
Avant de commencer à faire tout ce travail, appelons notre texte de paragraphe très rapidement. Si nous attendons plus longtemps, il sera caché derrière les images et plus difficile à surveiller.
Ces styles devraient rendre tout notre texte beaucoup mieux. Notez que même si la petite balise a un style par défaut, elle peut et doit être facilement remplacée de manière manuelle.
Mettre le texte derrière les images
Comme je l'ai mentionné ci-dessus, nous ne voulons pas que nos paragraphes abaissent l'image, mais se cachent derrière celle-ci. Pour ce faire, nous le libérons du flux avec le positionnement absolu, puis nous le déplaçons derrière l'image avec un indice z égal à -1.
Cela obtient tout droit où nous le voulons. Le texte se cache derrière l'image et chaque image est finalement affichée dans sa forme complète. Le problème? Il n'y a aucun moyen de voir la réponse!
Ramener à la vie
Maintenant que nous avons tout là où nous le voulons, il est temps d'ajouter l'interaction. Réfléchissons à la façon dont nous voulons que cela fonctionne: nous avons déjà codé l'état par défaut, donc nous sommes bons là-bas. La prochaine étape est l'événement en vol stationnaire. Cela devrait faire tomber l'image, mais seulement un peu, juste assez pour afficher la première ligne de texte. Ensuite, sur le clic, nous voulons réduire encore l’image.
Tout cela doit se faire avec quelques jolies transitions bien sûr, il s’avère donc que notre première étape consiste à les configurer sur les images. Comme toujours, nous avons besoin d’un million de versions différentes pour tous les navigateurs:
Avec ces transitions en place, chaque fois que nous modifierons les marges de nos images, la transition sera animée. Notre prochaine étape consiste donc à définir l'événement de survol avec notre sélecteur de pseudo-classe préféré.
Cela ajoute un peu de marge en haut de notre image pour que, lorsque l'utilisateur la survole, voici ce qu'il verra:
Cela constitue un bon petit conseil pour savoir comment obtenir la réponse. Si nous donnions la réponse complète ici, nous aurions probablement un problème avec les révélations accidentelles, le clic sert de moyen plus concret de garantir l'intentionnalité.
Notre dernière pièce de CSS est ce que nous sommes venus ici pour apprendre: le sélecteur de pseudo-classe actif. En mettant en œuvre cette pièce finale petite mais puissante, notre jeu-questionnaire est complet.
Désormais, lorsqu'un utilisateur clique sur une image et qu'il maintient le bouton enfoncé, l'image du président glisse vers le bas et son nom est révélé. Avec ça, nous avons tous fini!
Conclusion
Après avoir lu ce didacticiel, vous devez connaître une tonne d’excellentes informations sur les sélecteurs de pseudo-classes les plus populaires et sur la façon de les utiliser pour obtenir des résultats vraiment intéressants. Nous avons combiné les sélecteurs de survol et actif pour créer un jeu-questionnaire pur CSS dans lequel l'utilisateur survole, puis clique pour voir un message caché.
Laissez un commentaire ci-dessous et laissez-nous savoir si vous avez appris quelque chose. Veillez également à consulter la démo en direct. Pouvez-vous nommer les huit présidents avec succès?