Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

8 extraits CSS et JS créatifs pour créer des arrière-plans pixelisés

Les pixels sont les √©l√©ments constitutifs d’une grande partie de ce que nous voyons en ligne. Et plus la technologie d’affichage est avanc√©e, plus ces petits carr√©s sont affich√©s sur nos √©crans. Le r√©sultat est que le texte et les images sont incroyablement nets.

Pourtant, malgr√© toute cette beaut√© high-tech, il y a quelque chose √† dire pour la simplicit√© que l’art classique bas√© sur les pixels apporte √† la table. Non seulement cela nous rappelle le bon vieux temps, mais cela peut aussi √™tre une technique de conception efficace.

Ce qui nous am√®ne au sujet d’aujourd’hui: l’utilisation des pixels comme arri√®re-plan. Dans le bon projet, ils peuvent ajouter un √©l√©ment de plaisir et une cr√©ativit√© surprenante. Jetons un coup d’Ňďil √† quelques extraits de code qui montrent le potentiel du pixel.

Un pixel pour chaque usage

Cet exemple √† multiples facettes montre un large √©ventail de styles et d’options d’animation. Utilisez le menu pr√©d√©fini pour choisir parmi plus de 10 arri√®re-plans SVG diff√©rents. Beaucoup rappellent un jeu vid√©o r√©tro, et certains sont plus adapt√©s √† un usage quotidien que d’autres. Dans tous les cas, cette collection fournit une base solide de ce qui est possible.

Voir le stylo
Pixel-Grid (animations SVG) par Scott Weaver

Fonte noire

Les d√©grad√©s et les pixels ne semblaient jamais tr√®s bien s‚Äôadapter. Mais √† l’√®re du design brutaliste, ils vont de pair comme Mario et Luigi. Cet extrait montre un effet al√©atoire int√©ressant. Utilisez JavaScript pour diviser l’arri√®re-plan en petits carr√©s d’opacit√©s diff√©rentes. Le r√©sultat est une Ňďuvre d’art g√©n√©r√©e qui attirera s√Ľrement l’attention de l’utilisateur.

Voir le stylo
Générateur de dégradé CSS pixélisé par Eric Winton

Images de bon go√Ľt

Voici un exemple incontournable et fait avec bon go√Ľt. Les grands carr√©s s’estompent de fa√ßon apparemment al√©atoire, mais heureusement, ils ne sont pas d√©pass√©s. Cela pourrait √™tre un excellent accent de design pour une zone de h√©ros, o√Ļ une premi√®re impression est la cl√©.

Voir le stylo
RKpBLg par Michael

Un effet subtil

Si vous recherchez un arri√®re-plan anim√© qui ne distrait pas de son contenu, ce simple extrait m√©rite d’√™tre v√©rifi√©. Bien que de style similaire √† l’exemple pr√©c√©dent, il est diff√©rent en ce sens que l’animation ne s’ex√©cute qu’une seule fois. Il suffit d’attirer l’attention sans que l’inconfort potentiel du mouvement se r√©p√®te encore et encore.

Voir le stylo
Animation de fond de pixel par Oren

Masque transformant

Les pixels peuvent √©galement jouer des r√īles compl√©mentaires dans un arri√®re-plan. Par exemple, regardez cette vid√©o. Il a √©t√© rendu plus int√©ressant avec une superposition de motifs de type pixel qui pourrait √™tre utilis√©e pour afficher un simple logo, un symbole ou quelque chose de plus al√©atoire. Encore mieux, cet exemple particulier change de forme. Cliquez n’importe o√Ļ dans la vid√©o pour voir le changement de motif.

Voir le stylo
KaozXe par Micah Frost

Flotteurs

Ce qui distingue cet extrait est sa combinaison de look r√©tro et de fonctionnalit√© moderne. Cr√©√©s avec particules.js, ces pixels flottants rappellent l’art spatial des ann√©es 50 et 60. Passez la souris sur une zone et ses pixels seront mis en √©vidence en blanc brillant, tandis qu’un clic les force √† se disperser.

Voir le stylo
fond de pixel 2 par Alex

Plaid CSS

Le pixel art est une excellente option pour un motif √† carreaux. Les diff√©rences subtiles entre les carr√©s peuvent rendre quelque chose d’attrayant, mais pas r√©aliste. Ici, nous avons un mod√®le CSS assez simple et pur qui pourrait servir de fond de h√©ros, d’en-t√™te ou de page enti√®re.

Voir le stylo
Fond CSS pixélisé (Camo # 1) par Erik Wiedeman

Faites-le en 3D

Jetons un coup d’Ňďil √† un autre excellent exemple de classique et de moderne. Ce logo est devenu un chef-d’Ňďuvre 3D interactif, gr√Ęce √† CSS et jQuery. Le survol d’un carr√© l’illumine, tandis que la perspective modifi√©e fait que les √©l√©ments du haut semblent loin. Ce serait certainement un fond convaincant.

Voir le stylo
Logo Digibilly Pixel en CSS et Jquery avec superposition par Joshua Pearson

Une option flexible pour les fonds

L’avantage inh√©rent √† l’utilisation d’arri√®re-plans bas√©s sur des pixels est leur polyvalence. Vous pouvez, par exemple, aller avec un arri√®re-plan qui comporte beaucoup d’animation astucieuse. Ou peut-√™tre pr√©f√©rez-vous quelque chose de compl√®tement statique. Ensuite, il y a le choix entre un mod√®le tr√®s al√©atoire et accrocheur ou un mod√®le plus pr√©visible.

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 √† se d√©marquer, ne n√©gligez pas les capacit√©s en pixels.

Voulez-vous voir plus d’exemples? Jetez un Ňďil √† notre collection d’arri√®re-plans de pixels CodePen.