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

【 tulaoshi.com - Web开发 】

在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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title纯CSS像素画(冰极峰:http://www.cnblogs.com/binyong)/titlestyle 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/headbodydiv id="wrapper"div id="corner"b/bem/emi/istrong/strongspan/spana href="http://www.cnblogs.com/binyong" id="b1"冰/aa href="http://www.cnblogs.com/binyong" id="b2"极/aa href="http://www.cnblogs.com/binyong" id="b3"峰/a/divh1纯CSS像素画欣赏b纯CSS像素画欣赏/bstrong原创：冰极峰/strong/h1h2 class="blog"Blog地址:a href="http://www.cnblogs.com/binyong"http://www.cnblogs.com/binyong/a/h2div class="text"原理：利用背景色，边框，再加上定位，另外需要的是无比的耐心和细心。/divdiv class="context"div class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="n1"/bb class="n2"/bb class="n3"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="a1"/bb class="a2"/bb class="a3"/bb class="a4"/bb class="a5"/bb class="a6"/bb class="a7"/bb class="a8"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="b1"/bb class="b2"/bb class="b3"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="c1"/bb class="c2"/bb class="c3"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="d1"/bb class="d2"/bb class="d3"/bb class="d4"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="e1"/bb class="e2"/bb class="e3"/bb class="e4"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1"/bb class="e_l2"/bb class="e_l3"/bb class="e_m1"/bb class="e_r1"/bb class="e_r2"/bb class="e_r3"/bb class="f1"/bb class="f2"/bb class="f3"/bb class="f-r1"/bb class="f-r2"/bb class="f-r3"/bb class="f-r4"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="e_l1 g1"/bb class="e_l2 g2"/bb class="e_l3 g3"/bb class="e_m1 j1"/bb class="e_r1 h1"/bb class="e_r2 h2"/bb class="e_r3 h3"/bb class="i1"/bb class="i2"/bb class="i3"/bb class="i4"/bb class="i5"/b/div/divdiv class="box"div class="panda1"b class="t1"/bb class="t2"/bb class="tm"/bb class="tm1"/bb class="t4"/bb class="t5"/bb class="m6"/bb class="m7"/bb class="m8"/bb class="m9"/bb class="b10"/bb class="b11"/bb class="b12"/bb class="k0"/bb class="k1"/bb class="k2"/bb class="k3"/bb class="k4"/bb class="k5"/bb class="k6"/bb class="k7"/b/div/div/div/div/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]