Connaissez-vous de bons tours de cartes? Si tout va bien, après aujourd'hui, vous le ferez! Nous allons créer des cartes à jouer simples et attrayantes avec du CSS pur, puis nous allons apprendre à cibler et à animer chaque carte pour plus de plaisir.
En cours de route, nous verrons comment utiliser avant et après la création des cartes avec un balisage minimal. Commençons!
Lancez la démonstration en direct ou téléchargez le code source.
Construire une carte
La première tâche sur notre liste est évidemment de construire une carte. Nous allons le faire avec un minimum de balisage et sans incorporer d'images. Impossible tu dis? Non! Voyons voir comment ça fonctionne.
Commencez par créer un nouveau document HTML et en insérant une div de base avec deux classes: carte et suitdiamonds.
Il est maintenant temps de mettre quelque chose sur la carte. Nous ferons de tout un atout pour des raisons de simplicité. Il vous suffit donc d’un paragraphe avec un "A".
Au fur et à mesure que vous avancez, gardez à l'esprit que tout mon objectif ici est un code minimal et réutilisable. Notez que j'ai utilisé des classes, pas des identifiants. C'est bien sûr parce que les classes sont réutilisables. En outre, il y a une raison pour laquelle le nom de la classe ici n'est pas simplement "diamants", que nous verrons plus tard. Au fur et à mesure que nous examinons notre code CSS, notez où j'enchaîne des sélecteurs et crée une base de code presque de type module pour réduire les répétitions.
Carte CSS
Croyez-le ou non, c'est tout le balisage dont nous avons besoin pour notre carte. Tout le reste sera retiré avec CSS. Pour commencer ici, nous avons besoin de quelques styles de page de base, suivis de notre carte styles de classe.
Comme vous pouvez le constater, les styles de cartes sont assez simples. Nous rendons la carte blanche, arrondie aux angles, appliquons une ombre, etc. Rien d’exceptionnel à part le positionnement relatif.
Faisons maintenant notre? A? regarder un peu plus attrayant. Encore une fois, pas grand chose ici, juste quelques alignements de texte et styles de police.
Nous devrions plutôt bien nous en sortir, jetons un coup d'œil et voyons ce que nous avons:
Cela ressemble à une carte, n'est-ce pas? Il manque quelque chose? les costumes! Diamants, cœurs, massues, piques; vous devez avoir des costumes. Cela devient difficile si nous voulons éviter les images, mais j'ai quelques astuces dans ma manche.
Suit CSS
Étant donné que nous ne voulons pas ajouter de balises supplémentaires à notre page, nous voudrons évidemment nous tourner vers avant et après insérer les icônes du costume. Heureusement, la plupart des navigateurs standard reconnaissent une grande variété de symboles. Si vous consultez CopyPasteCharacter, vous trouverez exactement ce dont vous avez besoin pour un jeu de cartes.
Comme vous pouvez le voir, ici nous avons inséré un diamant en utilisant à la fois avant et après (donc nous en aurons deux). Ensuite, nous devons répéter cela dans les quatre combinaisons:
Si vous êtes rapide, vous réaliserez qu'un de ces symboles sur chaque carte devrait être à l'envers. Ce serait assez simple avec une transformation CSS, mais étant donné que nous ne verrons jamais la carte à l'envers sur notre écran, je pense que c'est un morceau de réalité inutile qui ne vaut pas le code d'exécution.
Maintenant, tout ce que nous avons fait jusqu’à présent, c’est de créer les symboles, nous devons encore les dimensionner et les positionner correctement. Normalement, cela prendrait un tonne des sélecteurs étant donné que nous avons quatre costumes, dont chacun a une version avant et après à styler. Nous étions intelligents cependant et nous avons utilisé le mot? Costume? dans chaque nom de classe. Cela signifie que nous pouvons facilement cibler toutes les classes de costume à la fois. Ensuite, il suffit d’appeler séparément les styles avant et après. Impressionnant!
Que diable? Si vous n’avez jamais vu cela auparavant, c’est quelque chose de très chic avec un nom que j’aime dire, car cela me donne un son plus intelligent que je ne le suis vraiment: le sélecteur de valeur d'attribut de sous-chaîne arbitraire. J'explique cela en détail ici, mais en gros, cela vous permet de cibler des parties d'un attribut et de saisir tout ce qui a cette partie en commun.
Avec cela, nous avons une carte complète stylisée! Cela semble assez impressionnant étant donné que notre balisage est si bref.
Une main de cartes
Nous n'avons mis qu'une seule carte sur notre table, mais nous avons fourni le style pour les quatre costumes. Créons une? Main? de cartes pour les montrer tous. Voici le balisage:
C'est à peu près la même chose qu'avant, mais cette fois-ci nous avons un div d'emballage avec une? Main? classe et nous avons utilisé les quatre classes de costume. Pour notre classe de mains, nous n’avons pas vraiment besoin de beaucoup de style. Cependant, nous utilisons des flotteurs sur nos cartes, ce qui signifie que nous aurons besoin d’un correctif sur le parent de la carte, qui est la main div. Voici le code de Nicolas Gallagher pour cela avec un simple survol pour les cartes.
C'est tout! Maintenant, nous avons nous-mêmes un joli petit jeu de cartes en CSS et HTML purs. Voici à quoi ils ressemblent:
Les répandre
Maintenant que nous avons construit nos cartes, amusons-nous avec elles. Ce que je veux, c'est avoir une seule carte qui, une fois survolée, place les fans entre nos mains. Dans le formulaire déployé, les cartes ne devraient pas être droites comme nous l’avons vu ci-dessus, mais tournées comme si vous les teniez entre vos mains.
HTML
Le code HTML permettant de retirer ceci est à peu près exactement ce que nous avons vu auparavant. Seulement cette fois, ajoutez un? Spread? classe au conteneur div.
CSS
Cela nécessitera pas mal de CSS, mais il est assez facile de vous en sortir. Premièrement, nous allons être un peu plus spécifiques sur notre conteneur. Pour ce faire, définissez une hauteur, une largeur et un contexte de positionnement sur la classe de propagation.
Suivant. positionnez absolument les cartes de manière à ce qu'elles s'empilent les unes par rapport aux autres par rapport au div div. Réinitialisez les valeurs de positionnement et configurez une transition pour ces valeurs de façon à ce que les modifications éventuelles soient animées.
Nous devons maintenant configurer plusieurs états de survol qui positionnent manuellement chaque carte dans le tableau souhaité. Nous faisons cela avec des transformations CSS3 ciblées sur chaque couleur, avec des valeurs de haut et de gauche variables. En fin de compte, la mise en place de ce processus a été très ardu. Heureusement, j'ai fait ce travail pour vous, voici le code dont vous aurez besoin.
Enfin, lorsque les cartes sont dans leur forme étalée, je souhaite un autre état de survol qui met en valeur chaque carte de manière subtile. Pour ce faire, nous pouvons assombrir l’ombre de la boîte que nous avons appliquée précédemment.
Voyez-le en action!
Maintenant que nous avons tous terminé avec le code, il est temps de jeter un autre regard sur l'exemple en direct. En prime, j'ai ajouté une troisième main qui se développe lorsque vous passez la souris sur une carte.
Démo: Cliquez ici pour lancer.
Que ferez-vous avec eux?
Donc voilà, des cartes à jouer purement CSS et HTML. Pour être honnête, je ne sais pas quoi faire avec eux, mais ils étaient vraiment amusants à construire. Si vous avez de bonnes idées pour les améliorer ou les utiliser de manière amusante, laissez un commentaire ci-dessous et faites-le moi savoir!