หน้าแรก>การสอนการออกแบบเว็บไซต์>เทคนิคพิเศษของเว็บ

โค้ด CSS เพื่อแสดงเอฟเฟกต์พิเศษของบ้านสวย

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-12 19:27:50
<!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 " xml:lang="en" lang="en">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House (การสาธิตชายแดน 3 มิติ 2) โดย Chris Hester</title>
<style type="text/css">
/* ขอขอบคุณ Big John สำหรับการทดสอบซ้ำใน IE5/Win! -
/* http://positioniseverything.net */
-
ตระกูลฟอนต์:Verdana, Arial, Helvetica, sans-serif;
ขนาดตัวอักษร:12px;
ความสูงของบรรทัด:14px;
-
ร่างกาย {
ระยะขอบ:0;
ช่องว่างภายใน:0;
สีพื้นหลัง:#fff;
สี:#000; // โปรดโปสเตอร์ที่นี่: http://digg.com/design/CSS_House
-
/* กำหนด div ทั้งหมดเป็นอิฐเพื่อบันทึกโค้ด เขียนทับค่าในภายหลังสำหรับสิ่งที่ไม่ใช่อิฐ */
/* ก่อนอื่นให้จัดการกับโมเดลกล่องที่เสียหายของ IE5 กฎด้านล่างใช้ได้กับ IE เท่านั้น */
/* ดู http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* html div {
ความกว้าง:60px; /* ความกว้างกล่องทั้งหมด (เส้นขอบ + ช่องว่างภายใน + ความกว้าง) สำหรับ IE5/Win */
width:52px; /* IE เวอร์ชันอื่นมีความกว้างเท่านี้ */
ความสูง:26px; /* ความสูงของกล่องทั้งหมด */
เขาight:18px;
-
/* ตอนนี้จัดการกับเบราว์เซอร์ CSS อื่น ๆ ทั้งหมด */
div {
ตำแหน่ง:แน่นอน;
ความกว้าง:52px;
ความสูง:18px;
ระยะขอบ:0;
ช่องว่างภายใน:0;
ขอบบน:4px ทึบ #f00;
ขอบซ้าย:4px ทึบ #e00;
ขอบล่าง:4px ทึบ #b00;
เส้นขอบขวา:4px ทึบ #c00;
สีพื้นหลัง:#d00;
ดัชนี z:1;
-
* html #หลังคา {
ความกว้าง:758px;
width:500px;
ความสูง:150px;
เขาight:50px;
-
#หลังคา {
ด้านบน:4px;
ซ้าย:10px;
ความกว้าง:500px;
ความสูง:50px;
เส้นขอบด้านบน: 0px ทึบ #fc0;
ขอบซ้าย:129px ทึบ #fff;
ขอบล่าง:100px ทึบ #575;
เส้นขอบขวา:129px ทึบ #fff;
สีพื้นหลัง:#fff;
-
* html #roof2 {
ความกว้าง:632px;
width:374px;
ความสูง:90px;
เขาight:40px;
-
#หลังคา2 {
ด้านบน:14px;
ซ้าย:73px;
ความกว้าง:374px;
ความสูง:40px;
เส้นขอบด้านบน: 0px ทึบ #fc0;
ขอบซ้าย:129px ทึบ #fff;
ขอบล่าง:50px ทึบ #686;
เส้นขอบขวา:129px ทึบ #fff;
สีพื้นหลัง:#fff;
ดัชนี z:2;
-
#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;}
#brick1 {ซ้าย:30px;}
#brick2 {ซ้าย:90px;}
#brick3 {ซ้าย:150px;}
#brick4 {ซ้าย:210px;}
* html #brick5 {
ความกว้าง:240px;
width:232px;
-
#บริค5 {ซ้าย:270px; ความกว้าง:232px;}
#brick9 {ซ้าย:510px;}
#brick10 {ซ้าย:570px;}
#brick11 {ซ้าย:630px;}
#brick12 {ซ้าย:690px;}
#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {บน:206px;}
/* จัดการกับอิฐทั้งหมดครึ่งก้อนพร้อมกันสำหรับ IE5/Win */
* html #brick13, * html #brick15, * html #brick16, * html #brick18, * html #brick23, * html #brick24, * html #brick25,
* html #brick26, * html #brick27, * html #brick28, * html #brick29, * html #brick30, * html #brick31, * html #brick32,
* html #brick33, * html #brick34, * html #brick35, * html #brick36, * html #brick37, * html #brick38, * html #brick39,
* html #brick41, * html #brick42, * html #brick44, * html #brick61,
* html #brick79, * html #brick92, * html #brick65, * html #brick96, * html #brick66, * html #brick97, * html #brick70,
* html #brick91, * html #brick101, * html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7,
* html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7 {
ความกว้าง:30px;
width:22px;
-
#brick13 { /* ครึ่งอิฐ */
ซ้าย:30px;
ความกว้าง:22px;
-
#บริค14 {
ซ้าย:60px;
ความกว้าง:172px;
-
#brick15 { /* ครึ่งอิฐ */
ซ้าย:240px;
ความกว้าง:22px;
-
#brick16 { /* ครึ่งอิฐ */
ซ้าย:510px;
ความกว้าง:22px;
-
#บริค17 {
ซ้าย:540px;
ความกว้าง:172px;
-
#brick18 { /* ครึ่งอิฐ */
ซ้าย:720px;
ความกว้าง:22px;
-
* html #brick14, * html #brick17 {
ความกว้าง:180px;
width:172px;
-
#brick19, #brick20, #brick21, #brick34, #brick22 {บน:232px;}
#brick19 {ซ้าย:30px;}
#brick20 {ซ้าย:210px;}
#บริค21 {ซ้าย:510px;}
#brick22 {ซ้าย:690px;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
ด้านบน:258px;
ความกว้าง:22px;
-
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
ด้านบน:310px;
ความกว้าง:22px;
-
#brick39, #brick41, #brick42, #brick44 {
ด้านบน:362px;
ความกว้าง:22px;
-
#brick40, #brick43 {บน:362px;}
#brick23, #brick31, #brick39 {ซ้าย:30px;}
#brick24, #brick32 {ซ้าย:60px;}
#brick25, #brick33 {ซ้าย:210px;}
#brick26, #brick34, #brick41 {ซ้าย:240px;}
#brick27, #brick35, #brick42 {ซ้าย:510px;}
#brick28, #brick36 {ซ้าย:540px;}
#brick29, #brick37 {ซ้าย:690px;}
#brick30, #brick38, #brick44 {ซ้าย:720px;}
#บริค40 {
ซ้าย:60px;
ความกว้าง:172px;
-
#บริค43 {
ซ้าย:540px;
ความกว้าง:172px;
-
* html #brick40, * html #brick43 {
ความกว้าง:180px;
width:172px;
-
#brick45, #brick46, #brick47, #brick48 {บน:284px;}
#brick49, #brick50, #brick51, #brick52 {บน:336px;}
#brick45, #brick49 {ซ้าย:30px;}
#brick46, #brick50 {ซ้าย:210px;}
#brick47, #brick51 {ซ้าย:510px;}
#brick48, #brick52 {ซ้าย:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {top:388px;}
#บริค53 {ซ้าย:30px;}
#บริค54 {ซ้าย:90px;}
#brick55 {ซ้าย:150px;}
#บริค56 {ซ้าย:210px;}
#บริค57 {ซ้าย:510px;}
#บริค58 {ซ้าย:570px;}
#บริค59 {ซ้าย:630px;}
#brick60 {ซ้าย:690px;}
#อิฐ61, #อิฐ62, #อิฐ63, #อิฐ64, #อิฐ65, #อิฐ66, #อิฐ67, #อิฐ68, #อิฐ69, #อิฐ70, #อิฐ71, #อิฐ79, #อิฐ80, #อิฐ81, #อิฐ82, #อิฐ83, #brick84 , #อิฐ85, #อิฐ86, #อิฐ87, #อิฐ88, #อิฐ89, #อิฐ90, #อิฐ91, #อิฐ92, #อิฐ93, #อิฐ94, #อิฐ95, #อิฐ96, #อิฐ97, #อิฐ98, #อิฐ99, #อิฐ100, # อิฐ101 {บน:466px;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {top:414px;}
#brick79, #brick80, #brick81, #brick82, #brick83, #brick84, #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91 {top:154px;}
#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {top:466px;}
#brick61, #brick79, #brick92 { /* ครึ่งอิฐ */
ซ้าย:30px;
ความกว้าง:22px;
-
#brick62, #brick80, #brick93 {ซ้าย:60px;}
#brick63, #brick81, #brick94 {ซ้าย:120px;}
#brick64, #brick82, #brick95 {ซ้าย:180px;}
#brick65, #brick96 { /* ครึ่งอิฐ */
ซ้าย:240px;
ความกว้าง:22px;
-
#brick83 {ซ้าย:240px;}
#brick84 {ซ้าย:300px;}
#brick85 {ซ้าย:360px;}
#brick86 {ซ้าย:420px;}
#brick87 {ซ้าย:480px;}
#brick66, #brick97 { /* ครึ่งอิฐ */
ซ้าย:510px;
ความกว้าง:22px;
-
#brick67, #brick88, #brick98 {ซ้าย:540px;}
#brick68, #brick89, #brick99 {ซ้าย:600px;}
#brick69, #brick90, #brick100 {ซ้าย:660px;}
#brick70, #brick91, #brick101 { /* ครึ่งอิฐ */
ซ้าย:720px;
ความกว้าง:22px;
-
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}
#brick71 {ซ้าย:30px;}
#brick72 {ซ้าย:90px;}
#brick73 {ซ้าย:150px;}
#brick74 {ซ้าย:210px;}
#brick75 {ซ้าย:510px;}
#brick76 {ซ้าย:570px;}
#brick77 {ซ้าย:630px;}
#brick78 {ซ้าย:690px;}
/* อิฐยาวเข้ม + ปล่องไฟ */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
ขอบบน:4px ทึบ #d00;
ขอบซ้าย:4px ทึบ #c00;
ขอบล่าง:4px ทึบ #900;
เส้นขอบขวา:4px ทึบ #a00;
สีพื้นหลัง:#b00;
ดัชนี z:2;
-
#chbrick1, #chbrick2, #chbrick4 {ซ้าย:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {ซ้าย:539px;}
#chbrick3 {ซ้าย:209px;}
#chbrick7 {ซ้าย:569px;}
#chbrick1, #chbrick5 {บน:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
ด้านบน:34px;
ความกว้าง:22px;
-
#chbrick4, #chbrick8 {ด้านบน:60px;}
/* บานหน้าต่าง */
#บานหน้าต่าง1L, #บานหน้าต่าง2L, #บานหน้าต่าง3L, #บานหน้าต่าง1R, #บานหน้าต่าง2R, #บานหน้าต่าง3R {
ช่องว่างภายใน:10px;
ขอบบน:4px ทึบ #a98;
ขอบซ้าย:10px ทึบ #cba;
ขอบล่าง:3px ทึบ #f3e3d3;
ขอบขวา:10px ทึบ #e9d8c7;
สีพื้นหลัง:#666;
ดัชนี z:3;
-
* html #บานหน้าต่าง1L, * html #บานหน้าต่าง1R {
ความกว้าง:108px;
width:68px;
ความสูง:29px;
เขาight:18px;
-
#บานหน้าต่าง1L {
ด้านบน:238px;
ซ้าย:96px;
ความกว้าง:68px;
ความสูง:18px;
ขอบบน:9px ทึบ #a98;
-
* html #บานหน้าต่าง2L, * html #บานหน้าต่าง2R {
ความกว้าง:53px;
width:19px;
ความสูง:66px;
เขาight:36px;
-
#pane2L {
ด้านบน:291px;
ซ้าย:96px;
ความกว้าง:19px;
ความสูง:36px;
เส้นขอบขวา:4px ทึบ #e9d8c7;
ขอบล่าง:6px solid #f3e3d3;
-
* html #pane3L, * html #pane3R {
ความกว้าง:52px;
width:18px;
ความสูง:66px;
เขาight:36px;
-
#pane3L {
ด้านบน:291px;
ซ้าย:152px;
ความกว้าง:18px;
ความสูง:36px;
ขอบซ้าย:4px ทึบ #cba;
ขอบล่าง:6px solid #f3e3d3;
-
#บานหน้าต่าง1R {
ด้านบน:238px;
ซ้าย:576px;
ความกว้าง:68px;
ความสูง:18px;
ขอบบน:9px ทึบ #a98;
-
#บานหน้าต่าง2R {
ด้านบน:291px;
ซ้าย:576px;
ความกว้าง:19px;
ความสูง:36px;
เส้นขอบขวา:4px ทึบ #e9d8c7;
ขอบล่าง:6px solid #f3e3d3;
-
#บานหน้าต่าง3R {
ด้านบน:291px;
ซ้าย:632px;
ความกว้าง:18px;
ความสูง:36px;
ขอบซ้าย:4px ทึบ #cba;
ขอบล่าง:6px solid #f3e3d3;
-
#windowL, #windowR {
ด้านบน:232px;
ความกว้าง:120px;
ความสูง:130px;
เส้นขอบ:ไม่มี;
สีพื้นหลัง:#fed;
ดัชนี z:2;
-
#windowR {ซ้าย:90px;}
#windowL {ซ้าย:570px;}
* html p.door {
ความกว้าง:142px;
width:102px;
ความสูง:222px;
เขาight:187px;
-
p.ประตู {
ความกว้าง:102px;
ความสูง:187px;
ระยะขอบ:0;
ช่องว่างภายใน:10px;
ขอบบน:9px ทึบ #800;
ขอบขวา:10px ทึบ #b00;
ขอบล่าง:6px ทึบ #ccc;
ขอบซ้าย:10px ทึบ #b00;
สีพื้นหลัง:#fed;
ดัชนี z:2;
-
* html #inner {
ความกว้าง:182px;
width:142px;
ความสูง:250px;
เขาight:222px;
-
#ภายใน {
ตำแหน่ง:ญาติ;
ความกว้าง:142px;
ความสูง:222px;
การขยาย:0 0 10px 0;
ขอบบน:10px ทึบ #900;
ขอบซ้าย:20px ทึบ #c00;
ขอบล่าง:8px ทึบ #ccc;
เส้นขอบขวา:20px ทึบ #c00;
สีพื้นหลัง:#888;
-
* html #outer {
ความกว้าง:240px;
width:182px;
ความสูง:286px;
เขาight:250px;
-
#นอก {
ด้านบน:206px;
ซ้าย:270px;
ความกว้าง:182px;
ความสูง:250px;
การขยาย:0 0 12px 0;
ขอบบน:10px ทึบ #900;
ขอบซ้าย:29px ทึบ #d00;
ขอบล่าง:14px ทึบ #ccc;
ขอบขวา:29px ทึบ #d00;
สีพื้นหลัง:#888;
-
* html #บานประตู1, * html #บานประตู2, * html #บานประตู3, * html #บานประตู4 {
ความกว้าง:39px;
width:31px;
ความสูง:68px;
เขาight:60px;
-
#บานประตู1, #บานประตู2, #บานประตู3, #บานประตู4 {
ความกว้าง:31px;
ความสูง:60px;
ขอบบน:4px ทึบ #a98;
ขอบซ้าย:4px ทึบ #cba;
ขอบล่าง:4px ทึบ #f3e3d3;
เส้นขอบขวา:4px ทึบ #e9d8c7;
สีพื้นหลัง:#fed;
ดัชนี z:3;
-
#บานประตู1 {
ด้านบน:250px;
ซ้าย:344px;
-
#บานประตู2 {
ด้านบน:250px;
ซ้าย:397px;
-
#บานประตู3 {
ด้านบน:359px;
ซ้าย:344px;
-
#บานประตู4 {
ด้านบน:359px;
ซ้าย:397px;
-
* html #handle {
ความกว้าง:23px;
width:15px;
ความสูง:10px;
เขาight:2px;
-
#รับมือ {
ขนาดตัวอักษร:1px; /* --- หยุด div จากการไม่มี */
ความสูงของบรรทัด:1px; /* -/ ความสูงน้อยกว่า 16px ใน IE6 */
ด้านบน:331px;
ซ้าย:416px;
ความกว้าง:15px;
ความสูง:2px;
ขอบด้านบน:4px ทึบ #fda;
ขอบซ้าย:4px ทึบ #ec9;
ขอบล่าง:4px ทึบ #b96;
เส้นขอบขวา:4px ทึบ #ca7;
สีพื้นหลัง:#db8;
ดัชนี z:3;
-
* html #handlebase {
ความกว้าง:10px;
width:2px;
ความสูง:23px;
เขาight:15px;
-
#ฐานแฮนด์ {
ขนาดตัวอักษร:1px; /* --- หยุด div จากการไม่มี */
ความสูงของบรรทัด:1px; /* -/ ความสูงน้อยกว่า 16px ใน IE6 */
ด้านบน:327px;
ซ้าย:433px;
ความกว้าง:2px;
ความสูง:15px;
ขอบด้านบน:4px ทึบ #fda;
ขอบซ้าย:4px ทึบ #ec9;
ขอบล่าง:4px ทึบ #b96;
เส้นขอบขวา:4px ทึบ #ca7;
สีพื้นหลัง:#666;
ดัชนี z:2;
-
* html #กล่องข้อความ {
ความกว้าง:720px;
width:680px;
-
#กล่องข้อความ {
ด้านบน:492px;
ซ้าย:30px;
ความกว้าง:680px;
ช่องว่างภายใน:20px;
ความสูง:อัตโนมัติ;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
เส้นขอบ:ไม่มี;
สีพื้นหลัง:#eee;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="หลังคา"></div>
<div id="roof2"></div>
<div id="chbrick1"></div>
<div id="chbrick2"></div>
<div id="chbrick3"></div>
<div id="chbrick4"></div>
<div id="chbrick5"></div>
<div id="chbrick6"></div>
<div id="chbrick7"></div>
<div id="chbrick8"></div>
<div id="brick1"></div>
<div id="brick2"></div>
<div id="brick3"></div>
<div id="brick4"></div>
<div id="brick5"></div>
<div id="brick9"></div>
<div id="brick10"></div>
<div id="brick11"></div>
<div id="brick12"></div>
<div id="brick13"></div>
<div id="brick14"></div>
<div id="brick15"></div>
<div id="brick16"></div>
<div id="brick17"></div>
<div id="brick18"></div>
<div id="brick19"></div>
<div id="brick20"></div>
<div id="brick21"></div>
<div id="brick22"></div>
<div id="brick23"></div>
<div id="brick24"></div>
<div id="brick25"></div>
<div id="brick26"></div>
<div id="brick27"></div>
<div id="brick28"></div>
<div id="brick29"></div>
<div id="brick30"></div>
<div id="brick31"></div>
<div id="brick32"></div>
<div id="brick33"></div>
<div id="brick34"></div>
<div id="brick35"></div>
<div id="brick36"></div>
<div id="brick37"></div>
<div id="brick38"></div>
<div id="brick39"></div>
<div id="brick40"></div>
<div id="brick41"></div>
<div id="brick42"></div>
<div id="brick43"></div>
<div id="brick44"></div>
<div id="brick45"></div>
<div id="brick46"></div>
<div id="brick47"></div>
<div id="brick48"></div>
<div id="brick49"></div>
<div id="brick50"></div>
<div id="brick51"></div>
<div id="brick52"></div>
<div id="brick53"></div>
<div id="brick54"></div>
<div id="brick55"></div>
<div id="brick56"></div>
<div id="brick57"></div>
<div id="brick58"></div>
<div id="brick59"></div>
<div id="brick60"></div>
<div id="brick61"></div>
<div id="brick62"></div>
<div id="brick63"></div>
<div id="brick64"></div>
<div id="brick65"></div>
<div id="brick66"></div>
<div id="brick67"></div>
<div id="brick68"></div>
<div id="brick69"></div>
<div id="brick70"></div>
<div id="brick71"></div>
<div id="brick72"></div>
<div id="brick73"></div>
<div id="brick74"></div>
<div id="brick75"></div>
<div id="brick76"></div>
<div id="brick77"></div>
<div id="brick78"></div>
<div id="brick79"></div>
<div id="brick80"></div>
<div id="brick81"></div>
<div id="brick82"></div>
<div id="brick83"></div>
<div id="brick84"></div>
<div id="brick85"></div>
<div id="brick86"></div>
<div id="brick87"></div>
<div id="brick88"></div>
<div id="brick89"></div>
<div id="brick90"></div>
<div id="brick91"></div>
<div id="brick92"></div>
<div id="brick93"></div>
<div id="brick94"></div>
<div id="brick95"></div>
<div id="brick96"></div>
<div id="brick97"></div>
<div id="brick98"></div>
<div id="brick99"></div>
<div id="brick100"></div>
<div id="brick101"></div>
<div id="ด้านนอก">
<div id="ภายใน">
<p class="ประตู">&nbsp;</p>
</div>
</div>
<div id="บานประตู1"></div>
<div id="บานประตู2"></div>
<div id="บานประตู3"></div>
<div id="บานประตู4"></div>
<div id="จัดการ"></div>
<div id="แฮนเดิลเบส"></div>
<div id="windowL"></div>
<div id="บานหน้าต่าง1L"></div>
<div id="pane2L"></div>
<div id="pane3L"></div>
<div id="windowR"></div>
<div id="บานหน้าต่าง1R"></div>
<div id="pane2R"></div>
<div id="pane3R"></div>
<div id="textbox"><b>CSS House</b> โดย <a href=" http://www.designdetector.com">Chris Hester</a> &middot; ดู <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a> ของฉัน
<br />
<br />สร้างเมื่อ 16 ตุลาคม 2546 &middot; อัปเดตล่าสุดเมื่อ 16 มีนาคม 2549 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">ความคิดเห็น</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">แทร็กแบ็ก</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">เกี่ยวกับ</a></div >
</ร่างกาย>
</html>
บทความที่เกี่ยวข้อง