CSS实例：用CSS制作网页像素画

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！先看看预览图

图一

基本原理：

没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。

演示：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS像素画(冰极峰:http://www.cnblogs.com/binyong)</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;} body{background:#555;} #wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;} #corner{position:relative;} #corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;} #corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;} #corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;} #corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;} #corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;} #corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;} #corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;} #corner a#b1{left:34px;top:3px;} #corner a#b2{left:18px;top:18px;} #corner a#b3{left:3px;top:33px;} h1 {width:150px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;} h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;} h1 strong{position:absolute;top:25px;left:30px;height:22px;} h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;} .blog{background:#2f231a;} .blog a:link,.blog a:visited{color:#fff;} .context{height:380px;} /*-----------------------------------像素画样式---------------------------------------------*/ .context{width:240px;margin:0px auto;} .text{margin:0 auto;width:400px;height:100px;line-height:100px;} .box{width:50px;height:50px;float:left;border-left:4px red solid;border-top:4px blue solid;border-bottom:4px orange solid;border-right:4px green solid;margin-right:20px;margin-bottom:20px;} .context span,.context b,.context em,.context strong{display:block;font=weight:normal;font-style:normal; position:absolute;overflow:hidden;} .panda1{width:41px;height:37px; position:relative;margin:5px auto;} /*颜色方案，改变下列颜色可以改变整个熊猫的首色----------------------*/ /*熊猫脸的颜色*/ .t1,.t2,.t3,.t4,.tm1,.t5,.m6,.m9,.b12{background:#000;} .tm,.m7,.m8,.b10,.b11{ border-color:#000;} /*熊猫眼睛颜色*/ .e_l1,.e_r1,.e_l2,.e_r2,.e_l3,.e_r3{background:#000;} .e_m1{border-color:#000;} /*背景颜色*/ .box,.panda1,.tm,.m7,.m8,.b10,.b11,.e_m1{background:#fff;} /*---------------------------------------------------------*/ /*脸轮廓----------------*/ /*上额*/ .t1{width:10px;height:8px;top:0px;left:2px;z-index:1;} .t2{width:8px;height:8px;top:2px;left:0px;z-index:2;} .tm{width:13px;height:2px;top:2px;left:12px;border-left:2px solid; border-right:2px solid;} .tm1{width:17px;height:2px;top:4px;left:12px;} .t4{width:10px;height:8px;top:0px;left:29px;z-index:3;} .t5{width:8px;height:8px;top:2px;left:33px;z-index:4;} /*脸两侧*/ .m6{width:2px;height:14px;top:14px;left:0px;} .m7{width:2px;height:14px;border-top:4px solid;border-bottom:4px solid;top:10px;left:2px;} .m8{width:2px;height:14px;border-top:4px solid;border-bottom:4px solid;top:10px;right:2px;} .m9{width:2px;height:14px;top:14px;right:0px;} /*下巴*/ .b10{width:28px;height:2px;border-left:2px solid;border-right:2px solid;top:32px;left:4px;} .b11{width:20px;height:2px;border-left:4px solid;border-right:4px solid;top:34px;left:6px;} .b12{width:20px;height:3px;top:36px;left:10px;} /*眼睛*/ .e_l1,.e_r1{width:8px;height:8px;top:14px;} .e_l2,.e_r2{width:6px;height:8px;top:16px;} .e_l3,.e_r3{width:2px;height:4px;top:18px;} .e_l1{left:9px;} .e_l2{left:7px;} .e_l3{left:5px;} .e_m1{width:2px;height:4px;top:16px;left:17px;border-left:1px solid;border-right:2px solid;} .e_r1{left:22px;} .e_r2{left:27px;} .e_r3{left:33px;} /*鼻涕*/ .n1{width:1px;height:8px;top:24px;left:16px;background:#FCDAEC;} .n2{width:1px;height:8px;top:24px;left:17px;background:#BC163C;} .n3{width:2px;height:7px;top:24px;left:20px;background:#BC163C;} /*第二幅画*/ .a1,.a6{width:4px;height:10px;top:24px;left:7px;background:#3399CC;} .a2,.a5{width:2px;height:12px;top:24px;left:10px;background:#3399CC;} .a3,.a4{width:4px;height:14px;top:22px;left:12px;background:#3399CC;} .a4{width:4px;left:23px;} .a5{width:3px;height:12px;left:27px;} .a6{height:10px;width:4px;left:29px;} .a7{width:8px;height:1px;top:30px;left:15px;background:#000;} .a8{width:1px;height:2px;top:28px;left:19px;background:#000;border-bottom:1px #fff solid;} /*第三幅画*/ .b1{width:10px;height:2px;top:30px;left:15px;background:#000;} .b2{width:10px;height:2px;top:28px;left:13px;background:#fff;border-left:2px #000 solid;border-right:2px #000 solid;} .b3{width:14px;height:2px;top:26px;left:4px;background:#fff;border-left:9px #DFC2D3 solid;border-right:9px #DFC2D3 solid;} /*第四幅画*/ .c1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px #DFC2D3 solid;border-right:7px #DFC2D3 solid;} .c2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px #DFC2D3 solid;border-right:5px #DFC2D3 solid;} .c3{width:2px;height:10px;top:28px;left:19px;background:#000;} /*第五幅画*/ .d1{width:22px;height:2px;top:26px;left:9px;background:#000;} .d2{width:10px;height:6px;top:28px;left:13px;background:#D32147;border-left:2px #000 solid;border-right:2px #000 solid;} .d3{width:6px;height:2px;top:34px;left:15px;background:#D32147;border-left:2px #000 solid;border-right:2px #000 solid;} .d4{width:2px;height:4px;top:28px;left:19px;background:#000;} /*第六幅画*/ .e1{width:18px;height:4px;top:26px;left:9px;background:#fff;border-top:2px #000 solid;border-left:2px #000 solid;border-right:2px #000 solid;} .e2{width:14px;height:1px;top:32px;left:11px;background:#fff;border-left:2px #000 solid;border-right:2px #000 solid;} .e3{width:14px;height:2px;top:33px;left:13px;background:#000;} .e4{width:3px;height:4px;top:28px;left:15px;background:#000;} /*第七幅画*/ .f1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px #DFC2D3 solid;border-right:7px #DFC2D3 solid;} .f2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px #DFC2D3 solid;border-right:5px #DFC2D3 solid;} .f3{width:12px;height:2px;top:32px;left:14px;background:#000;} /*汗滴*/ .f-r1,.f-r2,.f-r3,.f-r4{background:#58B3D7;} .f-r1{width:2px;height:25px;top:0px;right:6px;z-index:100;} .f-r2{width:6px;height:18px;top:6px;right:4px;z-index:101;} .f-r3{width:10px;height:12px;top:10px;right:2px;z-index:102;} .f-r4{width:12px;height:6px;top:14px;right:1px;z-index:103;} /*第八幅画*/ .g1{top:22px;} .g2{top:20px;} .g3{top:22px;} .j1{top:24px;} .h1{top:22px;} .h2{top:20px;} .h3{top:22px;} .i1{width:2px;height:4px;top:18px;left:16px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;} .i2{width:2px;height:2px;top:8px;right:11px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;} .i3{width:2px;height:2px;top:10px;right:9px;border-left:4px #000 solid;border-right:4px #000 solid;background:#fff;} .i4{width:2px;height:2px;top:14px;right:9px;border-left:4px #000 solid;border-right:4px #000 solid;background:#fff;} .i5{width:2px;height:2px;top:16px;right:11px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;} /*第九幅画*/ .k0{width:2px;height:4px;top:16px;left:17px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;z-index:15;} .k1{width:6px;height:8px;top:14px;left:8px;border-left:9px #000 solid;border-right:9px #000 solid;background:#fff;z-index:12;} .k2{width:12px;height:8px;top:16px;left:0px;border-left:14px #000 solid;border-right:14px #000 solid;background:#fff;z-index:11;} .k3{width:16px;height:2px;top:24px;left:4px;border-left:8px #000 solid;border-right:8px #000 solid;background:#fff;z-index:16;} .k4{width:2px;height:2px;top:18px;left:6px;background:#fff;z-index:17} .k5{width:2px;height:2px;top:18px;right:6px;background:#fff;z-index:18} .k6{width:10px;height:2px;top:30px;left:15px;background:#000;z-index:18} .k7{width:10px;height:2px;top:32px;left:13px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;z-index:18} </style> </head> <body> <div id="wrapper"> <div id="corner"> <a href="http://www.cnblogs.com/binyong" id="b1">冰</a> <a href="http://www.cnblogs.com/binyong" id="b2">极</a> <a href="http://www.cnblogs.com/binyong" id="b3">峰</a> </div> <h1>纯CSS像素画欣赏纯CSS像素画欣赏原创：冰极峰</h1> <h2 class="blog">Blog地址:<a href="http://www.cnblogs.com/binyong">http://www.cnblogs.com/binyong</a></h2> <div class="text">原理：利用背景色，边框，再加上定位，另外需要的是无比的耐心和细心。</div> <div class="context"> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> <div class="box"> <div class="panda1"> </div> </div> </div> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 简化的CSS Reset:15套CSS重设实例下一篇: 最新版本的CSS选择器浏览器支持情况

关于CSS实例：用CSS制作网页像素画的所有评论

随机推荐