Halloween, masques (CSS) et portes logiques

Sur ce site, il y a un fil de discussion hebdomadaire Meme Monday où je publie normalement le dessin animé comiCSS et cherche l'inspiration. La semaine dernière, @webbureaucrat a partagé un dessin qui a retenu mon attention :

J'ai trouvé ça drôle et j'ai décidé de créer ma propre version avec HTML et CSS à l'aide de masques.

À première vue, la première rangée semblait facile à réaliser : deux dégradés radiaux et choisir le meilleur masque-composite. La deuxième rangée semblait plus difficile. L'ajout d'un dégradé supplémentaire serait-il suffisant ?

En ignorant les lignes et les traits du visage de citrouille-lanterne – qui seront ajoutés plus tard –, la base du dessin animé serait constituée de deux cercles qui se croisent. Pour y parvenir, j'ai créé un masque avec deux dégradés radiaux :

.pumpkin {
  mask:
    /* trick */
    radial-gradient(circle at 40% 60%, #000 25%, #0000 0),
    /* treat */
    radial-gradient(circle at 60% 60%, #000 25%, #0000 0);
}

À partir de là, je savais que je devrais utiliser un masque-composite ou le -webkit-mask-composite non standard pour combiner les masques de différentes manières.

Voici une première tentative qui ne fonctionnera pas sur Firefox. Je laisse une image :

Voici les valeurs que j'ai utilisées :

• OU : initiale. Il n'est pas nécessaire d'avoir une valeur spéciale car la valeur par défaut est qu'elles se chevaucheront toutes. Je n'ai même pas eu besoin d'ajouter un masque-composite.
• ET : se croisent. Le masque appliqué sera une intersection de tous les masques. Dans ce cas, l’intersection des deux cercles.
• XOR : exclure. Celui-ci permet deux alternatives. Pour le masque-composite, l'exclusion peut être réalisée avec exclure. Mais nous pourrions également utiliser la valeur xor de -webkit-mask-composite... ce qui a plus de sens dans ce cas mais, comme mentionné ci-dessus, n'est pas standard.

Pour la deuxième rangée, il me fallait un troisième masque pour occuper tout le conteneur (et un supplémentaire pour la NAND !) je dois l'avouer, c'est un peu brouillon :

• NOR : -webkit-mask-composite : destination-out. Parce que le masque qui occupe tout le conteneur est le dernier, les pixels du masque précédent (équivalent à trick OR Treat) sont effacés, laissant l'espace à l'extérieur de la citrouille avec de la couleur.
• NAND : masque-composite : soustraire. Je complique trop celui-ci avec beaucoup trop de couches (4), en essayant de le garder standard et avec une seule valeur de masque-composite.
• XNOR : -webkit-mask-composite : xor. L'ironie. Pour créer XNOR, on utilise la valeur xor mais avec le calque supplémentaire qui fera "retourner" la sélection.

C'était le désordre. Temani Afif et Ana Tudor — vous devriez les suivre sur les réseaux sociaux si ce n'est pas déjà fait, elles sont excellentes en CSS —, ont contribué et ont aidé à simplifier le code et à utiliser la propriété standard de masque-composite.

Le résultat est ci-dessous. Cela nécessite de définir les masques pour chaque cellule et d'indiquer la valeur composite du masque en ligne. Et pendant que j'y étais, j'ai décidé d'élargir un peu la blague et d'inclure quelques portes plus logiques (certaines d'entre elles nécessitaient plus que 2 et 3 masques) :

---

version comiCSS

Bien que cela fonctionne bien tel quel, j'ai décidé de créer une version plus courte qui utilise uniquement le standard CSS pour la bande dessinée CSS que je publie (vous pouvez également la suivre sur Medium !)

Il utilise uniquement les portes logiques générées avec deux masques et la propriété standard mask-composite, il fonctionnera donc dans tous les navigateurs. De plus, il présente chaque valeur individuellement. Amusant et éducatif (j'espère).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!