Beranda>Tutorial Desain Web>Efek khusus web

Kode CSS untuk menampilkan efek khusus rumah yang indah

Penulis：Eve Cole Waktu Pembaruan：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">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=ISO-8859-1" />
<title>CSS House (Demo Perbatasan 3D 2) oleh Chris Hester</title>
<gaya tipe="teks/css">
/* Terima kasih kepada Big John untuk pengujian berulang di IE5/Win! */
/* http://positioniseverything.net */
* {
keluarga font:Verdana, Arial, Helvetica, sans-serif;
ukuran font:12px;
tinggi garis:14px;
}
tubuh {
margin:0;
bantalan:0;
warna latar:#fff;
warna:#000; // untuk menyenangkan poster di sini: http://digg.com/design/CSS_House
}
/* mendefinisikan semua div sebagai batu bata untuk menyimpan kode. Timpa nilai nanti untuk non-bata apa pun */
/* pertama-tama menangani model kotak rusak IE5. Aturan di bawah ini hanya berfungsi untuk IE */
/* Lihat http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* div html {
lebar:60 piksel; /* Total lebar kotak (batas + bantalan + lebar) untuk IE5/Win */
lebar:52 piksel; /* Versi IE lainnya mendapatkan lebar ini */
tinggi:26 piksel; /* Total tinggi kotak */
tinggitinggi:18 piksel;
}
/* Sekarang menangani semua browser CSS lainnya */
div {
posisi:mutlak;
lebar:52 piksel;
tinggi:18 piksel;
margin:0;
bantalan:0;
perbatasan-atas:4px padat #f00;
perbatasan-kiri:4px solid #e00;
perbatasan-bawah:4px padat #b00;
perbatasan-kanan:4px padat #c00;
warna-latar belakang:#d00;
indeks-z:1;
}
* html #atap {
lebar:758 piksel;
lebar:500 piksel;
tinggi:150 piksel;
tinggitinggi:50px;
}
#atap {
atas:4 piksel;
kiri:10 piksel;
lebar:500 piksel;
tinggi:50 piksel;
perbatasan-atas:0px padat #fc0;
perbatasan-kiri:129px solid #fff;
perbatasan-bawah:100px padat #575;
perbatasan-kanan:129px solid #fff;
warna latar:#fff;
}
* html #atap2 {
lebar:632 piksel;
lebar:374 piksel;
tinggi:90 piksel;
tinggitinggi:40px;
}
#atap2 {
atas:14 piksel;
kiri:73 piksel;
lebar:374 piksel;
tinggi:40 piksel;
perbatasan-atas:0px padat #fc0;
perbatasan-kiri:129px solid #fff;
perbatasan-bawah:50px padat #686;
perbatasan-kanan:129px solid #fff;
warna latar:#fff;
indeks-z:2;
}
#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {atas:180px;}
#brick1 {kiri:30px;}
#brick2 {kiri:90px;}
#brick3 {kiri:150 piksel;}
#brick4 {kiri:210 piksel;}
* html #brick5 {
lebar:240 piksel;
lebar: 232 piksel;
}
#brick5 {kiri:270 piksel; lebar:232 piksel;}
#brick9 {kiri:510px;}
#brick10 {kiri:570px;}
#brick11 {kiri:630px;}
#brick12 {kiri:690px;}
#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {atas:206px;}
/* Menangani semua setengah bata sekaligus untuk 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 {
lebar:30 piksel;
lebar: 22 piksel;
}
#brick13 { /* setengah bata */
kiri:30 piksel;
lebar:22 piksel;
}
#bata14 {
kiri:60 piksel;
lebar:172 piksel;
}
#brick15 { /* setengah bata */
kiri:240 piksel;
lebar:22 piksel;
}
#brick16 { /* setengah bata */
kiri:510 piksel;
lebar:22 piksel;
}
#bata17 {
kiri:540 piksel;
lebar:172 piksel;
}
#brick18 { /* setengah bata */
kiri:720 piksel;
lebar:22 piksel;
}
* html #brick14, * html #brick17 {
lebar:180 piksel;
lebar: 172 piksel;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {atas: 232 piksel;}
#brick19 {kiri:30px;}
#brick20 {kiri:210 piksel;}
#brick21 {kiri:510px;}
#brick22 {kiri:690px;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
atas:258 piksel;
lebar:22 piksel;
}
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
atas:310 piksel;
lebar:22 piksel;
}
#brick39, #brick41, #brick42, #brick44 {
atas:362 piksel;
lebar:22 piksel;
}
#brick40, #brick43 {atas:362px;}
#brick23, #brick31, #brick39 {kiri:30px;}
#brick24, #brick32 {kiri:60px;}
#brick25, #brick33 {kiri:210px;}
#brick26, #brick34, #brick41 {kiri:240px;}
#brick27, #brick35, #brick42 {kiri:510px;}
#brick28, #brick36 {kiri:540px;}
#brick29, #brick37 {kiri:690px;}
#brick30, #brick38, #brick44 {kiri:720px;}
#bata40 {
kiri:60 piksel;
lebar:172 piksel;
}
#bata43 {
kiri:540 piksel;
lebar:172 piksel;
}
* html #brick40, * html #brick43 {
lebar:180 piksel;
lebar: 172 piksel;
}
#brick45, #brick46, #brick47, #brick48 {atas: 284 piksel;}
#brick49, #brick50, #brick51, #brick52 {atas:336px;}
#brick45, #brick49 {kiri:30px;}
#brick46, #brick50 {kiri:210px;}
#brick47, #brick51 {kiri:510px;}
#brick48, #brick52 {kiri:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {atas:388px;}
#brick53 {kiri:30px;}
#brick54 {kiri:90px;}
#brick55 {kiri:150 piksel;}
#brick56 {kiri:210 piksel;}
#brick57 {kiri:510px;}
#brick58 {kiri:570px;}
#brick59 {kiri:630px;}
#brick60 {kiri:690px;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70, #brick71, #brick79, #brick80, #brick81, #brick82, #brick83, #brick84 , #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91, #brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, # brick101 {atas:466 piksel;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {atas:414px;}
#brick79, #brick80, #brick81, #brick82, #brick83, #brick84, #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91 {atas: 154 piksel;}
#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {atas:466px;}
#brick61, #brick79, #brick92 { /* setengah bata */
kiri:30 piksel;
lebar:22 piksel;
}
#brick62, #brick80, #brick93 {kiri:60px;}
#brick63, #brick81, #brick94 {kiri:120 piksel;}
#brick64, #brick82, #brick95 {kiri:180px;}
#brick65, #brick96 { /* setengah bata */
kiri:240 piksel;
lebar:22 piksel;
}
#brick83 {kiri:240 piksel;}
#brick84 {kiri:300 piksel;}
#brick85 {kiri:360 piksel;}
#brick86 {kiri:420px;}
#brick87 {kiri:480px;}
#brick66, #brick97 { /* setengah bata */
kiri:510 piksel;
lebar:22 piksel;
}
#brick67, #brick88, #brick98 {kiri:540px;}
#brick68, #brick89, #brick99 {kiri:600px;}
#brick69, #brick90, #brick100 {kiri:660px;}
#brick70, #brick91, #brick101 { /* setengah bata */
kiri:720 piksel;
lebar:22 piksel;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {atas:440px;}
#brick71 {kiri:30px;}
#brick72 {kiri:90px;}
#brick73 {kiri:150 piksel;}
#brick74 {kiri:210 piksel;}
#brick75 {kiri:510px;}
#brick76 {kiri:570px;}
#brick77 {kiri:630px;}
#brick78 {kiri:690px;}
/* batu bata panjang yang lebih gelap + cerobong asap */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
perbatasan-atas:4px padat #d00;
perbatasan-kiri:4px padat #c00;
perbatasan-bawah:4px padat #900;
perbatasan-kanan:4px solid #a00;
warna latar belakang:#b00;
indeks-z:2;
}
#chbrick1, #chbrick2, #chbrick4 {kiri:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {kiri:539px;}
#chbrick3 {kiri:209px;}
#chbrick7 {kiri:569px;}
#chbrick1, #chbrick5 {atas:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
atas:34 piksel;
lebar:22 piksel;
}
#chbrick4, #chbrick8 {atas:60px;}
/* kaca jendela */
#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {
bantalan:10 piksel;
perbatasan-atas:4px padat #a98;
perbatasan-kiri:10px solid #cba;
perbatasan-bawah:3px padat #f3e3d3;
perbatasan-kanan:10px solid #e9d8c7;
warna latar belakang:#666;
indeks-z:3;
}
* html #pane1L, * html #pane1R {
lebar:108 piksel;
lebar:68 piksel;
tinggi:29 piksel;
tinggitinggi:18px;
}
#pane1L {
atas:238 piksel;
kiri:96 piksel;
lebar:68 piksel;
tinggi:18 piksel;
perbatasan-atas:9px padat #a98;
}
* html #pane2L, * html #pane2R {
lebar:53 piksel;
lebar:19 piksel;
tinggi:66 piksel;
tinggitinggi:36 piksel;
}
#pane2L {
atas:291 piksel;
kiri:96 piksel;
lebar:19 piksel;
tinggi:36 piksel;
perbatasan-kanan:4px solid #e9d8c7;
perbatasan-bawah:6px padat #f3e3d3;
}
* html #pane3L, * html #pane3R {
lebar:52 piksel;
lebar:18 piksel;
tinggi:66 piksel;
tinggitinggi:36px;
}
#pane3L {
atas:291 piksel;
kiri:152 piksel;
lebar:18 piksel;
tinggi:36 piksel;
perbatasan-kiri:4px solid #cba;
perbatasan-bawah:6px padat #f3e3d3;
}
#pane1R {
atas:238 piksel;
kiri:576 piksel;
lebar:68 piksel;
tinggi:18 piksel;
perbatasan-atas:9px padat #a98;
}
#pane2R {
atas:291 piksel;
kiri:576 piksel;
lebar:19 piksel;
tinggi:36 piksel;
perbatasan-kanan:4px solid #e9d8c7;
perbatasan-bawah:6px padat #f3e3d3;
}
#pane3R {
atas:291 piksel;
kiri:632 piksel;
lebar:18 piksel;
tinggi:36 piksel;
perbatasan-kiri:4px solid #cba;
perbatasan-bawah:6px padat #f3e3d3;
}
#jendelaL, #jendelaR {
atas:232 piksel;
lebar:120 piksel;
tinggi:130 piksel;
perbatasan: tidak ada;
warna latar:#fed;
indeks-z:2;
}
#windowR {kiri:90px;}
#windowL {kiri:570px;}
* html p.pintu {
lebar:142 piksel;
lebar: 102 piksel;
tinggi:222 piksel;
tinggitinggi:187px;
}
p.pintu {
lebar:102 piksel;
tinggi:187px;
margin:0;
bantalan:10 piksel;
perbatasan-atas:9px padat #800;
perbatasan-kanan:10px padat #b00;
border-bottom:6px solid #ccc;
perbatasan-kiri:10px solid #b00;
warna latar:#fed;
indeks-z:2;
}
* html #batin {
lebar:182 piksel;
lebar: 142 piksel;
tinggi:250 piksel;
tinggitinggi:222 piksel;
}
#batin {
posisi:relatif;
lebar:142 piksel;
tinggi:222 piksel;
bantalan:0 0 10px 0;
perbatasan-atas:10 piksel padat #900;
perbatasan-kiri:20px padat #c00;
perbatasan-bawah:8px padat #ccc;
perbatasan-kanan:20px padat #c00;
warna latar belakang:#888;
}
* html #luar {
lebar:240 piksel;
lebar:182 piksel;
tinggi:286 piksel;
tinggitinggi:250px;
}
#luar {
atas:206 piksel;
kiri:270 piksel;
lebar:182 piksel;
tinggi:250 piksel;
bantalan:0 0 12px 0;
perbatasan-atas:10 piksel padat #900;
perbatasan-kiri:29px solid #d00;
border-bottom:14px solid #ccc;
perbatasan-kanan:29px padat #d00;
warna latar belakang:#888;
}
* html #panel pintu1, * html #panel pintu2, * html #panel pintu3, * html #panel pintu4 {
lebar:39 piksel;
lebar:31 piksel;
tinggi:68px;
tinggitinggi:60px;
}
#panel pintu1, #panel pintu2, #panel pintu3, #panel pintu4 {
lebar:31 piksel;
tinggi:60 piksel;
perbatasan-atas:4px padat #a98;
perbatasan-kiri:4px solid #cba;
perbatasan-bawah:4px padat #f3e3d3;
perbatasan-kanan:4px solid #e9d8c7;
warna latar:#fed;
indeks-z:3;
}
#kaca pintu1 {
atas:250 piksel;
kiri:344 piksel;
}
#kaca pintu2 {
atas:250 piksel;
kiri:397 piksel;
}
#kaca pintu3 {
atas:359 piksel;
kiri:344 piksel;
}
#kaca pintu4 {
atas:359 piksel;
kiri:397 piksel;
}
* html #pegangan {
lebar:23 piksel;
lebar:15 piksel;
tinggi:10 piksel;
tinggitinggi:2px;
}
#menangani {
ukuran font:1px; /* --- menghentikan div agar tidak ada */
tinggi garis:1px; /* -/ lebih kecil dari tinggi 16px di IE6 */
atas:331 piksel;
kiri:416 piksel;
lebar:15 piksel;
tinggi:2 piksel;
perbatasan-atas:4px padat #fda;
perbatasan-kiri:4px solid #ec9;
perbatasan-bawah:4px padat #b96;
perbatasan-kanan:4px solid #ca7;
warna latar belakang:#db8;
indeks-z:3;
}
* html #handlebase {
lebar:10 piksel;
lebar:2 piksel;
tinggi:23 piksel;
tinggitinggi:15px;
}
#handlebase {
ukuran font:1px; /* --- menghentikan div agar tidak ada */
tinggi garis:1px; /* -/ lebih kecil dari tinggi 16px di IE6 */
atas:327 piksel;
kiri:433 piksel;
lebar:2 piksel;
tinggi:15 piksel;
perbatasan-atas:4px padat #fda;
perbatasan-kiri:4px solid #ec9;
perbatasan-bawah:4px padat #b96;
perbatasan-kanan:4px solid #ca7;
warna latar belakang:#666;
indeks-z:2;
}
* html #kotak teks {
lebar:720 piksel;
lebar:680 piksel;
}
#kotakteks {
atas:492 piksel;
kiri:30 piksel;
lebar:680 piksel;
bantalan:20 piksel;
tinggi:otomatis;
perataan teks:tengah;
perbatasan: tidak ada;
warna latar belakang:#eee;
}
</gaya>
</kepala>
<tubuh>
<div id="atap"></div>
<div id="atap2"></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="luar">
<div id="batin">
<p kelas="pintu">&nbsp;</p>
</div>
</div>
<div id="panel pintu1"></div>
<div id="panel pintu2"></div>
<div id="panel pintu3"></div>
<div id="panel pintu4"></div>
<div id="pegangan"></div>
<div id="handlebase"></div>
<div id="windowL"></div>
<div id="pane1L"></div>
<div id="pane2L"></div>
<div id="pane3L"></div>
<div id="windowR"></div>
<div id="pane1R"></div>
<div id="pane2R"></div>
<div id="pane3R"></div>
<div id="textbox"><b>Rumah CSS</b> oleh <a href=" http://www.designdetector.com">Chris Hester</a> &middot; Lihat <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a> saya
<br />
<br />Dibangun 16 Oktober 2003 &middot; Terakhir diperbarui 16 Maret 2006 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Komentar</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Lacak balik</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">Tentang</a></div >
</tubuh>
</html>
Artikel Terkait