有趣的CSS像素艺术
友情提示：由于国内网络的原因，CodePen可能会打不开或者非常慢，请耐心等待！
像素艺术作为一种遗失的艺术形式，与超清晰，高分辨率图片相比黯然失色。我在CodePen上浏览时偶然发现了一些像素艺术，它提醒我这种艺术是多么令人敬畏！
See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen.
是不是很酷？像素化图形中有某种简单友好的东西，而这些东西是高清晰图形和插图中缺失的。
这也是教我们如何用HTML和CSS创建像素艺术的一个很好的案例。让我们分析下这个概念，并创建一个可以在其他情况下使用的模式。
创建网格
第一件事，我们需要一张绘制我们像素化作品的画布。我们有多种方式来创建网格。一种方式是使用标准的HTML See the Pen CSS Pixels - Table Grid Example by Geoff Graham (@geoffgraham) on CodePen. 如果想获得更大的画布就给单元格一个更大的尺寸。如果想从8-bit分辨率改成16-bit的分辨率，只需要将表格的每一行的单元格数量翻倍。 另外一种建立网格的方法是用两个div代替表格。其中一个作为画布的容器；另一个代表画布上的元素，可以根据我们的需要重复多次。 我喜欢这一方式的原因是它对于我们定义的画布尺寸更加真实。而且我觉得这种方式更加简单，无需编写来自 table 元素的额外的HTML标签。 如果我们想要更多的像素来创建更清晰的图案，那么我们可以在HTML标签中将像素数翻两倍，并且将每个像素的尺寸减半。这就如同你在Photoshop中创建了一张你打算在网页中使用的图像，为了获得更高分辨率，你把它的尺寸扩大了一倍。 我们给像素添加颜色在某种意义上说犹如橡胶遇到路面。我们可以使用 nth-child 属性选择网格中的元素。 正如你想象的那样，这个列表会很长，它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了1920个像素并且超过300个子类选择器。天哪！ 我决定做一张像素化的自画像。这个例子很简单，因为它的像素很少并且总共只有四种颜色。 See the Pen CSS Pixels - Self Portrait by Geoff Graham (@geoffgraham) on CodePen. 既然我们已经有了素材，我们可以 使用 transform 属性缩小图片把它作为icon使用。 See the Pen CSS Pixels - Self Portrait - Icon by Geoff Graham (@geoffgraham) on CodePen. 你可以用一个元素通过复杂的 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，很聪明的方法。 有很多函数可以把它转换成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> 肯定可以绘制矩形。 See the Pen Canvas Ark from Terranigma by Max (@MyXoToD) on CodePen. 虽然 svg> 有 rect> ，但是你可以投机取巧使用包含更多像素的 polygon> 。 See the Pen Pixel me by Aloïs De Schepper (@Alo62) on CodePen. 好吧，我想我们已经做得够多了。 See the Pen 3D Pixel Art by cx20 (@cx20) on CodePen. 我们会一直热衷于你以自己的方式做事，但需要了解现在已经有了很多绘制像素图的工具。 声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。 相关文章 相关视频 全栈 170W+ 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门 入门 80W+ 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门 实战 120W+ 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
元素，它的每一行都包含固定宽度的单元格。比如我们画一个八行八列的完美的正方形。如果我们设置每一个单元格10px宽，那么我们会得到一个80X80的表格。
div class="canvas">
div class="pixel">div>
div>
.canvas {
/* Perfectly square */
width: 80px;
height: 80px;
}
.pixel {
/* We'll need 256 total pixels in our HTML */
width: 5px;
height: 5px;
float: left;
}
开始画图
/* The third cell in our grid */
.pixel:nth-child(3) {
background: orange;
}
一个简单的例子
作为Icon的CSS像素艺术
其他的像素绘制技术
1.box-shadow
2.预处理
// 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)
)
);
3.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);
4.svg
5.3D！
该你了
专题推荐
独孤九贱-php全栈开发教程
玉女心经-web前端开发教程
天龙八部-实战开发教程
推荐阅读
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论