Table of Contents
Create grid
Start drawing
一个简单的例子
 
作为Icon的CSS像素艺术
其他的像素绘制技术
1.box-shadow
2.预处理
3.canvas
4.svg
5.3D!
It’s your turn
Home Web Front-end HTML Tutorial Fun CSS Pixel Art

Fun CSS Pixel Art

Sep 05, 2016 am 08:45 AM

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

Friendly reminder: Due to domestic network issues, CodePen may not be able to open or may be very slow, please be patient!

Pixel art is a lost art form that pales in comparison to ultra-clear, high-resolution pictures. I stumbled across some pixel art while browsing on CodePen and it reminded me how awesome this art can be!

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

Isn’t it cool? There's something simple and friendly about pixelated graphics that's missing from high-definition graphics and illustrations.

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

Create grid

First thing, we need a canvas to draw our pixelated artwork on. There are many ways to create a grid. One way is to use the standard HTML <table> element, which contains fixed-width cells for each row. For example, we draw a perfect square with eight rows and eight columns. If we set each cell to 10px wide, then we will get an 80X80 table.

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

Give the cell a larger size if you want a larger canvas. If you want to change from 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 use two divs instead of tables. One of them acts as a container for the canvas; the other represents the elements on the canvas and can be repeated as many times as we need.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="canvas"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pixel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #008000;"><!--</span><span style="color: #008000;"> Repeat as many times as needed </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> end .canvas </span><span style="color: #008000;">--></span>
Copy after login

The reason I like this is that it's more realistic to the canvas size we defined. And I think this way is simpler without writing extra HTML tags from the table element.

If we want more pixels to create a clearer pattern, then we can double the number of pixels in the HTML tag and halve the size of each pixel. It's as if you created an image in Photoshop that you intended to use on a web page and doubled its size to get a higher resolution.

<span style="color: #800000;">.canvas </span>{
  <span style="color: #008000;">/*</span><span style="color: #008000;"> Perfectly square </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 80px</span>;
}<span style="color: #800000;">

.pixel </span>{
  <span style="color: #008000;">/*</span><span style="color: #008000;"> We'll need 256 total pixels in our HTML </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}
Copy after login

Start drawing

We add color to pixels in a sense like rubber meets road. We can select elements in the grid using the nth-child attribute.

<span style="color: #008000;">/*</span><span style="color: #008000;"> The third cell in our grid </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.pixel:nth-child(3) </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> orange</span>;
}
Copy after login

正如你想象的那样,这个列表会很长,它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了1920个像素并且超过300个子类选择器。天哪!

 

一个简单的例子

我决定做一张像素化的自画像。这个例子很简单,因为它的像素很少并且总共只有四种颜色。

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

 

 

作为Icon的CSS像素艺术

既然我们已经有了素材,我们可以 使用 transform 属性缩小图片把它作为icon使用。

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

 

 

其他的像素绘制技术

1.box-shadow

你可以用一个元素通过复杂的 box-shadow 属性绘制像素艺术。如果你声明一个 box-shadow 的垂直和水平偏移,而没有模糊值及阴影半径,你将得到一个可以随意移动的元素形状的彩色复制体。

以下是概念实例。黑色元素是初始形状,我已经在左下角创建了一个橙色像素以及在右下角创建了一个红色像素。

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

你可以疯狂的使用这种方式绘制整个图案。

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

 

2.预处理

变量可以更容易地调整颜色和大小等。

以下是less编写的例子。

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

这是Una Kravets编写的例子, 他更进一步地使用Sass map 创建box-shadow,很聪明的方法。

<span style="color: #800000;">// 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)
  )
);</span>
Copy after login

有很多函数可以把它转换成box-shadow并且应用它。下面是最终结果。

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

记住box-shadow也可以做动画。

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

 

3.canvas

 <canvas> 肯定可以绘制矩形。

<span style="color: #0000ff;">var</span> canvas = document.getElementById("canvas"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> ctx = canvas.getContext("2d"<span style="color: #000000;">);
  
ctx.fillStyle </span>= "rgb(53, 41, 15)"<span style="color: #000000;">;
ctx.fillRect(</span>48, 0, 8, 8<span style="color: #000000;">);
ctx.fillStyle </span>= "rgb(238, 187, 68)"<span style="color: #000000;">;
ctx.fillRect(</span>56, 0, 8, 8);
Copy after login

See the Pen Canvas Ark from Tranigma by Max (@MyXoToD) on CodePen.

4.svg

Although <svg> has <rect> , but you can be opportunistic and use < which contains more pixels polygon> ; .

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

5.3D!

Okay, I think we’ve done enough.

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

It’s your turn

We’re always keen for you to do things your own way, but know that there are plenty of tools out there for drawing pixel art.

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

See all articles