专栏首页前端新视界有趣的 CSS 像素艺术

有趣的 CSS 像素艺术

原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待!

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

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

是不是很酷?像素化图形中简单友好,而这是高清晰图形和插图中缺失的。

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

创建网格

第一件事,我们需要一张绘制我们像素化作品的画布。我们有多种方式来创建网格。一种方式是使用标准的 HTML <table>元素,它的每一行都包含固定宽度的单元格。比如我们画一个八行八列的完美的正方形。如果我们设置每一个单元格 10px 宽,那么我们会得到一个 80X80 的表格。

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

如果想获得更大的画布就给单元格一个更大的尺寸。如果想从 8-bit 分辨率改成 16-bit 的分辨率,只需要将表格的每一行的单元格数量翻倍。

另外一种建立网格的方法是用两个 div 代替表格。其中一个作为画布的容器;另一个代表画布上的元素,可以根据我们的需要重复多次。

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

这种方法需要明确知道需要创建多少像素块。为此,可以通过将每行的像素数和每列像素数相乘得到。举个例子,如过我们像上面一样想创建80px的正方形,并且希望每行有8个像素点,就可以算出总共需要64个像素点。著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 原文: http://www.w3cplus.com/css/fun-times-css-pixel-art.html © w3cplus.com

这种方法需要明确知道要创建多少像素块。为此,可以通过将每行的像素数和每列像素数相乘得到。举例来说,如果和上面一样创建 80px 的正方形,并且希望得到 8X8 像素的网格,就可以算出总共需要 64 个像素点。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 64 total pixels in our HTML */
  width: 10px;
  height: 10px;
  float: left;
}

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

我喜欢这一方式的原因是它对于我们定义的画布尺寸更加真实。而且我觉得这种方式更加简单,无需编写来自 table 元素的额外的 HTML 标签。

如果我们想要更多的像素来创建更清晰的图案,那么我们可以在 HTML 标签中将像素数翻两倍,并且将每个像素的尺寸减半。这就如同你在 Photoshop 中创建了一张你打算在网页中使用的图像,为了获得更高分辨率,你把它的尺寸扩大了一倍。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

开始画图

我们给像素添加颜色在某种意义上说犹如橡胶遇到路面。我们可以使用 nth-child 属性选择网格中的元素。

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

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

其他的像素绘制技术

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.

预处理

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

以下是 less 编写的例子。

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

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

// 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)
  )
);

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

canvas

<canvas> 定可以绘制矩形。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
  
ctx.fillStyle = "rgb(53, 41, 15)";
ctx.fillRect(48, 0, 8, 8);
ctx.fillStyle = "rgb(238, 187, 68)";
ctx.fillRect(56, 0, 8, 8);

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

svg

虽然 <svg> 有 <rect> ,但是你可以投机取巧使用包含更多像素的 <polygon>

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

3D!

好吧,我想我们已经做得够多了。

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

该你了

我们会一直热衷于你以自己的方式做事,但需要了解现在已经有了很多绘制像素图的工具。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,...

    张果
  • 为什么CSS Grid在创建布局上比Bootstrap更好

    CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

    企鹅号小编
  • css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码...

    coders
  • CSS样式基础

    定义 :全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。...

    企鹅号小编
  • CSS3与页面布局学习总结(五)——Web Font与Sprite

    一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

    张果
  • CSS3与页面布局学习总结(四)——页面布局大全

    一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

    张果
  • CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。...

    张果
  • 5个你可能不知道的CSS属性

    每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。 在这篇文章中,我将介绍5个相对较新的CS...

    企鹅号小编
  • CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同,相同内核的版本不同...

    张果
  • CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width...

    coders

扫码关注云+社区

领取腾讯云代金券