Interesting CSS pixel art and interesting CSS pixel Art

Interesting CSS pixel art and interesting CSS pixel Art

Address: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

Friendly reminder: CodePen may not be opened or slow due to domestic network reasons. Please be patient!

 

Pixel art, as a form of lost art, is eclipsed by ultra-clear and high-resolution images. I accidentally discovered some pixel art while browsing on CodePen, which reminds me how awesome this art is!

See the Pen Pikachu pixel css by Devi Krisdiansyah (@ agilBAKA) on CodePen.

 

Is it cool? Pixel graphics have something simple and friendly, which is missing in high-definition graphics and illustrations.

This is also a good example of how to use HTML and CSS to create pixel art. Let's analyze this concept and create a pattern that can be used in other cases.

 

Create a grid

First, we need a canvas to draw our pixel work. There are multiple ways to create a grid. One way is to use standard HTML<table>Each row contains a fixed-Width cell. For example, we can draw a perfect square with eight rows and eight columns. If we set the 10px width of each cell, we will get a x table.

See the Pen CSS Pixels-Table Grid Example by Geoff Graham (@ geoffgraham) on CodePen.

 

If you want to get a larger canvas, you can give the cell a larger size. To change the 8-bit resolution to 16-bit resolution, you only need to double the number of cells in each row of the table.

Another way to create a grid is to replace the table with two divs. One is the container of the canvas, and the other represents the elements on the canvas, which can be repeated multiple times as needed.

<div class="canvas">  <div class="pixel"></div>  <!-- Repeat as many times as needed --></div><!-- end .canvas -->

I like this method because it is more realistic for the size of the canvas we define. In addition, I think this method is simpler, without writing Additional HTML tags from table elements.

If we want more pixels to create a clearer pattern, we can double the number of pixels in the HTML Tag and halved the size of each pixel. This is like creating an image in Photoshop that you intend to use on a webpage. To get a higher resolution, you have doubled its size.

.canvas {  /* Perfectly square */  width: 80px;  height: 80px;}.pixel {  /* We'll need 256 total pixels in our HTML */  width: 5px;  height: 5px;  float: left;}

Start drawing

We add colors to pixels, in a sense, as rubber encounters a road surface. We can use the nth-child attribute to select elements in the grid.

/* The third cell in our grid */.pixel:nth-child(3) {  background: orange;}

As you imagine, this list will be very long, depending on the number of cells in the grid and the design details. The example at the beginning of this article uses 1920 pixels and more than 300 subclass selectors. Oh, my God!

 

A simple example

I decided to make a pixel self-portrait. This example is simple because it has few pixels and only four colors in total.

See the Pen CSS Pixels-Self Portrait by Geoff Graham (@ geoffgraham) on CodePen.

 

CSS pixel art as an Icon

Now that we have the material, we can use the transform attribute to narrow down the image and use it as an icon.

See the Pen CSS Pixels-Self Portrait-Icon by Geoff Graham (@ geoffgraham) on CodePen.

 

Other pixel rendering techniques 1. box-shadow

You can use an element to draw pixel art through complex box-shadow attributes. If you declare a vertical and horizontal offset of box-shadow without blurring values and shadow radius, you will get a color copy of the element shape that can be moved freely.

The following is a concept instance. The black element is the initial shape. I have created an orange pixel in the lower left corner and a red pixel in the lower right corner.

See the Pen Basics of Pixel Art by Chris Coyier (@ chriscoyier) on CodePen.

You can use this method to draw the entire pattern.

See the Pen Pixel Hellboy by servin (@ servinlp) on CodePen.

 

2. Preprocessing

You can easily adjust the color and size of a variable.

The following is an example of less writing.

See the Pen Pixel-art hipster pacwoman by Mario Sanz (@ msanz) on CodePen.

This is an example written by Una Kravets. It is a clever way to use Sass map to create box-shadow.

// Setting the colors we're syncing up with$pixel-color-map: (  'r' : #f00,  'w': #fff,  'k': #000,  'o': transparent,  't': #83401f,  'p': #ffbc77,  'b': #06f,  'y': #ff0,  'n': #ff8000,  'g': #5ac528);// Mario pixel art matrices!$pixel-art:(  mushroom: (    (o o o o o k k k k k k o o o o o)    (o o o k k r r r r w w k k o o o)    (o o k w w r r r r w w w w k o o)    (o k w w r r r r r r w w w w k o)    (o k w r r w w w w r r w w w k o)    (k r r r w w w w w w r r r r r k)    (k r r r w w w w w w r r w w r k)    (k w r r w w w w w w r w w w w k)    (k w w r r w w w w r r w w w w k)    (k w w r r r r r r r r r w w r k)    (k w r r k k k k k k k k r r r k)    (o k k k w w k w w k w w k k k o)    (o o k w w w k w w k w w w k o o)    (o o k w w w w w w w w w w k o o)    (o o o k w w w w w w w w k o o o)    (o o o o k k k k k k k k o o o o)  ));

Many functions can convert it to box-shadow and apply it. The following is the final result.

See the Pen Sass-Generated Box Shadow Pixel Art! By Una Kravets (@ una) on CodePen.

Remember that box-shadow can also be animated.

See the Pen Ash and Pikachu box-shadow Pixel Art by Andrew (@ AstroDroid) on CodePen.

 

3. canvas

<Canvas> You can certainly draw a rectangle.

var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");  ctx.fillStyle = "rgb(53, 41, 15)";ctx.fillRect(48, 0, 8, 8);ctx.fillStyle = "rgb(238, 187, 68)";ctx.fillRect(56, 0, 8, 8);

See the Pen Canvas Ark from Terranigma by Max (@ myxotodd) on CodePen.

 

4. svg

Although <svg> has <rect>, you can use <polygon> with more pixels.

See the Pen Pixel me by Alo ï s De Schepper (@ Alo62) on CodePen.

 

5.3D!

Well, I think we have done enough.

See the Pen 3D Pixel Art by cx20 (@ cx20) on CodePen.

You are now

We will always be keen on you to do things in your own way, but you need to know that you already have a lot of pixel graph tools.

• Ludvig Lindblom's Canvas box-shadow pixel art generator
• Jenn Schiffer's make 8-bit art!
• XOXCO's Make Pixel Art