名站导航为爱好css的朋友们提供相关的知识。
英文css教程教程:Introduction CSS教程
- 此篇文章具体介绍如下
在css教程play网站看到有一组CSS教程像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!
在css教程play网站看到有一组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"><b></b><em></em><i></i><strong></strong><span></span> <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教程像素画欣赏<b>纯CSS教程像素画欣赏</b><strong>原创:冰极峰</strong></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"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="n1"></b><b class="n2"></b><b class="n3"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b><b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="b1"></b><b class="b2"></b><b class="b3"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="c1"></b><b class="c2"></b><b class="c3"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="d1"></b><b class="d2"></b><b class="d3"></b><b class="d4"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="e1"></b><b class="e2"></b><b class="e3"></b><b class="e4"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b> <b class="f1"></b><b class="f2"></b><b class="f3"></b> <b class="f-r1"></b><b class="f-r2"></b><b class="f-r3"></b><b class="f-r4"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="e_l1 g1"></b><b class="e_l2 g2"></b><b class="e_l3 g3"></b><b class="e_m1 j1"></b><b class="e_r1 h1"></b><b class="e_r2 h2"></b><b class="e_r3 h3"></b> <b class="i1"></b><b class="i2"></b><b class="i3"></b><b class="i4"></b><b class="i5"></b> </div> </div> <div class="box"> <div class="panda1"> <b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b> <b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b> <b class="b10"></b><b class="b11"></b><b class="b12"></b> <b class="k0"></b><b class="k1"></b><b class="k2"></b><b class="k3"></b><b class="k4"></b><b class="k5"></b> <b class="k6"></b><b class="k7"></b> </div> </div> </div> </div> </div> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,像素,网页,制作,实例,quot,gt,soCSS教程失效,原来是和网页第一段代码有关