Les pixels sont les \u00e9l\u00e9ments constitutifs d’une grande partie de ce que nous voyons en ligne. Et plus la technologie d’affichage est avanc\u00e9e, plus ces petits carr\u00e9s sont affich\u00e9s sur nos \u00e9crans. Le r\u00e9sultat est que le texte et les images sont incroyablement nets.<\/p>\n
Pourtant, malgr\u00e9 toute cette beaut\u00e9 high-tech, il y a quelque chose \u00e0 dire pour la simplicit\u00e9 que l’art classique bas\u00e9 sur les pixels apporte \u00e0 la table. Non seulement cela nous rappelle le bon vieux temps, mais cela peut aussi \u00eatre une technique de conception efficace.<\/p>\n
Ce qui nous am\u00e8ne au sujet d’aujourd’hui: l’utilisation des pixels comme arri\u00e8re-plan. Dans le bon projet, ils peuvent ajouter un \u00e9l\u00e9ment de plaisir et une cr\u00e9ativit\u00e9 surprenante. Jetons un coup d’\u0153il \u00e0 quelques extraits de code qui montrent le potentiel du pixel.<\/p>\n
Cet exemple \u00e0 multiples facettes montre un large \u00e9ventail de styles et d’options d’animation. Utilisez le menu pr\u00e9d\u00e9fini pour choisir parmi plus de 10 arri\u00e8re-plans SVG diff\u00e9rents. Beaucoup rappellent un jeu vid\u00e9o r\u00e9tro, et certains sont plus adapt\u00e9s \u00e0 un usage quotidien que d’autres. Dans tous les cas, cette collection fournit une base solide de ce qui est possible.<\/p>\n
Voir le stylo
Pixel-Grid (animations SVG) par Scott Weaver<\/p>\n
Les d\u00e9grad\u00e9s et les pixels ne semblaient jamais tr\u00e8s bien s\u2019adapter. Mais \u00e0 l’\u00e8re du design brutaliste, ils vont de pair comme Mario et Luigi. Cet extrait montre un effet al\u00e9atoire int\u00e9ressant. Utilisez JavaScript pour diviser l’arri\u00e8re-plan en petits carr\u00e9s d’opacit\u00e9s diff\u00e9rentes. Le r\u00e9sultat est une \u0153uvre d’art g\u00e9n\u00e9r\u00e9e qui attirera s\u00fbrement l’attention de l’utilisateur.<\/p>\n
Voir le stylo
G\u00e9n\u00e9rateur de d\u00e9grad\u00e9 CSS pix\u00e9lis\u00e9 par Eric Winton<\/p>\n
Voici un exemple incontournable et fait avec bon go\u00fbt. Les grands carr\u00e9s s’estompent de fa\u00e7on apparemment al\u00e9atoire, mais heureusement, ils ne sont pas d\u00e9pass\u00e9s. Cela pourrait \u00eatre un excellent accent de design pour une zone de h\u00e9ros, o\u00f9 une premi\u00e8re impression est la cl\u00e9.<\/p>\n
Voir le stylo
RKpBLg par Michael<\/p>\n
Si vous recherchez un arri\u00e8re-plan anim\u00e9 qui ne distrait pas de son contenu, ce simple extrait m\u00e9rite d’\u00eatre v\u00e9rifi\u00e9. Bien que de style similaire \u00e0 l’exemple pr\u00e9c\u00e9dent, il est diff\u00e9rent en ce sens que l’animation ne s’ex\u00e9cute qu’une seule fois. Il suffit d’attirer l’attention sans que l’inconfort potentiel du mouvement se r\u00e9p\u00e8te encore et encore.<\/p>\n
Voir le stylo
Animation de fond de pixel par Oren<\/p>\n
Les pixels peuvent \u00e9galement jouer des r\u00f4les compl\u00e9mentaires dans un arri\u00e8re-plan. Par exemple, regardez cette vid\u00e9o. Il a \u00e9t\u00e9 rendu plus int\u00e9ressant avec une superposition de motifs de type pixel qui pourrait \u00eatre utilis\u00e9e pour afficher un simple logo, un symbole ou quelque chose de plus al\u00e9atoire. Encore mieux, cet exemple particulier change de forme. Cliquez n’importe o\u00f9 dans la vid\u00e9o pour voir le changement de motif.<\/p>\n
Voir le stylo
KaozXe par Micah Frost<\/p>\n
Ce qui distingue cet extrait est sa combinaison de look r\u00e9tro et de fonctionnalit\u00e9 moderne. Cr\u00e9\u00e9s avec particules.js, ces pixels flottants rappellent l’art spatial des ann\u00e9es 50 et 60. Passez la souris sur une zone et ses pixels seront mis en \u00e9vidence en blanc brillant, tandis qu’un clic les force \u00e0 se disperser.<\/p>\n
Voir le stylo
fond de pixel 2 par Alex<\/p>\n
Le pixel art est une excellente option pour un motif \u00e0 carreaux. Les diff\u00e9rences subtiles entre les carr\u00e9s peuvent rendre quelque chose d’attrayant, mais pas r\u00e9aliste. Ici, nous avons un mod\u00e8le CSS assez simple et pur qui pourrait servir de fond de h\u00e9ros, d’en-t\u00eate ou de page enti\u00e8re.<\/p>\n
Voir le stylo
Fond CSS pix\u00e9lis\u00e9 (Camo # 1) par Erik Wiedeman<\/p>\n
Jetons un coup d’\u0153il \u00e0 un autre excellent exemple de classique et de moderne. Ce logo est devenu un chef-d’\u0153uvre 3D interactif, gr\u00e2ce \u00e0 CSS et jQuery. Le survol d’un carr\u00e9 l’illumine, tandis que la perspective modifi\u00e9e fait que les \u00e9l\u00e9ments du haut semblent loin. Ce serait certainement un fond convaincant.<\/p>\n
Voir le stylo
Logo Digibilly Pixel en CSS et Jquery avec superposition par Joshua Pearson<\/p>\n
L’avantage inh\u00e9rent \u00e0 l’utilisation d’arri\u00e8re-plans bas\u00e9s sur des pixels est leur polyvalence. Vous pouvez, par exemple, aller avec un arri\u00e8re-plan qui comporte beaucoup d’animation astucieuse. Ou peut-\u00eatre pr\u00e9f\u00e9rez-vous quelque chose de compl\u00e8tement statique. Ensuite, il y a le choix entre un mod\u00e8le tr\u00e8s al\u00e9atoire et accrocheur ou un mod\u00e8le plus pr\u00e9visible.<\/p>\n
Quels que soient vos besoins, il existe une version de la technique qui s’adapte parfaitement. Donc, si vous cherchez quelque chose pour aider votre site \u00e0 se d\u00e9marquer, ne n\u00e9gligez pas les capacit\u00e9s en pixels.<\/p>\n
Voulez-vous voir plus d’exemples? Jetez un \u0153il \u00e0 notre collection d’arri\u00e8re-plans de pixels CodePen.<\/p>\n