从纯CSS蒙娜丽莎说起

1行HTML+纯CSS画蒙娜丽莎 说起。

复制那段HTML代码,
保存成.html文件,然后用Safari或者Chrome等先进的浏览器打开。
看到了什么?

Pure CSS Mona Lisa

这实际上是一个只用1个HTML5标签和一段CSS绘制出来的达芬奇名作蒙娜丽莎!

不含任何JavaScript哟!

上回还分享过CSS3画出来的超级英雄,可是人类似乎无法阻止CSS hacker们用CSS捣鼓更多玩意儿的步伐了。

这回硬生生画出了个这么复杂的图像。

不过如果去了解“成像原理”,发现其实是两码事。

这个蒙娜丽莎其实是将一张jpg图片转格式生成的,所以说只要你有那个转格式工具,小白也可以充大黑。和其他CSS作画行为比起来,好比是拍照和画画的区别。

而实现这一切的这部相机就是:
image2css

这是Web设计师Jay SalvatGithub上的一个开源PHP项目。

git clone https://github.com/jaysalvat/image2css.git

index.php上还提供了一些初始化选项,用来设置像素点的大小以及画面的柔化等,并且可以选择调用的图片。

$img = new PointlessImageToCssConverter("monalisa.jpg");
$img->setWidth(200);
$img->setPixelSize(4);
$img->setBlur(4);

演示代码在CodePen:



纯CSS已经是某些人所追求的境界了,下次有机会和大家分享我玩过的一些纯CSS游戏。

欢迎到 GeeKaa HTML5 节点 分享和讨论更多HTML5相关资讯。

Update

一位叫Techird的网友分享了他的基于Canvas方案的相关文章「Image To CSS 转换器

FavoriteLoadingAdd to favorites
欢迎给我打赏: