纯手工打造CSS像素画 - 网页制作

　纯手工打造CSS像素画

作者：by0001　时间： 2009-03-09　文档类型：原创　来自：蓝色理想

在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://bbs.blueidea.com/thread-2915003-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6489.asp　

出处：蓝色理想
责任编辑：bluehearts

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

作者文章

超圆滑圆角框的半完美解决方案
Border属性的终极研究
制作一幅扑克牌系列教程
用div+css模拟表格对角线

站点最新

站点最新列表

在网页设计中使用图标来支持内容

《Connection》第8期免费下载

NewWebPick第20期免费中文版

《良木》4期免费下载

手工打造分离式滑动门导航菜单

英特尔酷睿i7新锐100

条件CSS的高级用法

探讨链接打开方式

制作Google Chrome浏览器LOGO

浅析"Rich"设计模式

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果