Deuxième article des techniques de l'intégrateur centré sur l'illustration animée en CSS. Au programme : un tour d'horizon des techniques les plus importantes à connaître pour créer des illustrations complexes en CSS.
Illustrations animées en CSS : Tour des techniques les plus fréquentes
Cet article est la suite de l'article Nouvelle formule pour les inspirations pour intégrateurs #83 : Illustrations CSS. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant de continuer cet article.
Tous les jeudis du mois de janvier, nous nous pencherons sur des exemples d'illustrations CSS à la difficulté croissante. Au programme d'aujourd'hui, le décryptage d'un pen regroupant presque toutes les techniques que vous pourrez croiser dans les illustrations CSS.
Note : les décryptages sont dans l'ordre croissant de difficulté, et si vous n'avez pas suivi les deux premiers décryptages, je vous conseille vraiment d'aller commencer votre parcours par l'article de la semaine dernière : Les techniques de l'intégrateur : l'illustration animée en CSS #1, sans quoi cet article risque d'être un peu trop complexe.
Troisième décryptage : CSS Isometric Pokemon de Ash
Attention, gros morceau que notre troisième décryptage : le pen CSS Isometric Pokémon, qui reprend une scène de campagne avec un Pikachu se baladant sur un chemin.
See the Pen CSS Isometric Pokemon by Ash (@littleginger) on CodePen
Comme vous pouvez le voir, il y a énormément à dire sur énormément d'éléments différents, donc ne perdons pas plus de temps et décortiquons tout ça en commençant par le "plateau", qui est déjà composé d'un nombre assez impressionnant d'éléments.
Première partie : le fond
Nous pouvons dans un premier temps repérer le fond vert "grass", qui est un simple carré auxquels nous avons appliqué une rotation sur le plan "Z" (la 3e dimension, la profondeur). Les rebords sont fait avec le before et le after, auquel nous avons appliqué la transformation "skew", qui permet de donner cet effet de perspective en déformant les angles.
See the Pen CSS Isometric Pokemon : ground by Benjamin SANCHEZ (@B_Sanchez) on CodePen
Notez que j'ai légèrement changé la couleur du before, il est maintenant légèrement plus clair. Cela permet de le différencier du after pour vous permettre de mieux le visualiser, et aussi améliore l'effet de 3d. Cela fait donc d'une pierre deux coups, même si cela m'embête de modifier l'oeuvre originale graphiquement.
Sur ce fond vert vous pouvez voir un autre élément : des "hautes herbes" dans coin du haut. Elles sont faites avec une petite triche : une image sous la forme de data-uri, qui est insérée comme background et répétée. Si vous ne savez pas ce qu'est une image sous forme de data-uri, je vous conseille de lire cet excellent article de CSS-tricks sur les data-uri.
Astuce : quand vous appliquez un background sur un élément qui à subit une rotation, le motif du background subit la même rotation. pensez donc à lui appliquer la rotation inverse dans votre éditeur d'image.
Les deux derniers éléments sont assez semblables : la rivière et le chemin. Les deux sont des rectangles, avec le before qui sert de "rebord" et e after qui sert de "décor". Notez tout de même l'effet interessant que provoque une border dotted sur le chemin. Une des meilleurs utilisation de cette propriété que j'ai vu jusqu'à maintenant.
Pas grand-chose à dire sur le before, le concept est le même que pour les rebords du fond d'herbes, à part que la chute d'eau est un peu plus longue et animée. Vous pourrez tout de même noter que pour le chemin, c'est moi qui ai mis le rebord sous sa forme de before, l'original avait dû passer par un autre élément "path-end" pour résoudre un problème de z-index.
Astuce : les z-index des before et after ne servent qu'à les placer relativement entre eux et l'élément principal. Il n'est pas possible de mettre un A::before au-dessus d'un élément B, si le z-index de cet élément B le place au-dessus de A.
Pour ce qui est des after de la rivière et du chemin, vous pouvez y voir plusieurs petits éléments de décors créés avec un box-shadow. Cet élément est trop complexe pour être simplement survollé, je lui ai donc consacré un article complet plus tôt dans la semaine : Focus sur la propriété CSS3 Box-Shadow.
Seconde partie : Les arbres, les fleurs et la pokeball
Attaquons nous maintenant au éléments de décors qui dépassent du sol, en commençant par les arbres.
See the Pen CSS Isometric Pokemon : Trees and flowers by Benjamin SANCHEZ (@B_Sanchez) on CodePen
Maintenant que vous avez dû la propriété box-shadow, cet élément ne devrait pas trop vous poser problème, il ne s'agit "que" d'un rectangle auquel nous avons arrondi certains bords. L'effet de 3D est rendu avec une ombre interne. Je passe très vite sur le positionnement de chaque arbre, qui a été sélectionné avec des nth-childs puis positionnes tout simplement en absolute.
Mon intervention sur cet élément, en plus de l'agrandir et le centrer bien entendu, a été de rendre toutes ses dimensions relatives à l'élément parent en les transformant en pourcentages. De cette manière, il est possible très simplement que changer la taille de l'élément complet, et ce sans utiliser de variables !
Astuce : si vous n'avez pas accès aux variables fournies par les préprocesseurs, essayez de vous limiter au parent pour ce qui est des valeurs de tailles absolues. de cette manière, il vous sera plus simple de scale vos éléments. Tous vos éléments enfants doivent donc avoir leurs tailles exprimées en valeurs relatives : pourcentages et rem.
Pour la pokeball, j'ai travaillé de la même manière, en passant simplement toutes les tailles en relatif a l'exception à la border, qui ne l'accepte pas. Cet élément est particulièrement intéressant pour son détournement du dégradé pour l'effet bicolore. En effet comme vous pouvez le voir, cet effet est produit avec un radial-gradient (un dégradé radial).
Il faut savoir qu'il est possible de donner des "points d'ancrage" aux couleurs, ce qui permet de contrôler très finement l'affichage du dégradé, au point de forcer pour notre exemple la couleur à rester identique entre 0% et 50% ainsi qu'entre 51% et 100%, ce qui force le changement à se faire entre 50% et 51%. Si vous avez du mal à comprendre le concept, je vous conseil d'aller essayer le site Ultimate CSS Gradient Generator.
Je ne reviens pas en détail sur les fleurs, car je n'ai rien d'intéressant à pointer du doigt sur cet élément. vous devriez être maintenant capable de le comprendre sans trop de soucis.
Troisième partie : Pikachu !
Le pikachu est composé de plusieurs éléments : le corps, la tête et les pattes arrière. Notez la présence de pattes avant dans le HTML, qui n'ont aucune ligne les concernant dans le CSS. Un oubli surement.
See the Pen CSS Isometric Pokemon – Pikachu by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Le corps est géré par l'objet principal ".pikachu", avec le before qui sert à marquer les rayures du dos, et le after qui prend en charge les oreilles et la queue. Dans les deux cas, ces éléments comptes pour plus d'un seul grace au box-shadow (la 2e rayure pour le before, et les deux oreilles plus deux des trois morceaux de la queue sont geres de cette façon), comme nous avons pu le voir pour l'ecume et les cailloux.
La tete et la patte ne sont que des petites divs rectangles placées de manière absolue, avec le before de la tete qui prend en charge l'affichage de l'oeil.
Notre petit pikachu est anime grace à 3 animations différentes. Tout d'abord run et bobble, qui sont sur l'objet principal. Notez qu'il est possible de lier plusieurs animations à un seul objet, en les séparant simplement par une virgule.
Enfin, footy et bobble est de simples petites modifications de position pour créer cet effet de démarche. Personnellement, j'aurais préféré utiliser une transformation translate pour gérer ce point, qui aurait eu l'avantage d'être relatif et donc de permettre l'agrandissement du pikachu au besoin.
Et la maison ?
La maison est tres impressionnante, c'est vrai, et à du demmander beaucoup de travail à l'auteur. Pour autant, il n'y a vraiment pas grand chôse à en tirer : des éléments carrés, quelques rotations et skew, et voilà. Je ne m'atarderais donc pas dessus, mais vous l'ai tout de même extraite pour que vous poissiez l'analyser séparément du reste.
See the Pen CSS Isometric Pokemon – House by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Aller plus loin
Nous avons pu voir de nombreuses techniques différentes utilisées dans ce pen : des dégradés détournés, des transformations 3Ds (rotateZ, skew), des box-shadow utilisée d'une manière très originale, une image en data-uri et des animations très ingénieuses, même si je n'en ai pratiquement pas parlés (sans quoi l'article aurait été bien trop long). pourtant, n'imaginez pas avoir tout vu ! Il existe d'autres techniques folles pour créer des illustration, comme par exemple l'utilisation de lettres en temps qu'éléments purement visuels.
Dans ce petit lion (créé par Thepandalion), vous pouvez retrouver par exemple la lettre "m" pour figurer les griffes des pates arrières, ainsi que les lettres "S" et "w" pour la queue !
See the Pen Mr. CSS Lion by Pandalion (@thepandalion) on CodePen
J'espère que cet article vous a plu. Comme pour les autres articles de cette série, je tiens à rappeler que cette série est encore très jeune, et qu'il ne faut pas hésiter à laisser votre ressenti en commentaire, pour que je sache ce qui vous plaît et ce que je pourrais améliorer.
Enfin, n’hésitez pas non plus à liker cet article et le partager cet article sur vos réseaux, car c'est notre seul moyen de savoir que ce nouveau format bien plus travaillé que nos articles habituels vous plaît, et que vous voulez d'autres articles de ce style ! Merci d'avoir tout lu et à la semaine prochaine pour le boss final des illustrations CSS animées.