Pixel art est l'une de ces formes d'art perdues qui ont été éclipsées par des super images nettes et hautes résolutions. Je suis tombé sur un certain pixel art tout en surfant autour CodePen et il m'a rappelé combien il est génial.
À quel point cela est cool. Il y a quelque chose qui ajoute graphiques pixelisés une couche de simplicité et de convivialité qui peuvent se perdre dans des images haute définition et illustrations.
Il est aussi un excellent exemple de la façon dont nous pouvons créer l'art de pixel en utilisant HTML et CSS. Brisons ce concept vers le bas et créer un modèle que nous pouvons utiliser dans d'autres cas.
Créer une grille
Tout d'abord. Nous avons besoin d'une toile pour peindre notre chef-d'œuvre pixélisée. C'est vraiment une grille que nous pouvons créer deux façons différentes.
Une façon serait une norme HTML
qui contient un tas de cellules de largeur fixe dans chaque rangée. Par exemple, disons que nous tirons une table parfaitement carrée qui est huit colonnes larges et profondes huit lignes. Si nous faisons chaque cellule 10 pixels carrés, nous avons une table qui est 80px large et haute:
Voulez-vous une plus grande toile? Donner aux cellules une plus grande dimension. Vous voulez aller de 8 bits à une résolution de 16 bits? Doubler le nombre de cellules dans chaque ligne du tableau.
L'autre façon de mettre en place une grille est de fossé de la table et le remplacer par deux divs: celui qui agit en tant que conteneur pour notre toile et une autre qui peut être répétée autant de fois que nous voulons représenter chaque pixel dans la toile.
L'astuce est de savoir exactement combien de pixels ici pour créer. Pour cela, nous pouvons multiplier le nombre de pixels de large par le nombre de pixels de haut. Par exemple, si l'on crée la même 80px grille carrée comme la méthode de la table et voulons une grille qui est de 8 pixels de largeur par 8 pixels de haut, on peut alors multiplier celles pour un total de 64 pixels.
commencer à peindre
C'est là que le caoutchouc rencontre la route dans le sens que nous ajouter de la couleur à nos pixels. On peut utiliser l'attribut nième enfant à sélectionner des pixels spécifiques dans la grille.
Comme vous pouvez l'imaginer, cette liste très longue se très rapidement en fonction du nombre de cellules dans la grille et la quantité de détails de la conception exige. L'exemple d'ouverture dans cette publication utilise 1.920 pixels totaux de la grille et plus de 300 différents sélecteurs de l'enfant. Phew!
Un exemple simple
CSS Pixel art comme une icône
Maintenant que nous avons quelque chose à travailler, nous pouvons utiliser la propriété de transformation à l'échelle de notre art vers le bas et l'utiliser comme une icône:
Techniques de dessin Autres Pixel
boîte ombre
Voici le concept. Le « pixel » noir est l'original, et je l'ai créé un pixel orange en bas à gauche et un pixel rouge en bas à droite.
Vous pouvez aller porc sauvage avec ça et faire des dessins entiers.
prétraitement
Les variables pourraient contribuer à faciliter ajuster les couleurs et le dimensionnement et tel. Voici un exemple en moins:
Voici un exemple par Una Kravets qui prend un peu plus loin dans la création de l'ombre de la boîte avec une carte Sass, qui est sacrément intelligent:
Il y a quelques fonctions là-bas pour la transformer dans la boîte ombre et l'appliquer. Voici le résultat final:
Rappelez-vous box-shadow peut être trop animée!
le
Un bien sûr
D'accord, je pense que nous avons fait assez ici.
C'est ton tour!
Nous sommes toujours fan de vous faire les choses à votre façon, mais savons qu'il existe des outils déjà là-bas pour dessiner avec des pixels:
Partager:
Les pixels sont mes préférés!
Pour une approche plus universelle aux pixels évolutifs qui peut être utilisé avec un simple étiqueter ou directement dans la page, essayez Pixels.svg. Laissez tomber dans une image, obtenir les pixels de retour dans une svg.
Il ne sera pas la taille du fichier d'image tout petit, mais il permettra à l'échelle sans perte de fidélité et est aussi faible que possible en utilisant des données de chemin SVG uniques.