未加星标

有趣的CSS像素

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起。

很酷不是吗?像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。

这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念,建立一个可以在其他地方可用的模式。

创建栅格

首先,我们需要一个画布来绘制这个杰作。我们要创建一个栅格,可以通过很多方式。

一种方法是使用标准的 HTML <table> ,在每行包含一堆固定宽度的小格子。举个例子,比如说创建一个八行八列的正方形 table ,如果每个小格子是 10px 的正方形, table 就有 80px 的宽高:

想让画布更大?让小格子尺寸更大些。想从 8-bit 变成 16-bit ?让 table 里每行的小格子宽高加倍。

另一种创建栅格的方法是不用 table ,换成两种 div 组成:一个充当画布容器,另一个将被循环创建多次来做画布的像素块。

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

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

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

我喜欢这种方法是因为它让我们定义的画布尺寸更准确。而且它不需要使用 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 个不同的子选择器!

一个简单的例子

我决定做个像素自画像。我打算用比较少的像素块和仅四种颜色做个简单的。

CSS像素和icon

现在我们已经有了一些作品,可以使用 transform 属性来缩放我们的作品,并把它当icon使用:

其他像素画技巧 box-shadow

使用单一元素配合非常复杂的 box-shadow 也能画出像素画!如果为 box-shadow 定义了水平和垂直偏移量而没有模糊距离或扩散角度,将在元素的偏移位置上得到一个纯色填充的图形副本。

这里有例子。黑色像素是原始的元素,然后我在左下角创建了一个橘色像素,在右下角创建了一个红色像素。

你可以用这种方法画一只野兽。

预处理

使用变量对调整颜色和大小等很有帮助。下面是一个用LESS的例子:

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 的其他方法会被调用。最终效果如下:

记得 box-shadow 也能制作动画!

Canvas

<canvas> API无疑也能画矩形!

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

<svg> 中有 <rect> 。但你也可以取巧地使用 <polygon> 组合成多个像素。

3D!

好吧我们已经完成了。

到你了!

我们也鼓励你用自己的方式做这些,不过这里已经有一些帮助你使用像素绘图的工具了:

Ludvig Lindblom's Canvas box-shadow pixel art generator Jenn Schiffer's make 8-bit art ! XOXCO's Make Pixel Art

你有完成的艺术作品要分享吗?我在 CodePen创建了合集 ,请在评论中附上你们的作品,我们会把出色的作品都会展示出来。

本文根据 @GEOFF GRAHAM 的《 Fun Times With CSS Pixel Art 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://css-tricks.com/fun-times-css-pixel-art/ 。


有趣的CSS像素
Heng温

前端开发,音乐,动漫,技术控,喜欢折腾新鲜事物,以不断学习的态度,在前端的路上走下去。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSHTML前端开发分辨率矩形变量
分页:12
转载请注明
本文标题:有趣的CSS像素
本站链接:http://www.codesec.net/view/482487.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(29)