재미있는 CSS 픽셀 아트

원본 주소: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

알림: 국내 네트워크 문제로 인해 CodePen이 열리지 않거나 매우 느릴 수 있으니 조금만 기다려주세요!

픽셀 아트는 매우 선명한 고해상도 사진에 비하면 아무것도 아닌 잃어버린 예술 형식입니다. CodePen을 검색하는 동안 우연히 픽셀 아트를 발견했는데 이 아트가 얼마나 멋진지 상기시켜 주었습니다!

CodePen에서 Devi Krisdiansyah(@agilBAKA)의 Pen Pikachu 픽셀 CSS를 확인하세요.

멋지지 않나요? 고화질 그래픽과 일러스트레이션에는 없는 픽셀화된 그래픽에는 단순하고 친근한 뭔가가 있습니다.

이는 HTML과 CSS를 사용하여 픽셀 아트를 만드는 방법을 보여주는 좋은 예이기도 합니다. 이 개념을 분석하여 다른 상황에서도 사용할 수 있는 패턴을 만들어 보겠습니다.

그리드 생성

먼저 픽셀화된 작품을 그릴 캔버스가 필요합니다. 그리드를 만드는 방법에는 여러 가지가 있습니다. 한 가지 방법은 각 행의 고정 너비 셀을 포함하는 표준 HTML <table> 요소를 사용하는 것입니다. 예를 들어, 8개의 행과 8개의 열로 구성된 완전 정사각형을 그립니다. 각 셀의 너비를 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">CodePen에서 Geoff Graham(@geoffgraham)이 작성한 Pen CSS Pixels - Table Grid 예제를 참조하세요.</p> <p> </p> <p>더 큰 캔버스를 원할 경우 셀 크기를 더 크게 설정하세요. 8비트 해상도에서 16비트 해상도로 변경하려면 테이블의 각 행에 있는 셀 수를 두 배로 늘리기만 하면 됩니다. </p> <p>그리드를 만드는 또 다른 방법은 테이블 대신 두 개의 div를 사용하는 것입니다. 그 중 하나는 캔버스의 컨테이너 역할을 하고, 다른 하나는 캔버스의 요소를 나타내며 필요한 만큼 반복할 수 있습니다. </p> <div class="cnblogs_code"> <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> <p>제가 이것을 좋아하는 이유는 우리가 정의한 캔버스 크기에 더 현실적이기 때문입니다. 그리고 <span class="cnblogs_code">table</span> 요소에서 추가 HTML 태그를 작성하지 않고도 이 방법이 더 간단하다고 생각합니다. </p> <p>보다 명확한 패턴을 만들기 위해 더 많은 픽셀을 원한다면 HTML 태그의 픽셀 수를 두 배로 늘리고 각 픽셀의 크기를 절반으로 줄일 수 있습니다. 마치 웹 페이지에 사용하려는 이미지를 Photoshop에서 만들고 더 높은 해상도를 얻기 위해 크기를 두 배로 늘린 것과 같습니다. </p> <div class="cnblogs_code"> <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> <h2> </h2> <h2 id="그림-그리기-시작">그림 그리기 시작</h2> <p>우리는 고무가 도로를 만나는 것처럼 픽셀에 색상을 추가합니다. <span class="cnblogs_code"><span style="color: #800000;">nth-child</span></span> 속성을 ​​사용하여 그리드에서 요소를 선택할 수 있습니다. </p> <div class="cnblogs_code"> <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> <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"> <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> <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"> <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> <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">CodePen에서 Max(@MyXoToD)가 제작한 Tranigma의 Pen Canvas Ark를 살펴보세요.</p> <p> </p> <h3> </h3>4.svg<p> <span class="cnblogs_code"><span style="color: #0000ff;"></span></span>svg<span style="color: #0000ff;"></span>><span class="cnblogs_code"><span style="color: #0000ff;"></span></span>직선이 있지만 <span style="color: #0000ff;"></span>><span class="cnblogs_code"> 그러나 기회주의적으로 다음을 포함하는 <span style="color: #0000ff;"></span></span>polygon<span style="color: #0000ff;"></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"> </p>CodePen에서 Aloïs De Schepper(@Alo62)의 Pen Pixel me를 확인하세요.<p> </p> <h3> </h3> <p>5.3D! </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">글쎄요, 할 만큼 했다고 생각합니다. </p> <h2 id="CodePen에서-cx-cx-의-Pen-D-픽셀-아트를-확인하세요">CodePen에서 cx20(@cx20)의 Pen 3D 픽셀 아트를 확인하세요.</h2> <h2> </h2> <p> </p>당신 차례입니다<ul> <li>우리는 항상 여러분이 자신만의 방식으로 작업하기를 원하지만 픽셀 아트를 그리는 데 사용할 수 있는 도구가 많이 있다는 것을 알아두세요. </li> <li> </li>Ludvig Lindblom의 캔버스 상자 그림자 픽셀 아트 생성기<li> </li>Jenn Schiffer가 만든 8비트 아트!</ul> <p>XOXCO의 Make Pixel Art</p> <div id="MySignature"> </div> <div class="clear"></div> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script><script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> </table>