10 conceptions de personnages entièrement créées avec HTML et CSS

Je suis constamment surpris de tout ce que vous pouvez faire avec CSS. Les développeurs Web savent que CSS vous permet de créer des mises en page incroyables et des effets d'animation personnalisés.

Mais vous pouvez aussi l'utiliser pour de nombreux projets amusants. Comme, par exemple, créer des conceptions de personnages avec juste du CSS. Cela semble bizarre, non ?

Eh bien, c'est définitivement le cas. Et j'ai rassemblé certaines des conceptions de personnages les plus étranges (mais les plus cool), toutes fabriquées à partir de code HTML et CSS 100% pur.

1. Oiseaux en colère

Qui n'aime pas Angry Birds ? Ils ont commencé comme un jeu et ont en quelque sorte obtenu leur propre film après avoir percé la culture pop.

Et ce stylo de Rachel Bull prouve que les Angry Birds peuvent même se retrouver dans CSS.

Ironiquement, il y a une image sur cette page, et elle est utilisée pour intégrer le type personnalisé tout en haut. Tous les autres éléments, des courbes de ces oiseaux aux dégradés personnalisés, fonctionnent tous sur du CSS pur.

Peut-être pas l'extrait de code le plus pratique mais certainement une source d'inspiration.

2. Frankenstein

Frankenstein de Mary Shelley est largement connu comme la créature à la peau verte ravivée. Bien que ce soit techniquement le monstre de Frankeinstein, cela ne sort pas si bien de la langue.

Et bien que cette créature de Frankenstein puisse être quelque peu mal intitulée, c'est toujours l'une des meilleures conceptions de personnages que j'ai vues.

Il fonctionne sur seulement 40 lignes de HTML et le développeur Victoria Ninni Bergquist a même ajouté du CSS pour aider le monstre à clignoter. Génial!

3. Extraterrestre de Toy Story

Toy Story de Pixar a tellement de personnages mémorables et ces extraterrestres farfelus font certainement partie de ce casting.

Sunyoung Park a construit ce stylo comme démo pour CSS et pour tester les limites du codage frontal. Il devrait s'afficher correctement dans tous les principaux navigateurs et même dans certains navigateurs plus anciens. Bien qu'il s'appuie un peu sur la propriété rotate().

Heureusement, cela fait partie de la fonctionnalité de transformation CSS qui prend en charge les navigateurs datant d'IE9+. Ainsi, ce petit extraterrestre vert peut ravir la majeure partie du monde connecté à Internet.

4. Aku Aku

Si vous aviez une PlayStation, vous connaissez probablement Crash Bandicoot. Eh bien, ce type fou nommé Aku Aku est une réplique parfaite du masque… créature… chose.

Chaque élément a sa propre div avec une classe pertinente définissant cette caractéristique (c'est-à-dire l'œil, la lèvre du nez).

Je dirais que la partie la plus difficile de toute cette conception est la couronne de plumes sur sa tête. De plus, les animations sympas qui pourraient encourager les joueurs à reprendre leurs anciens jeux Crash.

5. Bébé Carapuce

Voici un autre excellent exemple d'animation mélangée à la conception de personnages CSS.

Josh Bader a codé ce personnage Squirtle en utilisant du CSS pur et seulement 15 lignes de HTML. Impressionant!

Pour obtenir l'effet de marche, Josh a ajouté la pseudo-classe :after à chaque élément avec une animation répétitive. Un exploit étonnamment simple une fois que vous regardez sous le capot et il est encore plus surprenant de constater à quel point un si petit code est nécessaire pour créer des personnages comme ceux-ci.

6. Rick sans Morty

Dans ce stylo, vous trouverez le travail loufoque du développeur James Gilmore qui a conçu un Rick chibi-fié en CSS pur.

La conception utilise en fait de jolies ombres portées CSS pour créer de la profondeur et donner de la vie à ce personnage. Sans parler de l'animation répétitive qui se marie également bien avec le design.

Notez que cela fonctionne également sur Sass et si vous voulez bricoler, il y a des variables personnalisées dans le code. Il est très bien formaté, donc ce serait un extrait génial à étudier pour apprendre Sass.

7. Brian Griffon

Voici une autre conception de personnage de Rachel Bull, celle-ci mettant en vedette Brian Griffin de Family Guy.

Il est surprenant de voir combien de détails vous pouvez obtenir avec du CSS pur. L'ensemble du style de Brian correspond étroitement au style artistique de la série et utilise des ombres portées incroyablement réalistes.

Bien que celui-ci soit assez technique avec plus de 150 lignes de CSS et qu'il utilise la bibliothèque Compass pour démarrer.

8. Emmet

De The Lego Movie, c'est Emmet dans toute sa splendeur. Rachel a une fois de plus construit cet extrait à partir de zéro en utilisant CSS et Haml, la manière simplifiée d'écrire du HTML moderne.

Quelques-uns de ces éléments se distinguent vraiment comme assez impressionnants pour fonctionner uniquement sur CSS. Notamment, les tourbillons de cheveux ressemblent vraiment à des pièces de Lego en plastique. C'est fou que ce soit même possible !

Il y a beaucoup de logique Sass géniale dans le CSS, et si vous êtes un nerd du développement, vous apprécierez de fouiller dans ce stylo. Le code et le résultat sont glorieux.

9. CSS Évoli

Construit autour du phénomène Pokemon Go est ce pur CSS Eevee réalisé par David Khourshid.

Il utilise un arrière-plan et un style de page similaires à ceux de l'application tout en recréant l'intégralité de Pokemon en CSS pur. Avec un peu de texturation et des superpositions intelligentes, David a donné à cet Évoli un aspect 3D !

Les animations sont également agréables et rendent l'ensemble plus réaliste. Que vous soyez un fan de Pokemon ou que vous n'ayez jamais touché au jeu, vous devez admettre que c'est du bon travail.

10. Mickey Mouse

Bien que cette tête de Mickey Mouse soit un peu plus simple, c'est aussi tout un exploit. Vous pourriez penser que ce serait plus facile à gérer car il est statique, mais le stylet pousse plus de 450 lignes de Sass.

La partie la plus technique consiste à ordonner toutes les formes et à réorganiser les éléments pour qu'ils s'alignent correctement les uns sur les autres.

Pourtant, le résultat est fantastique et vous pouvez voir la ressemblance avec les premiers dessins animés de Mickey.

11. Princesse Zelda

J'ai gardé le meilleur pour la fin avec ce design de personnage de Zelda. Elle est un peu courte sur les jambes mais dans l'ensemble le style est précis.

Le développeur Charlie Marcotte utilise Sass et des transformations CSS personnalisées pour organiser tous les éléments. De plus, le HTML brut est un peu simplifié grâce au préprocesseur Pug.

Si vous essayez de repousser les limites de vos connaissances CSS, pourquoi ne pas vous lancer dans un projet similaire ? C'est un excellent moyen de tester vos compétences et vous pouvez toujours partager tout ce que vous construisez dans les commentaires ci-dessous.