Commencez avec l'art CSS

Un graphique de barre de crème glacée rose avec un visage souriant heureux

Faire de l'art CSS peut être intimidant, mais c'est facile une fois que vous divisez les graphiques en parties simples. Si vous parcourez des sites Web comme CodePen, DevArt et Dribbble, il est très facile de se sentir dépassé par les choses incroyables que font les développeurs et les concepteurs, en particulier lorsque vous débutez. J'ai créé ma première œuvre d'art CSS après m'être caché sur ces sites pendant des années et j'ai finalement trouvé le courage d'essayer de le faire. Aujourd'hui, quelques années et plus de 100 expériences plus tard, c'est l'un de mes passe-temps préférés.

Faire de l'art CSS est intéressant et amusant. Il vous apprend les nuances de CSS avec lesquelles vous ne travaillez pas normalement, vous aide à voir les graphiques (et les problèmes en général) de manière modulaire et améliore votre vitesse lors de l'écriture de CSS. C'est également un excellent moyen pour les concepteurs et les développeurs d'être sur la même longueur d'onde lorsqu'ils travaillent ensemble sur une interface utilisateur. Au fur et à mesure que vous pratiquez et affinez vos compétences en création artistique CSS, vous constaterez une amélioration dans votre travail quotidien (et vous pourriez même l'apprécier davantage).

Dans cet article, nous allons créer un joli graphique de barre de crème glacée en CSS. Je vais vous parler et vous donner le code à suivre, afin que vous puissiez le personnaliser et le personnaliser. Commençons!



01. Configurez votre document

Avant d'écrire un CSS, nous devons avoir quelque chose à styliser. Vous pouvez utiliser un préprocesseur comme HAML ou Pug, ou simplement du HTML pur. Je vais m'en tenir au HTML et au CSS purs dans nos exemples, mais vous êtes libre d'utiliser ce avec quoi vous êtes le plus à l'aise. Tirez un stylo vierge sur CodePen ou un document HTML, et incluez ce qui suit pour la barre de crème glacée dans le .

02. Choisissez les couleurs et les tailles

Normalement, lorsque vous avez un graphique devant vous à créer, vous aurez besoin des dimensions et des couleurs de ce graphique. Dans ce cas particulier, je vous fournirai ces dimensions et ces couleurs.

Lorsque vous ne m'avez pas, je vous recommande de vous procurer un outil de sélection de couleurs (j'utilise personnellement Digital Color Meter sur Mac et ColorPic sur Windows), et un outil de capture d'écran pour déterminer vos dimensions (les natives pour vos systèmes d'exploitation fonctionne très bien).

Ajoutons maintenant ces dimensions et couleurs à notre document.

body { background: #FED550; } .ice-cream { width: 240px; height: 350px; background: #F982BF; } .glare { width: 35px; height: 70px; background: #FF98CC; } .eye { width: 18px; height: 18px; background: #FF2995; } .mouth { width: 75px; height: 25px; background: #FF2995; } .stick { width: 60px; height: 72px; background: #ECAA7D; border-top: 12px solid #DB9E74; }

03. Ajouter un positionnement et des transformations

À l'heure actuelle, notre image est toute en bloc et dans le coin. Avant de tout façonner mieux, ajoutons un positionnement et des transformations. Personnellement, mes techniques de positionnement préférées (généralement) sont les conteneurs de positionnement absolu et l'utilisation de la flexbox pour tout le reste. Si vous préférez utiliser le positionnement absolu et relatif pour tout, ou même CSS Grid, allez-y!

Maintenant, nous devons positionner le conteneur au milieu de la page (j'utiliserai un positionnement absolu et une transformation de traduction), et nous assurer que le contenu du conteneur principal est centré et pivoté selon les besoins.

Vous remarquerez peut-être que j'ai également ajouté quelques dimensions pour le '.visage' et '.les yeux' classes - c'est pour gérer l'espacement dans ce conteneur. Allez-y et ajoutez ces changements en vous-même à chaque classe:

.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } .ice-cream { display: flex; flex-direction: column; justify-content: space-around; } .glare { position: relative; left: 170px; bottom: 20px; transform: rotate(-38deg); } .face { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 58px; } .eyes { display: flex; justify-content: space-between; width: 145px; }

04. Choisissez vos pseudo-éléments

Notre petite barre de crème glacée a l'air plutôt bien, si je le dis moi-même! Un dernier concept extrêmement utile pour créer de l'art CSS est celui des pseudo-éléments.

Chaque élément d'une page peut en fait être trois éléments: l'élément principal, ::avant que , et ::après . Vous pouvez styliser ::avant que et ::après comme s'ils étaient séparés s dans n'importe quel élément.

Par exemple, j'aurais pu changer le .les yeux conteneur pour ne pas avoir .œil du tout, et juste un style ::avant que et ::après pour chaque œil. Cela aurait été cool, mais cela rendrait impossible le style de l'éblouissement de chaque œil.

Cela étant dit, pour le dernier éclat manquant sur ces yeux, ajoutons un ::avant que pseudo-élément pour rendre cela possible. Les éléments clés à ajouter à un pseudo-élément sont une valeur d'affichage et teneur: '' .

Vérifiez-le, et avec cela, nous avons terminé!

.eye { position: relative; } .eye::before { display: block; content: ‘’; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #fff; border-radius: 100%; }

Tu es un artiste!

Si vous souhaitez consulter mon résultat final, vous pouvez le trouver sur mon profil CodePen (ci-dessus). Faire de l'art CSS consiste simplement à appliquer les concepts dont nous avons parlé de manière intéressante et amusante. Vous pouvez utiliser ces techniques et les utiliser, et même ajouter vos propres animations avec des images clés et des transitions. Tout cela étant dit, j'espère que vous avez appris quelque chose de nouveau, et cela vous a motivé à vous essayer à faire quelque chose de beau.

Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web . Acheter le numéro 282 ou s'abonner .

Articles Liés: