Interesting CSS Pixel art

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

Friendship tip: Because of the domestic network, Codepen may not open or very slow, please wait patiently, a lot of understanding!

Pixel art, as a lost art form, is eclipsed by ultra-clear, high-resolution images. When I browsed the codepen, I stumbled upon some pixel art, reminding me how awesome this art is!

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

Isn't it cool? There are some simple and friendly things in pixelated graphics that are missing from high-definition graphics and illustrations.

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

Create Mesh

First thing, we need a canvas for drawing our pixelated work. We have several ways to create meshes. One way is to use standard HTML <table> elements, with each row containing a fixed-width cell. Let's say we draw a perfect square of eight rows and eight columns. If we set each cell to 10px wide, then we will get a 80x80 table.

See the Pen CSS pixels-table Grid Example by Geoff Graham (@geoffgraham) on Codepen.

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

Another way to create a grid is to use two div instead of a table. One is a container for the canvas, and the other represents the elements on the canvas, which can be repeated as many times as we want.

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

The reason I like this is that it's more realistic about the size of the canvas that we define. And I think it's easier to do that without having to write extra HTML tags from the table element.

If we want more pixels to create a sharper pattern, we can double the number of pixels in the HTML tag and halve the size of each pixel. This is as if you created an image in Photoshop that you intend to use in your Web page, and in order to get a higher resolution, you have enlarged it by a factor.

{  /**/  width: 80px;   Height: 80px;}  {  /**/  width: 5px;   Height: 5px;   float: left;}

Start drawing

We add color to pixels in a way that's like rubber meets the road. We can use the nth-child property to select elements in the grid.

/**/{  background: orange;}

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

A simple example

I decided to make a self-portrait with a pixelated image. This example is simple because it has few pixels and a total of four colors.

See the Pen CSS pixels-self Portrait by Geoff Graham (@geoffgraham) on Codepen.

CSS pixel art as icon

Now that we've got the footage, we can use the transform property to zoom out on the image using 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 properties. If you declare a Box-shadow vertical and horizontal offset, without the blur value and shadow radius, you will get a colored copy of the element shape that can be moved arbitrarily.

The following is a conceptual example. The black element is the initial shape, and 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 whole pattern crazily.

See the Pen Pixel Hellboy by Servin (@servinlp) on Codepen.

2. Preprocessing

Variables make it easier to adjust colors, sizes, and so on.

The following is an example of less writing.

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

This is the example that Una Kravets wrote, and he further uses SASS map to create Box-shadow, a clever way.

Setting the colors we ' re syncing up With$pixel-color-map: (  ' R ': #f00,  ' W ': #fff, '  K ': #000,  ' o ': Tran Sparent,  ' t ': #83401f,  ' P ': #ffbc77,  ' B ': #06f, '  y ': #ff0,  ' n ': #ff8000,  ' G ': #5ac528);// Mario pixel art matrices! $pixel-art: (mushroom: (o o o k k k K. K K K    o O) (o o o k k r r R) R    W W  K k o O)    (o o k w w r r r R W w k o O)    (o k w W r r R) R R 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 R r r r    K)    (k R-R R W W W W r K)    (k W R R W W w W K) W R W W    (k w W R R W W W r R W W W w K)    (k W W R r R R R W R r R K)    (k W R r K 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 k o O)    (o o o k w w w W Watts W w w k o O)    (o o o k k k K. K K K k k o O)))  ;

There are many functions that can convert it to Box-shadow and apply it. Here 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> can certainly draw rectangles.

var canvas = document.getElementById ("canvas"); var ctx = Canvas.getcontext ("2d");   = "RGB (0, 8, 8=" rgb (238, 187,ctx.fillrect) "; Ctx.fillrect (56, 0, 8, 8);

See the Pen Canvas Ark from Terranigma to Max (@MyXoToD) on Codepen.

4.svg

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

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

5.3d!

Well, I think we've done enough.

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

Your turn

We'll always be passionate about what you do in your own way, but you need to understand that there are a lot of tools for drawing pixel graphs now.

• Ludvig Lindblom ' s Canvas box-shadow pixel art Generator
• Jenn Schiffer ' s make 8-bit art!
• Xoxco ' s make Pixel Art

Interesting CSS Pixel art