ホーム>Web デザインのチュートリアル>ウェブ特殊効果

美しい家の特殊効果を示す 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="ja" lang="ja">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS ハウス (3D ボーダー デモ 2) by Chris Hester</title>
<style type="text/css">
/* IE5/Win で繰り返しテストしてくださった Big John に感謝します! */
/* http://positioniseverything.net */
* {
フォントファミリー:Verdana、Arial、Helvetica、サンセリフ;
フォントサイズ: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 {
幅:60ピクセル; /* ボックスの合計幅 (枠線 + パディング + 幅) (IE5/Win の場合) */
width:52px; /* 他のバージョンの IE ではこの幅が得られます */
高さ:26ピクセル; /* ボックスの高さの合計 */
高さ:18ピクセル;
}
/* 次に、他のすべての CSS ブラウザを処理します */
ディビジョン {
位置:絶対;
幅:52ピクセル;
高さ:18ピクセル;
マージン:0;
パディング:0;
ボーダートップ:4px ソリッド #f00;
ボーダー左:4px ソリッド #e00;
border-bottom:4px ソリッド #b00;
ボーダー右:4px ソリッド #c00;
背景色:#d00;
z インデックス:1;
}
* html #roof {
幅:758ピクセル;
width:500px;
高さ:150ピクセル;
高さ:50ピクセル;
}
＃屋根 {
上:4ピクセル;
左:10ピクセル;
幅:500ピクセル;
高さ:50ピクセル;
ボーダートップ:0px ソリッド #fc0;
ボーダー左:129px 実線 #fff;
border-bottom:100px ソリッド #575;
ボーダー右:129px 実線 #fff;
背景色:#fff;
}
* html #roof2 {
幅:632ピクセル;
width:374px;
高さ:90ピクセル;
高さ:40ピクセル;
}
#屋根2 {
上:14ピクセル;
左:73ピクセル;
幅:374ピクセル;
高さ:40ピクセル;
ボーダートップ:0px ソリッド #fc0;
ボーダー左:129px 実線 #fff;
border-bottom: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 {
幅:240ピクセル;
width:232px;
}
#brick5 {左:270px;幅:232ピクセル;}
#brick9 {左:510px;}
#brick10 {左:570px;}
#brick11 {左:630px;}
#brick12 {左:690px;}
#brick13、#brick14、#brick15、#brick16、#brick17、#brick18 {top: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 {
幅:30ピクセル;
width:22px;
}
#brick13 { /* 半ブリック */
左:30ピクセル;
幅:22ピクセル;
}
#ブリック14 {
左:60ピクセル;
幅:172ピクセル;
}
#brick15 { /* 半ブリック */
左:240ピクセル;
幅:22ピクセル;
}
#brick16 { /* 半ブリック */
左:510ピクセル;
幅:22ピクセル;
}
#ブリック17 {
左:540ピクセル;
幅:172ピクセル;
}
#brick18 { /* 半ブリック */
左:720ピクセル;
幅:22ピクセル;
}
* html #brick14、* html #brick17 {
幅:180ピクセル;
width:172px;
}
#brick19、#brick20、#brick21、#brick34、#brick22 {top:232px;}
#brick19 {左:30px;}
#brick20 {左:210px;}
#brick21 {左:510px;}
#brick22 {左:690px;}
#ブリック23、#ブリック24、#ブリック25、#ブリック26、#ブリック27、#ブリック28、#ブリック29、#ブリック30 {
上:258ピクセル;
幅:22ピクセル;
}
#brick31、#brick32、#brick33、#brick34、#brick35、#brick36、#brick37、#brick38 {
上:310ピクセル;
幅:22ピクセル;
}
#brick39、#brick41、#brick42、#brick44 {
上:362ピクセル;
幅:22ピクセル;
}
#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 {
左:60ピクセル;
幅:172ピクセル;
}
#ブリック43 {
左:540ピクセル;
幅:172ピクセル;
}
* html #brick40、* html #brick43 {
幅:180ピクセル;
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;}
#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 {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 { /* 半ブリック */
左:30ピクセル;
幅:22ピクセル;
}
#brick62、#brick80、#brick93 {左:60px;}
#brick63、#brick81、#brick94 {左:120px;}
#brick64、#brick82、#brick95 {左:180px;}
#brick65, #brick96 { /* 半ブリック */
左:240ピクセル;
幅:22ピクセル;
}
#brick83 {左:240px;}
#brick84 {左:300ピクセル;}
#brick85 {左:360px;}
#brick86 {左:420px;}
#brick87 {左:480px;}
#brick66, #brick97 { /* 半ブリック */
左:510ピクセル;
幅:22ピクセル;
}
#brick67、#brick88、#brick98 {左:540px;}
#brick68、#brick89、#brick99 {左:600px;}
#brick69、#brick90、#brick100 {左:660px;}
#brick70, #brick91, #brick101 { /* 半ブリック */
左:720ピクセル;
幅:22ピクセル;
}
#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;
border-bottom: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 {
上:34ピクセル;
幅:22ピクセル;
}
#chbrick4、#chbrick8 {トップ:60px;}
/* 窓ガラス */
#pane1L、#pane2L、#pane3L、#pane1R、#pane2R、#pane3R {
パディング:10ピクセル;
ボーダートップ:4px ソリッド #a98;
ボーダー左:10px ソリッド #cba;
border-bottom:3px ソリッド #f3e3d3;
ボーダー右:10px ソリッド #e9d8c7;
背景色:#666;
z インデックス:3;
}
* html #pane1L、* html #pane1R {
幅:108ピクセル;
width:68px;
高さ:29ピクセル;
高さ:18ピクセル;
}
#ペイン1L {
上:238ピクセル;
左:96ピクセル;
幅:68ピクセル;
高さ:18ピクセル;
ボーダートップ:9px ソリッド #a98;
}
* html #pane2L、* html #pane2R {
幅:53ピクセル;
width:19px;
高さ:66ピクセル;
高さ:36ピクセル;
}
#ペイン2L {
上:291ピクセル;
左:96ピクセル;
幅:19ピクセル;
高さ:36ピクセル;
ボーダー右:4px ソリッド #e9d8c7;
border-bottom:6px ソリッド #f3e3d3;
}
* html #pane3L、* html #pane3R {
幅:52ピクセル;
width:18px;
高さ:66ピクセル;
高さ:36ピクセル;
}
#ペイン3L {
上:291ピクセル;
左:152ピクセル;
幅:18ピクセル;
高さ:36ピクセル;
ボーダー左:4px ソリッド #cba;
border-bottom:6px ソリッド #f3e3d3;
}
#ペイン1R {
上:238ピクセル;
左:576ピクセル;
幅:68ピクセル;
高さ:18ピクセル;
ボーダートップ:9px ソリッド #a98;
}
#ペイン2R {
上:291ピクセル;
左:576ピクセル;
幅:19ピクセル;
高さ:36ピクセル;
ボーダー右:4px ソリッド #e9d8c7;
border-bottom:6px ソリッド #f3e3d3;
}
#ペイン3R {
上:291ピクセル;
左:632ピクセル;
幅:18ピクセル;
高さ:36ピクセル;
ボーダー左:4px ソリッド #cba;
border-bottom:6px ソリッド #f3e3d3;
}
#ウィンドウL、#ウィンドウR {
上:232ピクセル;
幅:120ピクセル;
高さ:130ピクセル;
境界線:なし;
背景色:#fed;
z インデックス:2;
}
#windowR {左:90px;}
#windowL {左:570px;}
* html p.door {
幅:142ピクセル;
width:102px;
高さ:222ピクセル;
高さ:187ピクセル;
}
p.ドア {
幅:102ピクセル;
高さ:187ピクセル;
マージン:0;
パディング:10ピクセル;
ボーダートップ:9px ソリッド #800;
border-right:10px ソリッド #b00;
ボーダーボトム:6px ソリッド #ccc;
border-left:10px ソリッド #b00;
背景色:#fed;
z インデックス:2;
}
* html #inner {
幅:182ピクセル;
width:142px;
高さ:250ピクセル;
高さ:222ピクセル;
}
#インナー{
位置:相対;
幅:142ピクセル;
高さ:222ピクセル;
パディング:0 0 10px 0;
border-top:10px ソリッド #900;
border-left:20px ソリッド #c00;
border-bottom:8px ソリッド #ccc;
border-right:20px ソリッド #c00;
背景色:#888;
}
* html #outer {
幅:240ピクセル;
width:182px;
高さ:286ピクセル;
高さ:250ピクセル;
}
#アウター {
上:206ピクセル;
左:270ピクセル;
幅:182ピクセル;
高さ:250ピクセル;
パディング:0 0 12px 0;
border-top:10px ソリッド #900;
border-left:29px ソリッド #d00;
border-bottom:14px ソリッド #ccc;
border-right:29px ソリッド #d00;
背景色:#888;
}
* html #ドアペイン1、 * html #ドアペイン2、 * html #ドアペイン3、 * html #ドアペイン4 {
幅:39ピクセル;
width:31px;
高さ:68ピクセル;
高さ:60ピクセル;
}
#ドアペイン1、#ドアペイン2、#ドアペイン3、#ドアペイン4 {
幅:31ピクセル;
高さ:60ピクセル;
ボーダートップ:4px ソリッド #a98;
ボーダー左:4px ソリッド #cba;
border-bottom:4px ソリッド #f3e3d3;
ボーダー右:4px ソリッド #e9d8c7;
背景色:#fed;
z インデックス:3;
}
#ドアペイン1 {
上:250ピクセル;
左:344ピクセル;
}
#ドアペイン2 {
上:250ピクセル;
左:397ピクセル;
}
#ドアペイン3 {
上:359ピクセル;
左:344ピクセル;
}
#ドアペイン4 {
上:359ピクセル;
左:397ピクセル;
}
* html #ハンドル {
幅:23ピクセル;
width:15px;
高さ:10ピクセル;
高さ:2px;
}
＃ハンドル {
フォントサイズ:1px; /* --- div が no になるのを防ぎます */
行の高さ:1px; /* -/ IE6 では高さが 16 ピクセルより小さい */
上:331ピクセル;
左:416ピクセル;
幅:15ピクセル;
高さ:2ピクセル;
ボーダートップ:4px ソリッド #fda;
border-left:4px ソリッド #ec9;
border-bottom:4px ソリッド #b96;
ボーダー右:4px ソリッド #ca7;
背景色:#db8;
z インデックス:3;
}
* html #ハンドルベース {
幅:10ピクセル;
width:2px;
高さ:23ピクセル;
高さ:15ピクセル;
}
#ハンドルベース {
フォントサイズ:1px; /* --- div が no になるのを防ぎます */
行の高さ:1px; /* -/ IE6 では高さが 16 ピクセルより小さい */
上:327ピクセル;
左:433ピクセル;
幅:2ピクセル;
高さ:15ピクセル;
ボーダートップ:4px ソリッド #fda;
border-left:4px ソリッド #ec9;
border-bottom:4px ソリッド #b96;
ボーダー右:4px ソリッド #ca7;
背景色:#666;
z インデックス:2;
}
* html #テキストボックス {
幅:720ピクセル;
width:680px;
}
#テキストボックス {
上:492ピクセル;
左:30ピクセル;
幅:680ピクセル;
パディング:20ピクセル;
高さ:自動;
テキスト整列:中央;
境界線:なし;
背景色:#eee;
}
</スタイル>
</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="ドアペイン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="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 ハウス</b> by <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 日に建てられました。最終更新日: 2006 年 3 月 16 日<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>
関連記事