Emoji semble avoir envahi toutes les parties de notre culture. Ce qui a commencé comme une fonctionnalité de niche pour les utilisateurs de téléphones mobiles et les geeks informatiques est devenu son propre phénomène. Maintenant, nous voyons ces petits personnages sur des t-shirts, des campagnes de marketing et même des longs métrages pas si drôles.

Ce ne serait pas exagéré de dire que les emoji sont devenus une sorte de langage commun. Que vous parliez anglais, japonais ou swahili, certains personnages sont universellement reconnus. En tant que tels, ils peuvent briser les barrières à leur manière.

Naturellement, la communauté de conception Web utilise et expérimente un peu les emoji. Aujourd'hui, nous aimerions présenter certains des exemples les plus intéressants et amusants de CodePen. Ils couvrent toute la gamme, des simples recréations CSS à l'animation intelligente qui donne vie à ces petits gars et filles. Profitez 😊

Pop the Emoji

Cette animation basée sur JavaScript est suffisamment intéressante en soi. Mais c'est aussi interactif. Déplacer votre curseur sur un visage le supprime de l'écran, un peu comme des bulles qui éclatent. Cliquer sur le canevas redémarre tout le processus.

Voir le stylo
gap – JavaScript pur par Toshiya Marukubo

Que les pseudochats nous enseignent

Parce que les emoji sont si universels, ils constituent un excellent outil d'apprentissage. Cette démonstration interactive des pseudoclasses CSS bénéficie de l'utilisation de «pseudocats» utiles.

Voir le stylo
Pseudocats structurels 🐱 par Wendko

Étonnamment CSS pur

Les développeurs améliorent continuellement la création d'images via CSS. Ici, nous avons un emoji au visage surpris qui est net, propre et évolutif. Il a également été écrit avec étonnamment peu de code.

Voir le stylo
Visage surprise par Alexander Vega

Choisissez votre bestiole

L'une des utilisations les plus populaires des emoji est dans les jeux. Ils créent de superbes personnages facilement reconnaissables tout en ajoutant du plaisir au mélange. Ce jeu particulier est similaire à une machine à sous. Cliquez sur le bouton "tourner" et voyez sur quel animal mignon vous atterrissez.

Voir le stylo
Emoji Spinner par Melvin Idema

Beary Cool Animation

Pourquoi ne pas aimer cet ours emoji? C'est clairement un animal qui aime s'amuser, avec des lunettes de soleil et une casquette arrière. Il écrit apparemment aussi du code, à en juger par l'animation de défilement super cool de ces objectifs.

Voir le stylo
Shades Loader 🐻 par Jhey

Devenir viral

Heureux ou pas, les emoji reflètent ce qui se passe dans notre société. En tant que tel, il n'est pas surprenant que ce personnage inspiré de COVID-19 ait été développé. Le petit virus mécontent rebondit pensivement, se méfiant apparemment d'un remède inévitable.

Voir le stylo
Corona Virus SVG (Covid-19) par Sourav Pradhan

Prenez des vacances virtuelles dans la ville d'Emoji

Un développeur intelligent a posé la question: à quoi ressemblerait une ville emoji? Le résultat est un monde amusant, plat et animé. C'est un excellent mélange de technologie moderne et de look rétro.

Voir le stylo
3D Emoji Town (Pure CSS) par George W. Park

Créez votre propre Emoji

Vous n'êtes pas fan des personnages emoji ordinaires? Alors construisez le vôtre! Cet outil vous permet de choisir parmi différents tons de peau, traits du visage et même des accessoires.

Voir le stylo
Emoji Factory par Olivia Ng

Représenter tous les sentiments

Vous vous demandez si, dans des milliers d'années, les archéologues assimileront les emoji aux anciens hiéroglyphes égyptiens. Certes, les emoji sont probablement plus légers et reflètent les temps modernes. Mais les deux sont utilisés pour communiquer une histoire.

Au-delà de ces arguments académiques, les emoji peuvent être tout simplement amusants. Surtout lorsqu'il est épicé avec un peu de CSS et de JavaScript, comme les exemples ci-dessus. Avec un peu de chance, ils vous feront rire et feront couler votre créativité.

Vous voulez voir des extraits d'emoji encore plus mignons et amusants? Jetez un œil à notre collection CodePen!