html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...

纯手工打造CSS像素画

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

图一

基本原理：

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

a href="/keys/html/index.html" target="_blank">html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

纯CSS像素画(冰极峰:http://www.cnblogs.com/binyong)

*{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}

冰

极

峰

纯CSS像素画欣赏纯CSS像素画欣赏原创：冰极峰

Blog地址:http://www.cnblogs.com/binyong

原理：利用背景色，边框，再加上定位，另外需要的是无比的耐心和细心。