楽しいCSSピクセルアート

元のアドレス: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

フレンドリーなリマインダー: 国内ネットワークの問題により、CodePen を開けないか、非常に遅い場合があります。しばらくお待ちください。

ピクセル アートは、超鮮明な高解像度の写真と比較すると見劣りする、失われた芸術形式です。 CodePen を閲覧中にピクセル アートを偶然見つけました。このアートがどれほど素晴らしいものであるかを思い出しました。

CodePen で Devi Krisdiansyah (@agilBAKA) によるペン ピカチュウのピクセル CSS を参照してください。

クールじゃないですか？ピクセル化されたグラフィックには、高解像度のグラフィックやイラストには欠けている、シンプルで親しみやすいものがあります。

これは、HTML と CSS を使用してピクセル アートを作成する方法の優れた例でもあります。この概念を分析して、他の状況でも使用できるパターンを作成してみましょう。

グリッドを作成する

まず、ピクセル化されたアートワークを描くためのキャンバスが必要です。グリッドを作成するにはさまざまな方法があります。 1 つの方法は、各行に固定幅のセルを含む標準の HTML <table> 要素を使用することです。たとえば、8 行 8 列の完全な正方形を描きます。各セルの幅を 10 ピクセルに設定すると、80X80 のテーブルが得られます。

CodePen の Geoff Graham (@geoffgraham) による「ペン CSS ピクセル - テーブル グリッドの例」を参照してください。

より大きなキャンバスが必要な場合は、セルのサイズを大きくします。 8 ビット解像度から 16 ビット解像度に変更する場合は、テーブルの各行のセルの数を 2 倍にするだけで済みます。

グリッドを作成する別の方法は、テーブルの代わりに 2 つの div を使用することです。 1 つはキャンバスのコンテナとして機能し、もう 1 つはキャンバス上の要素を表し、必要なだけ繰り返すことができます。

リーリー

これが好きな理由は、定義したキャンバス サイズにより現実的だからです。そして、table要素から余分なHTMLタグを書かずに済むこの方法の方が簡単だと思います。

より多くのピクセルを使用してより鮮明なパターンを作成したい場合は、HTML タグ内のピクセル数を 2 倍にし、各ピクセルのサイズを半分にすることができます。これは、Web ページで使用するために Photoshop で画像を作成し、そのサイズを 2 倍にして解像度を高くしたようなものです。

リーリー

絵を描き始める

ゴムと道路が出会うような感覚でピクセルに色を追加します。 nth-child 属性を使用してグリッド内の要素を選択できます。

リーリー

正如你想象的那样，这个列表会很长，它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了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>

有很多函数可以把它转换成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);

CodePen で Max (@MyXoToD) による Tranigma のペン キャンバス アークを参照してください。

4.svg

<svg>には <rect>がありますが、便宜的に、さらに多くの内容を含む<を使用することもできますピクセルポリゴン > .

CodePen の Aloïs De Schepper (@Alo62) による Pen Pixel me を参照してください。

5.3D!

さて、もう十分やったと思います。

CodePen で cx20 (@cx20) によるペン 3D ピクセル アートをご覧ください。

あなたの番です

私たちは、皆さんが自分のやり方で物事を進められることを常に望んでいますが、ピクセル アートを描くためのツールはたくさんあることを知っておいてください。

Ludvig Lindblom の Canvas ボックスシャドウ ピクセル アート ジェネレーター
Jenn Schiffer が 8 ビット アートを作成します!
XOXCO がピクセルアートを作ります