Startseite>Webdesign-Tutorial>Web-Spezialeffekte

CSS-Code zur Darstellung der Spezialeffekte eines schönen Hauses

Autor：Eve Cole Aktualisierungszeit：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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House (3D Border Demo 2) von Chris Hester</title>
<style type="text/css">
/* Vielen Dank an Big John für die wiederholten Tests in IE5/Win! */
/* http://positioniseverything.net */
* {
Schriftfamilie: Verdana, Arial, Helvetica, serifenlos;
Schriftgröße:12px;
Zeilenhöhe:14px;
}
Körper {
Rand:0;
Polsterung:0;
Hintergrundfarbe:#fff;
Farbe:#000; // bitte Poster hier: http://digg.com/design/CSS_House
}
/* definiere alle Divs als Bausteine, um Code zu sparen. Werte später für alle Nicht-Bricks überschreiben */
/* Beschäftige dich zunächst mit dem kaputten Box-Modell von IE5. Die folgende Regel funktioniert nur für IE */
/* Siehe http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* html div {
Breite:60px; /* Gesamtboxbreite (Ränder + Polsterung + Breite) für IE5/Win */
Breite: 52 Pixel; /* Andere IE-Versionen erhalten diese Breite */
Höhe:26px; /* Gesamthöhe der Box */
Höhe:18px;
}
/* Jetzt mit allen anderen CSS-Browsern umgehen */
div {
Position:absolut;
Breite:52px;
Höhe: 18px;
Rand:0;
Polsterung:0;
border-top:4px solid #f00;
border-left:4px solid #e00;
border-bottom:4px solid #b00;
border-right:4px solid #c00;
Hintergrundfarbe:#d00;
Z-Index:1;
}
* html #dach {
Breite:758px;
Breite: 500 Pixel;
Höhe: 150 Pixel;
Höhe:50px;
}
#Dach {
oben:4px;
links:10px;
Breite:500px;
Höhe:50px;
border-top:0px solid #fc0;
border-left:129px solide #fff;
border-bottom:100px solid #575;
border-right:129px solide #fff;
Hintergrundfarbe:#fff;
}
* html #roof2 {
Breite:632px;
Breite:374px;
Höhe:90px;
Höhe:40px;
}
#dach2 {
oben:14px;
links:73px;
Breite:374px;
Höhe:40px;
border-top:0px solid #fc0;
border-left:129px solide #fff;
border-bottom:50px solid #686;
border-right:129px solide #fff;
Hintergrundfarbe:#fff;
Z-Index:2;
}
#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;}
#brick1 {left:30px;}
#brick2 {left:90px;}
#brick3 {links:150px;}
#brick4 {left:210px;}
* html #brick5 {
Breite:240px;
width:232px;
}
#brick5 {links:270px; Breite:232px;}
#brick9 {left:510px;}
#brick10 {links:570px;}
#brick11 {links:630px;}
#brick12 {links:690px;}
#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {top:206px;}
/* Mit allen halben Bausteinen auf einmal umgehen für 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 {
Breite:30px;
Breite:22px;
}
#brick13 { /* halber Stein */
links:30px;
Breite:22px;
}
#brick14 {
links:60px;
Breite:172px;
}
#brick15 { /* halber Stein */
links:240px;
Breite:22px;
}
#brick16 { /* halber Ziegelstein */
links:510px;
Breite:22px;
}
#brick17 {
links:540px;
Breite:172px;
}
#brick18 { /* halber Ziegelstein */
links:720px;
Breite:22px;
}
* html #brick14, * html #brick17 {
Breite: 180 Pixel;
Breite: 172 Pixel;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;}
#brick19 {left:30px;}
#brick20 {links:210px;}
#brick21 {left:510px;}
#brick22 {links:690px;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
oben:258px;
Breite:22px;
}
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
oben:310px;
Breite:22px;
}
#brick39, #brick41, #brick42, #brick44 {
oben:362px;
Breite:22px;
}
#brick40, #brick43 {top:362px;}
#brick23, #brick31, #brick39 {left:30px;}
#brick24, #brick32 {links:60px;}
#brick25, #brick33 {links:210px;}
#brick26, #brick34, #brick41 {links:240px;}
#brick27, #brick35, #brick42 {links:510px;}
#brick28, #brick36 {links:540px;}
#brick29, #brick37 {links:690px;}
#brick30, #brick38, #brick44 {links:720px;}
#brick40 {
links:60px;
Breite:172px;
}
#brick43 {
links:540px;
Breite:172px;
}
* html #brick40, * html #brick43 {
Breite: 180 Pixel;
Breite: 172 Pixel;
}
#brick45, #brick46, #brick47, #brick48 {top:284px;}
#brick49, #brick50, #brick51, #brick52 {top:336px;}
#brick45, #brick49 {links:30px;}
#brick46, #brick50 {links:210px;}
#brick47, #brick51 {links:510px;}
#brick48, #brick52 {links:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {top:388px;}
#brick53 {links:30px;}
#brick54 {links:90px;}
#brick55 {links:150px;}
#brick56 {links:210px;}
#brick57 {links:510px;}
#brick58 {links:570px;}
#brick59 {links:630px;}
#brick60 {links: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 {top: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 { /* halber Stein */
links:30px;
Breite:22px;
}
#brick62, #brick80, #brick93 {left:60px;}
#brick63, #brick81, #brick94 {links:120px;}
#brick64, #brick82, #brick95 {links:180px;}
#brick65, #brick96 { /* halber Stein */
links:240px;
Breite:22px;
}
#brick83 {links:240px;}
#brick84 {links:300px;}
#brick85 {links:360px;}
#brick86 {links:420px;}
#brick87 {links:480px;}
#brick66, #brick97 { /* halber Stein */
links:510px;
Breite:22px;
}
#brick67, #brick88, #brick98 {links:540px;}
#brick68, #brick89, #brick99 {links:600px;}
#brick69, #brick90, #brick100 {left:660px;}
#brick70, #brick91, #brick101 { /* halber Stein */
links:720px;
Breite:22px;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}
#brick71 {left:30px;}
#brick72 {links:90px;}
#brick73 {links:150px;}
#brick74 {links:210px;}
#brick75 {left:510px;}
#brick76 {links:570px;}
#brick77 {links:630px;}
#brick78 {links:690px;}
/* dunklere lange Ziegel + Schornsteine ​​*/
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
border-top:4px solid #d00;
border-left:4px solid #c00;
border-bottom:4px solid #900;
border-right:4px solid #a00;
Hintergrundfarbe:#b00;
Z-Index:2;
}
#chbrick1, #chbrick2, #chbrick4 {left:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {left:539px;}
#chbrick3 {left:209px;}
#chbrick7 {left:569px;}
#chbrick1, #chbrick5 {top:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
oben:34px;
Breite:22px;
}
#chbrick4, #chbrick8 {top:60px;}
/* Fensterscheiben */
#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {
Polsterung:10px;
border-top:4px solid #a98;
border-left:10px solid #cba;
border-bottom:3px solid #f3e3d3;
border-right:10px solide #e9d8c7;
Hintergrundfarbe:#666;
Z-Index:3;
}
* html #pane1L, * html #pane1R {
Breite: 108 Pixel;
Breite:68px;
Höhe:29px;
Höhe:18px;
}
#pane1L {
oben:238px;
links:96px;
Breite:68px;
Höhe: 18px;
border-top:9px solid #a98;
}
* html #pane2L, * html #pane2R {
Breite:53px;
Breite: 19 Pixel;
Höhe:66px;
Höhe:36px;
}
#pane2L {
oben:291px;
links:96px;
Breite: 19 Pixel;
Höhe:36px;
border-right:4px solide #e9d8c7;
border-bottom:6px solid #f3e3d3;
}
* html #pane3L, * html #pane3R {
Breite:52px;
Breite: 18 Pixel;
Höhe:66px;
Höhe:36px;
}
#pane3L {
oben:291px;
links:152px;
Breite: 18 Pixel;
Höhe:36px;
border-left:4px solid #cba;
border-bottom:6px solid #f3e3d3;
}
#pane1R {
oben:238px;
links:576px;
Breite:68px;
Höhe: 18px;
border-top:9px solid #a98;
}
#pane2R {
oben:291px;
links:576px;
Breite: 19 Pixel;
Höhe:36px;
border-right:4px solide #e9d8c7;
border-bottom:6px solid #f3e3d3;
}
#pane3R {
oben:291px;
links:632px;
Breite: 18 Pixel;
Höhe:36px;
border-left:4px solid #cba;
border-bottom:6px solid #f3e3d3;
}
#windowL, #windowR {
oben:232px;
Breite: 120 Pixel;
Höhe: 130 Pixel;
Grenze:keine;
Hintergrundfarbe:#fed;
Z-Index:2;
}
#windowR {left:90px;}
#windowL {left:570px;}
* html p.door {
Breite:142px;
Breite: 102 Pixel;
Höhe:222px;
Höhe:187px;
}
p.door {
Breite:102px;
Höhe:187px;
Rand:0;
Polsterung:10px;
border-top:9px solid #800;
border-right:10px solid #b00;
border-bottom:6px solid #ccc;
border-left:10px solid #b00;
Hintergrundfarbe:#fed;
Z-Index:2;
}
* html #inner {
Breite:182px;
Breite: 142 Pixel;
Höhe:250px;
Höhe:222px;
}
#inner {
Position:relativ;
Breite:142px;
Höhe:222px;
Polsterung:0 0 10px 0;
border-top:10px solid #900;
border-left:20px solid #c00;
border-bottom:8px solid #ccc;
border-right:20px solid #c00;
Hintergrundfarbe:#888;
}
* html #outer {
Breite:240px;
Breite: 182 Pixel;
Höhe:286px;
Höhe:250px;
}
#outer {
oben:206px;
links:270px;
Breite:182px;
Höhe:250px;
Polsterung:0 0 12px 0;
border-top:10px solid #900;
border-left:29px solid #d00;
border-bottom:14px solid #ccc;
border-right:29px solid #d00;
Hintergrundfarbe:#888;
}
* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {
Breite:39px;
width:31px;
Höhe:68px;
Höhe:60px;
}
#Türscheibe1, #Türscheibe2, #Türscheibe3, #Türscheibe4 {
Breite:31px;
Höhe:60px;
border-top:4px solid #a98;
border-left:4px solid #cba;
border-bottom:4px solid #f3e3d3;
border-right:4px solide #e9d8c7;
Hintergrundfarbe:#fed;
Z-Index:3;
}
#doorpane1 {
oben:250px;
links:344px;
}
#doorpane2 {
oben:250px;
links:397px;
}
#doorpane3 {
oben:359px;
links:344px;
}
#doorpane4 {
oben:359px;
links:397px;
}
* html #handle {
Breite:23px;
Breite: 15 Pixel;
Höhe: 10 Pixel;
Höhe:2px;
}
#handhaben {
Schriftgröße:1px; /* --- verhindert, dass div nein ist */
Zeilenhöhe:1px; /* -/ kleiner als 16px Höhe in IE6 */
oben:331px;
links:416px;
Breite: 15 Pixel;
Höhe:2px;
border-top:4px solide #fda;
border-left:4px solid #ec9;
border-bottom:4px solid #b96;
border-right:4px solid #ca7;
Hintergrundfarbe:#db8;
Z-Index:3;
}
* html #handlebase {
Breite: 10 Pixel;
Breite:2px;
Höhe:23px;
Höhe:15px;
}
#handlebase {
Schriftgröße:1px; /* --- verhindert, dass div nein ist */
Zeilenhöhe:1px; /* -/ kleiner als 16px Höhe in IE6 */
oben:327px;
links:433px;
Breite:2px;
Höhe: 15px;
border-top:4px solide #fda;
border-left:4px solid #ec9;
border-bottom:4px solid #b96;
border-right:4px solid #ca7;
Hintergrundfarbe:#666;
Z-Index:2;
}
* html #textbox {
Breite:720px;
Breite:680px;
}
#textbox {
oben:492px;
links:30px;
Breite:680px;
Polsterung:20px;
Höhe:auto;
text-align:center;
Grenze:keine;
Hintergrundfarbe:#eee;
}
</style>
</head>
<Körper>
<div id="roof"></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="outer">
<div id="inner">
<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="handle"></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> von <a href=" http://www.designdetector.com">Chris Hester</a> &middot; Siehe mein <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a>
<br />
<br />Erbaut am 16. Oktober 2003 &middot; Zuletzt aktualisiert am 16. März 2006 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Kommentare</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Trackbacks</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">Über</a></div >
</body>
</html>
Ähnliche Artikel