原创：纯手工打造CSS像素画--笨笨熊系列图标

纯手工打造CSS像素画--笨笨熊系列图标

作者：冰极峰转载请注明出处

在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像素画欣赏原创：冰极峰</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>

转载于:https://www.cnblogs.com/binyong/archive/2009/03/09/1406624.html

原创：纯手工打造CSS像素画--笨笨熊系列图标相关推荐

html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...
纯手工打造CSS像素画在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图图一基本原理: 没有什么技术含量,主 ...
广工学生“纯手工”打造赛车将出征F1赛道
转播到腾讯微博一辆红银色流线型方程式赛车昨日亮相广东工业大学图书馆广场.这辆赛车为该校二十余名学生"纯手工"打造,本月将登陆上海国际赛车场.南都记者邹卫摄南都讯记者刘黎霞实 ...
IOS学习之道:使用UIButton纯手工打造的黑白快小游戏.
由于代码量比较多,有兴趣的同学可以去我的资源页进行下载. http://download.csdn.net/detail/tx874828503/8637445 // // RootViewContr ...
后渗透篇：纯手工打造服务器自解压shift后门【详细演示】
当你的才华还撑不起你的野心时那你就应该静下心来学习目录纯手工打造服务器自解压shift后门 0x01 介绍 0x02 实例演示纯手工打造服务器自解压shift后门 0x01 介绍很多时候我 ...
消防管件做的机器人图片_报废消防器材变身“机器人” 由消防官兵纯手工打造(图)...
原标题:报废消防器材变身"机器人" 由消防官兵纯手工打造(图) 由报废的消防零配件组成的机器人模型. 厦门网讯 (厦门日报记者林路然通讯员阙凤芳曾德猛)远看好似变形金刚,凑近还会说 ...
纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！...
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
这个B站up主太硬核了！纯手工打造AI小电视：硬件自己焊接，驱动代码全手写...
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达晓查发自凹非寺本文转自自:量子位(QbitAI) 一个低调的 ...
纯手工打造AI小电视，这个B站up主太硬核了！硬件自己焊接，驱动代码全手写...
点击上方"码农突围",马上关注这里是码农充电第一站,回复"666",获取一份专属大礼包真爱,请设置"星标"或点个"在看&quo ...
19岁「天才少年」自制CPU！1200个晶体管，纯手工打造
‍ 大家好,我是张巧龙,在推特上看到一个19岁的博主,耗时整整3年,纯手工自制1200个晶体管的CPU. 这位叫做 Sam Zeloof 的美国大学生,最终打造出1200个晶体管的CPU! 在10微米 ...

原创：纯手工打造CSS像素画--笨笨熊系列图标

原创：纯手工打造CSS像素画--笨笨熊系列图标相关推荐

最新文章

热门文章