码迷,mamicode.com
首页 > Web开发 > 详细

用CSS box-shadow画画

时间:2015-12-24 00:16:41      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:

原理:找一幅画,每隔5 pixel取一个点的RGB,在CSS中用box-shadow描绘出这个点

Python

from PIL import Image

if __name__ == __main__:

    with open(C:\\css.txt, w) as f:
        im = Image.open(C:\\sky.jpg)
        for x in range(0, im.size[0], 5):
            for y in range(0, im.size[1], 5):
                line = {0}px {1}px 5px 4px rgb{2},\n.format(x, y, im.getpixel((x, y)))
                f.write(line)

HTML

<html>
    <head>
    </head>
    <body>
        <div id="painter"></div>
        <style>
            html{
                margin:0; padding:0;
            }
            #painter{
                width:0px; height:0px;
                position:relative; left:100px; top:100px;
                box-shadow: 0px 0px 5px 4px rgb(100, 105, 108),
0px 5px 5px 4px rgb(130, 163, 170),
0px 10px 5px 4px rgb(177, 180, 137),
0px 15px 5px 4px rgb(102, 119, 145),
.................
895px 555px 5px 4px rgb(32, 23, 28),
895px 560px 5px 4px rgb(32, 16, 17);
            }
        </style>
    </body>
</html>

效果

下图并不是图片 技术分享

 

用CSS box-shadow画画

标签:

原文地址:http://www.cnblogs.com/technology/p/5071720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!