AccueilActualitésinspirationDécouvrez la puissance du CSS avec The Mine: un jeu d’aventure sans la moindre ligne de JS Découvrez la puissance du CSS avec The Mine: un jeu d’aventure sans la moindre ligne de JS Publié le 23/10/2018 inspiration Aujourd'hui le BlogDuWebdesign vous propose de découvrir une des réalisations CSS et HTML les plus impressionnantes qu'il m'ai été donné de voir : The Mine The Mine: No JS, CSS only adventure game The Mine est la création de Jamie Coulter, alias @jcoulterdesign (sur Twitter @jamiecoulter89), et est tout simplement comme son nom l'indique un jeu d'aventure fait en CSS. Et quand je dis en CSS, je veux dire SEULEMENT en CSS, pas la moindre ligne de JS dans ce pen. Au programme tout ce que vous pouvez attendre d'un jeu d'aventure : un inventaire, des interractions avec le décors, de la dynamite et des caisses en bois. Et pas de JS évidemment. See the Pen The Mine: No JS, CSS only adventure game by Jamie Coulter (@jcoulterdesign) on CodePen. Le secret ? Plein de checkboxes et de radio, ainsi qu'un judicieux usage des selecters CSS tels que ~ et +, qui permettent de savoir très précisément quels sont les checkboxes check et quels sont les checkbox uncheck. En résulte un CSS d'une grande poésie et d'une lisibilité sans failles, comme vous pouvez le voir ci-dessous input#interactiveObject14:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div > .game_segment:nth-of-type(47) .tiles .tile:nth-of-type(13) img { pointer-events: none; } Le plus impressionnant dans tout cela est que le SCSS permettant de créer ce pen n'est même pas particulièrement complexe à lire ou plein de hack incompréhensible, il sagit réellement d'un usage très ingénieux de ces techniques de bases et de beaucoup de boucles. Cela plus l'aspect particulièrement impressionnant du résultat fait de ce pen un cas vraiment indispensable à lire pour toute personne s'interessant à l'interactivité CSS. D'ailleurs, il est à noter que les autres pen de l'auteur sont tout aussi impressionnant et intéressant, donc si vous ne savez pas quoi faire de votre prochaine pause, je vous conseille vraiment d'aller vous y perdre ! By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.
inspiration Inspiration pour les intégrateurs #67 : Le responsive sous toutes ses formes Publié le 12/05/2016
inspiration Inspiration pour les intégrateurs #66 : Créez et animez vos logos en CSS Publié le 28/04/2016
inspiration Inspiration pour intégrateurs #17 : Les SVG comme animations ou masques Publié le 24/04/2014