Créer des illustrations et animations avec une seule div, c’est possible !

Aujourd'hui, le BlogDuWebdesign vous propose un focus sur une technique d'illustration sur le web inspirant et imaginatif mais contraignant : les illustrations en CSS n'utilisant qu'un seul élément.

La méthode Pixel-art

Le moyens le plus "puissant" pour la création d'illustation one-div est aussi celui qui tord le plus le fonctionnement normale du CSS : faire du pixel-art avec la propriété CSS Box-Shadow.

L'objectif ici est donc de définir précisément une ombre d'un "pixel", et de la positionner à des coordonnées précises. Cette cette manière, il est possible de créer une illustration en pixel-art, et de l'agrandir à volonté en changeant la taille du "pixel".

 

Cette technique est évidemment lourde à mettre en place et, si elle permet de réaliser des illustrations ou des animations complexes, elle a tendance à rendre obèses et illisibles les fichiers CSS.

Pour en apprendre plus sur cette technique et découvrir un outil qui vous permettra de simplifier la tâche de création, je vous propose notre article : Découvrez le Pixel-art en CSS3 avec PICSSEL ART

La construction basée sur les pseudos-éléments

Plus "traditionnelle" dans son approche du CSS, cette méthode se base sur les pseudos-éléments "before" et "after", permettant de tripler un element CSS.

Cette technique a l'avantage d'être plus concise et rapide à mettre en place, mais demandera plus d'ingéniosité pour atteindre son but, tout en limitant bien plus les résultats que vous pourrez atteindre. 

 

L'art naît de contraintes paraît-il, et il faut reconnaitre à cette technique peut accoucher de résultats vraiment intéressants dans leur approche.

Exemples et ressources

Que vous soyez intéresse par la technique ou que vous ayez tout simplement envie de découvrir des ressources utilisant cette technique, je vous propose cette série d'icônes, drapeaux et illustrations n'utilisant aucun Javascript, et une seule div HTML par élément.