홈페이지>웹 디자인 튜토리얼>웹 특수효과

아름다운 집의 특수 효과를 보여주는 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>Chris Hester의 CSS House(3D 테두리 데모 2)</title>
<스타일 유형="텍스트/css">
/* IE5/Win에서 반복적으로 테스트해 준 Big John에게 감사드립니다! */
/* http://positioniseeverything.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의 총 상자 너비(테두리 + 패딩 + 너비) */
폭폭:52px; /* IE의 다른 버전에서는 이 너비를 얻습니다 */
높이:26px; /* 총 상자 높이 */
높이높이:18px;
}
/* 이제 다른 모든 CSS 브라우저를 처리합니다 */
div {
위치:절대;
너비:52px;
높이:18px;
여백:0;
패딩:0;
테두리 상단:4px 솔리드 #f00;
테두리 왼쪽:4px 솔리드 #e00;
테두리 하단:4px 솔리드 #b00;
테두리 오른쪽:4px 솔리드 #c00;
배경색:#d00;
Z-색인:1;
}
* HTML #지붕 {
너비:758px;
폭폭:500px;
높이:150px;
높이높이:50px;
}
#지붕 {
상단:4px;
왼쪽:10px;
너비:500px;
높이:50px;
테두리 상단:0px 솔리드 #fc0;
테두리 왼쪽:129px 단색 #fff;
테두리 하단:100px 솔리드 #575;
테두리 오른쪽:129px 단색 #fff;
배경색:#fff;
}
* HTML #roof2 {
너비:632px;
폭폭:374px;
높이:90px;
높이높이: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 {상위:180px;}
#벽돌1 {왼쪽:30px;}
#벽돌2 {왼쪽:90px;}
#벽돌3 {왼쪽:150px;}
#벽돌4 {왼쪽:210px;}
* HTML #brick5 {
너비:240px;
폭폭:232px;
}
#벽돌5 {왼쪽:270px; 너비:232px;}
#벽돌9 {왼쪽:510px;}
#벽돌10 {왼쪽:570px;}
#brick11 {왼쪽:630px;}
#벽돌12 {왼쪽: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;
폭폭:22px;
}
#brick13 { /* 반 벽돌 */
왼쪽:30px;
너비:22px;
}
#벽돌14 {
왼쪽:60px;
너비:172px;
}
#brick15 { /* 반 벽돌 */
왼쪽:240px;
너비:22px;
}
#brick16 { /* 반 벽돌 */
왼쪽:510px;
너비:22px;
}
#벽돌17 {
왼쪽:540px;
너비:172px;
}
#brick18 { /* 반 벽돌 */
왼쪽:720px;
너비:22px;
}
* html #brick14, * html #brick17 {
너비:180px;
폭폭:172px;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {상위:232px;}
#brick19 {왼쪽:30px;}
#벽돌20 {왼쪽:210px;}
#brick21 {왼쪽:510px;}
#brick22 {왼쪽:690px;}
#브릭23, #브릭24, #브릭25, #브릭26, #브릭27, #브릭28, #브릭29, #브릭30 {
상단:258px;
너비:22px;
}
#브릭31, #브릭32, #브릭33, #브릭34, #브릭35, #브릭36, #브릭37, #브릭38 {
상단:310px;
너비:22px;
}
#브릭39, #브릭41, #브릭42, #브릭44 {
상단:362px;
너비:22px;
}
#브릭40, #브릭43 {상단:362px;}
#브릭23, #브릭31, #브릭39 {왼쪽:30px;}
#브릭24, #브릭32 {왼쪽:60px;}
#브릭25, #브릭33 {왼쪽:210px;}
#브릭26, #브릭34, #브릭41 {왼쪽:240px;}
#브릭27, #브릭35, #브릭42 {왼쪽:510px;}
#브릭28, #브릭36 {왼쪽:540px;}
#브릭29, #브릭37 {왼쪽:690px;}
#브릭30, #브릭38, #브릭44 {왼쪽:720px;}
#벽돌40 {
왼쪽:60px;
너비:172px;
}
#벽돌43 {
왼쪽:540px;
너비:172px;
}
* html #brick40, * html #brick43 {
너비:180px;
폭폭:172px;
}
#brick45, #brick46, #brick47, #brick48 {상단:284px;}
#brick49, #brick50, #brick51, #brick52 {상단:336px;}
#브릭45, #브릭49 {왼쪽:30px;}
#브릭46, #브릭50 {왼쪽:210px;}
#브릭47, #브릭51 {왼쪽:510px;}
#브릭48, #브릭52 {왼쪽:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {상단:388px;}
#brick53 {왼쪽:30px;}
#brick54 {왼쪽:90px;}
#brick55 {왼쪽:150px;}
#brick56 {왼쪽:210px;}
#brick57 {왼쪽:510px;}
#brick58 {왼쪽:570px;}
#brick59 {왼쪽:630px;}
#brick60 {왼쪽: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, # 벽돌101 {상단:466px;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {상단: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 {상위: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 {상위: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;}
/* 창틀 */
#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {
패딩:10px;
테두리 상단:4px 솔리드 #a98;
테두리 왼쪽:10px 단색 #cba;
테두리 하단:3px 솔리드 #f3e3d3;
테두리 오른쪽:10px 솔리드 #e9d8c7;
배경색:#666;
Z-색인:3;
}
* html #pane1L, * html #pane1R {
너비:108px;
폭폭:68px;
높이:29px;
높이높이:18px;
}
#pane1L {
상단:238px;
왼쪽:96px;
너비:68px;
높이:18px;
테두리 상단:9px 솔리드 #a98;
}
* html #pane2L, * html #pane2R {
너비:53px;
폭폭:19px;
높이:66px;
높이높이:36px;
}
#pane2L {
상단:291px;
왼쪽:96px;
너비:19px;
높이:36px;
테두리 오른쪽:4px 솔리드 #e9d8c7;
테두리 하단:6px 솔리드 #f3e3d3;
}
* html #pane3L, * html #pane3R {
너비:52px;
폭폭:18px;
높이:66px;
높이높이:36px;
}
#pane3L {
상단:291px;
왼쪽:152px;
너비:18px;
높이:36px;
테두리 왼쪽:4px 솔리드 #cba;
테두리 하단:6px 솔리드 #f3e3d3;
}
#pane1R {
상단:238px;
왼쪽:576px;
너비:68px;
높이:18px;
테두리 상단:9px 솔리드 #a98;
}
#pane2R {
상단:291px;
왼쪽:576px;
너비:19px;
높이:36px;
테두리 오른쪽:4px 솔리드 #e9d8c7;
테두리 하단:6px 솔리드 #f3e3d3;
}
#pane3R {
상단:291px;
왼쪽:632px;
너비:18px;
높이:36px;
테두리 왼쪽:4px 솔리드 #cba;
테두리 하단:6px 솔리드 #f3e3d3;
}
#창L, #창R {
상단:232px;
너비:120px;
높이:130px;
테두리:없음;
배경색:#fed;
Z-색인:2;
}
#windowR {왼쪽:90px;}
#windowL {왼쪽:570px;}
* HTML p.door {
너비:142px;
폭폭:102px;
높이:222px;
높이높이:187px;
}
p.문 {
너비:102px;
높이:187px;
여백:0;
패딩:10px;
테두리 상단:9px 솔리드 #800;
테두리 오른쪽:10px 솔리드 #b00;
테두리 하단:6px 솔리드 #ccc;
테두리 왼쪽:10px 단색 #b00;
배경색:#fed;
Z-색인:2;
}
* HTML #내부 {
너비:182px;
폭폭:142px;
높이:250px;
높이높이:222px;
}
#내부 {
위치:상대적;
너비:142px;
높이:222px;
패딩:0 0 10px 0;
테두리 상단:10px 솔리드 #900;
테두리 왼쪽:20px 단색 #c00;
테두리 하단:8px 솔리드 #ccc;
테두리 오른쪽:20px 단색 #c00;
배경색:#888;
}
* HTML #외부 {
너비:240px;
폭폭:182px;
높이:286px;
높이높이:250px;
}
#외부 {
상단:206px;
왼쪽:270px;
너비:182px;
높이:250px;
패딩:0 0 12px 0;
테두리 상단:10px 솔리드 #900;
테두리 왼쪽:29px 단색 #d00;
테두리 하단:14px 단색 #ccc;
테두리 오른쪽:29px 솔리드 #d00;
배경색:#888;
}
* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {
너비:39px;
폭폭:31px;
높이:68px;
높이높이:60px;
}
#문유리1, #문유리2, #문유리3, #문유리4 {
너비:31px;
높이:60px;
테두리 상단:4px 솔리드 #a98;
테두리 왼쪽:4px 솔리드 #cba;
테두리 하단:4px 솔리드 #f3e3d3;
테두리 오른쪽:4px 솔리드 #e9d8c7;
배경색:#fed;
Z-색인:3;
}
#doorpane1 {
상단:250px;
왼쪽:344px;
}
#doorpane2 {
상단:250px;
왼쪽:397px;
}
#doorpane3 {
상단:359px;
왼쪽:344px;
}
#doorpane4 {
상단:359px;
왼쪽:397px;
}
* html #핸들 {
너비:23px;
폭폭:15px;
높이:10px;
높이높이:2px;
}
#핸들 {
글꼴 크기:1px; /* --- div가 no가 되는 것을 방지합니다 */
줄 높이:1px; /* -/ IE6에서는 높이가 16px보다 작습니다 */
상단:331px;
왼쪽:416px;
너비:15px;
높이:2px;
테두리 상단:4px 솔리드 #fda;
테두리 왼쪽:4px 솔리드 #ec9;
테두리 하단:4px 솔리드 #b96;
테두리 오른쪽:4px 단색 #ca7;
배경색:#db8;
Z-색인:3;
}
* html #handlebase {
너비:10px;
폭폭:2px;
높이:23px;
높이높이:15px;
}
#핸들베이스 {
글꼴 크기:1px; /* --- div가 no가 되는 것을 방지합니다 */
줄 높이:1px; /* -/ IE6에서는 높이가 16px보다 작습니다 */
상단:327px;
왼쪽:433px;
너비:2px;
높이:15px;
테두리 상단:4px 솔리드 #fda;
테두리 왼쪽:4px 솔리드 #ec9;
테두리 하단:4px 솔리드 #b96;
테두리 오른쪽:4px 단색 #ca7;
배경색:#666;
Z-색인:2;
}
* html #텍스트박스 {
너비:720px;
폭폭:680px;
}
#텍스트상자 {
상단:492px;
왼쪽:30px;
너비:680px;
패딩:20px;
높이:자동;
텍스트 정렬:가운데;
테두리:없음;
배경색:#eee;
}
</style>
</head>
<본문>
<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="door">&nbsp;</p>
</div>
</div>
<div id="doorpane1"></div>
<div id="doorpane2"></div>
<div id="doorpane3"></div>
<div id="doorpane4"></div>
<div id="핸들"></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>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 />2003년 10월 16일 제작 &middot; 마지막 업데이트 날짜: 2006년 3월 16일 &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 >
</body>
</html>
관련 기사