有趣的CSS像素艺术

原文地址：https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

友情提示：由于国内网络的原因，CodePen可能会打不开或者非常慢，请耐心等待！

 

像素艺术作为一种遗失的艺术形式，与超清晰，高分辨率图片相比黯然失色。我在CodePen上浏览时偶然发现了一些像素艺术，它提醒我这种艺术是多么令人敬畏！

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

 

是不是很酷？像素化图形中有某种简单友好的东西，而这些东西是高清晰图形和插图中缺失的。

这也是教我们如何用HTML和CSS创建像素艺术的一个很好的案例。让我们分析下这个概念，并创建一个可以在其他情况下使用的模式。

 

创建网格

第一件事，我们需要一张绘制我们像素化作品的画布。我们有多种方式来创建网格。一种方式是使用标准的HTML <table>元素，它的每一行都包含固定宽度的单元格。比如我们画一个八行八列的完美的正方形。如果我们设置每一个单元格10px宽，那么我们会得到一个80X80的表格。 <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="yJWXZK" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.</p> <p> </p> <p>如果想获得更大的画布就给单元格一个更大的尺寸。如果想从8-bit分辨率改成16-bit的分辨率，只需要将表格的每一行的单元格数量翻倍。</p> <p>另外一种建立网格的方法是用两个div代替表格。其中一个作为画布的容器；另一个代表画布上的元素，可以根据我们的需要重复多次。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;color: #0000ff;&quot;&gt;&lt;span style=&quot;color: #800000;&quot;&gt;div &lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;class&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;=&quot;canvas&quot;&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&gt;&lt;/span&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;&lt;span style=&quot;color: #800000;&quot;&gt;div &lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;class&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;=&quot;pixel&quot;&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color: #800000;&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&gt;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&lt;!--&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt; Repeat as many times as needed &lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;--&gt;&lt;/span&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;&lt;/span&gt;&lt;span style=&quot;color: #800000;&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&lt;!--&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt; end .canvas &lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;--&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>我喜欢这一方式的原因是它对于我们定义的画布尺寸更加真实。而且我觉得这种方式更加简单，无需编写来自 <span class="cnblogs_code">table</span> 元素的额外的HTML标签。</p> <p>如果我们想要更多的像素来创建更清晰的图案，那么我们可以在HTML标签中将像素数翻两倍，并且将每个像素的尺寸减半。这就如同你在Photoshop中创建了一张你打算在网页中使用的图像，为了获得更高分辨率，你把它的尺寸扩大了一倍。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;color: #800000;&quot;&gt;.canvas &lt;/span&gt;{ &lt;span style=&quot;color: #008000;&quot;&gt;/*&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt; Perfectly square &lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;*/&lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt; width&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; 80px&lt;/span&gt;;&lt;span style=&quot;color: #ff0000;&quot;&gt; height&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; 80px&lt;/span&gt;; }&lt;span style=&quot;color: #800000;&quot;&gt; .pixel &lt;/span&gt;{ &lt;span style=&quot;color: #008000;&quot;&gt;/*&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt; We'll need 256 total pixels in our HTML &lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;*/&lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt; width&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; 5px&lt;/span&gt;;&lt;span style=&quot;color: #ff0000;&quot;&gt; height&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; 5px&lt;/span&gt;;&lt;span style=&quot;color: #ff0000;&quot;&gt; float&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; left&lt;/span&gt;; }</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <h2 id=""> </h2> <h2 id="开始画图">开始画图</h2> <p>我们给像素添加颜色在某种意义上说犹如橡胶遇到路面。我们可以使用 <span class="cnblogs_code"><span style="color: #800000;">nth-child</span></span> 属性选择网格中的元素。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;color: #008000;&quot;&gt;/*&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt; The third cell in our grid &lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;*/&lt;/span&gt;&lt;span style=&quot;color: #800000;&quot;&gt; .pixel:nth-child(3) &lt;/span&gt;{&lt;span style=&quot;color: #ff0000;&quot;&gt; background&lt;/span&gt;:&lt;span style=&quot;color: #0000ff;&quot;&gt; orange&lt;/span&gt;; }</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>正如你想象的那样，这个列表会很长，它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了1920个像素并且超过300个子类选择器。天哪！</p> <p> </p> <h2 id="一个简单的例子">一个简单的例子</h2> <p>我决定做一张像素化的自画像。这个例子很简单，因为它的像素很少并且总共只有四种颜色。</p> <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="qNGXjA" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Self Portrait by Geoff Graham (@geoffgraham) on CodePen.</p> <p> </p> <h2 id=""> </h2> <h2 id="作为Icon的CSS像素艺术">作为Icon的CSS像素艺术</h2> <p>既然我们已经有了素材，我们可以 使用 <span class="cnblogs_code"><span style="color: #800000;">transform </span></span>属性缩小图片把它作为icon使用。</p> <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="rLgGar" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Self Portrait - Icon by Geoff Graham (@geoffgraham) on CodePen.</p> <p> </p> <h2 id=""> </h2> <h2 id="其他的像素绘制技术">其他的像素绘制技术</h2> <h3 id="box-shadow">1.box-shadow</h3> <p>你可以用一个元素通过复杂的 <span class="cnblogs_code"><span style="color: #800000;">box-shadow</span></span> 属性绘制像素艺术。如果你声明一个 <span class="cnblogs_code"><span style="color: #800000;">box-shadow</span></span> 的垂直和水平偏移，而没有模糊值及阴影半径，你将得到一个可以随意移动的元素形状的彩色复制体。</p> <p>以下是概念实例。黑色元素是初始形状，我已经在左下角创建了一个橙色像素以及在右下角创建了一个红色像素。</p> <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="qaWqLV" data-default-tab="result" data-user="chriscoyier" data-embed-version="2">See the Pen Basics of Pixel Art by Chris Coyier (@chriscoyier) on CodePen.</p> <p>你可以疯狂的使用这种方式绘制整个图案。</p> <p class="codepen" data-height="432" data-theme-id="dark" data-slug-hash="yYbmrm" data-default-tab="result" data-user="servinlp" data-embed-version="2">See the Pen Pixel Hellboy by servin (@servinlp) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p> </p> <h3 id="预处理">2.预处理</h3> <p>变量可以更容易地调整颜色和大小等。</p> <p>以下是less编写的例子。</p> <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="jbMXwq" data-default-tab="result" data-user="msanz" data-embed-version="2">See the Pen Pixel-art hipster pacwoman by Mario Sanz (@msanz) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p>这是Una Kravets编写的例子， 他更进一步地使用Sass map 创建box-shadow，很聪明的方法。</p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;color: #800000;&quot;&gt;// 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) ) );&lt;/span&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>有很多函数可以把它转换成box-shadow并且应用它。下面是最终结果。</p> <p class="codepen" data-height="600" data-theme-id="dark" data-slug-hash="oXXRgg" data-default-tab="result" data-user="una" data-embed-version="2">See the Pen Sass-Generated Box Shadow Pixel Art! by Una Kravets (@una) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p>记住box-shadow也可以做动画。</p> <p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="OXEEgL" data-default-tab="result" data-user="AstroDroid" data-embed-version="2">See the Pen Ash and Pikachu box-shadow Pixel Art by Andrew (@AstroDroid) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p> </p> <h3 id="canvas">3.canvas</h3> <p> <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">canvas</span><span style="color: #0000ff;">></span></span> 肯定可以绘制矩形。</span></p> <div class="cnblogs_code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;color: #0000ff;&quot;&gt;var&lt;/span&gt; canvas = document.getElementById(&quot;canvas&quot;&lt;span style=&quot;color: #000000;&quot;&gt;); &lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;var&lt;/span&gt; ctx = canvas.getContext(&quot;2d&quot;&lt;span style=&quot;color: #000000;&quot;&gt;); ctx.fillStyle &lt;/span&gt;= &quot;rgb(53, 41, 15)&quot;&lt;span style=&quot;color: #000000;&quot;&gt;; ctx.fillRect(&lt;/span&gt;48, 0, 8, 8&lt;span style=&quot;color: #000000;&quot;&gt;); ctx.fillStyle &lt;/span&gt;= &quot;rgb(238, 187, 68)&quot;&lt;span style=&quot;color: #000000;&quot;&gt;; ctx.fillRect(&lt;/span&gt;56, 0, 8, 8);</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p class="codepen" data-height="350" data-theme-id="dark" data-slug-hash="fvnek" data-default-tab="result" data-user="MyXoToD" data-embed-version="2">See the Pen Canvas Ark from Terranigma by Max (@MyXoToD) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p> </p> <h3 id="svg">4.svg</h3> <p>虽然 <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span> 有 <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">rect</span><span style="color: #0000ff;">></span></span> ，但是你可以投机取巧使用包含更多像素的 <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">polygon</span><span style="color: #0000ff;">></span></span> 。</span></span></span></p> <p class="codepen" data-height="392" data-theme-id="dark" data-slug-hash="pJmQWj" data-default-tab="result" data-user="Alo62" data-embed-version="2">See the Pen Pixel me by Aloïs De Schepper (@Alo62) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <p> </p> <h3 id="D">5.3D！</h3> <p>好吧，我想我们已经做得够多了。</p> <p class="codepen" data-height="407" data-theme-id="dark" data-slug-hash="qEibr" data-default-tab="result" data-user="cx20" data-embed-version="2">See the Pen 3D Pixel Art by cx20 (@cx20) on CodePen.</p> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <h2 id=""> </h2> <h2 id="该你了">该你了</h2> <p>我们会一直热衷于你以自己的方式做事，但需要了解现在已经有了很多绘制像素图的工具。</p> <ul> <li>Ludvig Lindblom's Canvas box-shadow pixel art generator</li> <li>Jenn Schiffer's make 8-bit art!</li> <li>XOXCO's Make Pixel Art</li> </ul> <p> </p> <div id="MySignature"></div> <div class="clear"></div> </table>