国产精品露脸在线播放,精品无码av一区二区三区不卡,色五月婷婷成人网

　純手工打造CSS像素畫

作者：by0001　時(shí)間： 2009-03-09　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

在cssplay網(wǎng)站看到有一組CSS像素畫，于是也想摩仿一下，于是在網(wǎng)絡(luò)上找到一組頭像圖標(biāo)，看其結(jié)構(gòu)比較簡(jiǎn)單，就拿它開刀吧！先看看預(yù)覽圖

圖一

基本原理：

沒有什么技術(shù)含量，主要是利用背景色和邊框色來(lái)渲染每一個(gè)像素點(diǎn)，加上絕對(duì)定位，就可以變換出不同的風(fēng)格。在制作一幅圖片之前最好是將圖片黑白風(fēng)格化，然后用PS放大圖片，將各個(gè)點(diǎn)的位置計(jì)算精確。剩下的事情就是無(wú)窮的耐心和細(xì)心了。

演示：

運(yùn)行代碼框
<!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;} /*顏色方案，改變下列顏色可以改變整個(gè)熊貓的首色----------------------*/ /*熊貓臉的顏色*/ .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;} /*臉兩側(cè)*/ .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 id="b1">冰</a> <a id="b2">極</a> <a id="b3">峰</a> </div> <h1>純CSS像素畫欣賞純CSS像素畫欣賞原創(chuàng)：冰極峰</h1> <h2 class="blog">Blog地址:<a >http://www.cnblogs.com/binyong</a></h2> <div class="text">原理：利用背景色，邊框，再加上定位，另外需要的是無(wú)比的耐心和細(xì)心。</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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2915003-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/6489.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

CSS實(shí)現(xiàn)垂直居中的5種方法

作者文章

超圓滑圓角框的半完美解決方案

Border屬性的終極研究

制作一幅撲克牌系列教程

用div+css模擬表格對(duì)角線


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx