你的位置:首页 > 软件开发 > 网页设计 > 有趣的CSS像素艺术

有趣的CSS像素艺术

发布时间:2016-09-04 00:00:08
原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待,多多谅解! 像素艺术作为一种遗失的艺术形式,与超清晰 ...

原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

友情提示:由于国内网络的原因,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 -->

原标题:有趣的CSS像素艺术

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。