Page d'accueil>Tutoriel de conception de sites Web>Effets spéciaux Web

Code CSS pour montrer les effets spéciaux d'une belle maison

Auteur：Eve Cole Date de mise à jour：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="fr" lang="fr">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House (3D Border Demo 2) par Chris Hester</title>
<style type="text/css">
/* Merci à Big John pour les tests répétés dans IE5/Win ! */
/* http://positioniseverything.net */
* {
famille de polices : Verdana, Arial, Helvetica, sans-serif ;
taille de police : 12 px ;
hauteur de ligne : 14 px ;
}
corps {
marge : 0 ;
remplissage : 0 ;
couleur d'arrière-plan :#fff;
couleur : #000 ; // pour s'il vous plaît, affichez ici : http://digg.com/design/CSS_House
}
/* définit tous les divs comme des briques pour sauvegarder le code. Écraser les valeurs plus tard pour toutes les non-briques */
/* traite d'abord du modèle de boîte cassée d'IE5. La règle ci-dessous fonctionne uniquement pour IE */
/* Voir http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* div html {
largeur : 60 px ; /* Largeur totale de la boîte (bordures + remplissage + largeur) pour IE5/Win */
largeur : 52 px ; /* Les autres versions d'IE obtiennent cette largeur */
hauteur : 26 px ; /* Hauteur totale de la boîte */
hauteur : 18px ;
}
/* Gère maintenant tous les autres navigateurs CSS */
div{
position : absolue ;
largeur : 52 px ;
hauteur : 18 px ;
marge : 0 ;
remplissage : 0 ;
bordure supérieure : 4px solide #f00 ;
bordure gauche : 4px solide #e00 ;
bordure inférieure : 4px solide #b00 ;
bordure droite : 4px solide #c00 ;
couleur d'arrière-plan : #d00 ;
indice z : 1 ;
}
* html #toit {
largeur : 758 px ;
largeur : 500 px ;
hauteur : 150 px ;
hauteur : 50px ;
}
#toit {
haut : 4 px ;
gauche : 10 px ;
largeur : 500 px ;
hauteur : 50 px ;
border-top:0px solide #fc0;
bordure gauche : 129px solide #fff ;
bordure inférieure : 100 px solide #575 ;
bordure droite : 129px solide #fff ;
couleur d'arrière-plan :#fff;
}
* html #toit2 {
largeur : 632 px ;
largeur : 374 px ;
hauteur : 90 px ;
hauteur : 40px ;
}
#toit2 {
haut : 14 px ;
gauche : 73px ;
largeur : 374 px ;
hauteur : 40 px ;
border-top:0px solide #fc0;
bordure gauche : 129px solide #fff ;
bordure inférieure : 50px solide #686 ;
bordure droite : 129px solide #fff ;
couleur d'arrière-plan :#fff;
indice z : 2 ;
}
#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {haut : 180px;}
#brick1 {gauche:30px;}
#brick2 {gauche : 90px ;}
#brick3 {gauche : 150px ;}
#brick4 {gauche : 210px ;}
* html # brique5 {
largeur : 240 px ;
largeur : 232 px ;
}
#brick5 {gauche :270px ; largeur : 232 px ;}
#brick9 {gauche : 510px ;}
#brick10 {gauche : 570px ;}
#brick11 {gauche : 630px ;}
#brick12 {gauche : 690px ;}
#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {haut : 206px ;}
/* Traitez toutes les demi-briques en même temps pour 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 # brique41, * html # brique42, * html # brique44, * html # brique61,
* 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 {
largeur : 30 px ;
largeur : 22 px ;
}
#brick13 { /* demi-brique */
gauche : 30 px ;
largeur : 22 px ;
}
#brique14 {
gauche : 60 px ;
largeur : 172 px ;
}
#brick15 { /* demi-brique */
gauche : 240 px ;
largeur : 22 px ;
}
#brick16 { /* demi-brique */
gauche : 510 px ;
largeur : 22 px ;
}
#brique17 {
gauche : 540 px ;
largeur : 172 px ;
}
#brick18 { /* demi-brique */
gauche : 720 px ;
largeur : 22 px ;
}
* html # brique14, * html # brique17 {
largeur : 180 px ;
largeur : 172 px ;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {haut : 232px ;}
#brick19 {gauche:30px;}
# brique20 {gauche : 210px ;}
#brick21 {gauche : 510px ;}
#brick22 {gauche : 690px ;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
haut : 258 px ;
largeur : 22 px ;
}
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
haut : 310 px ;
largeur : 22 px ;
}
# brique39, # brique41, # brique42, # brique44 {
haut : 362 px ;
largeur : 22 px ;
}
# brique40, # brique43 {haut : 362px ;}
#brick23, #brick31, #brick39 {gauche : 30px;}
# brique24, # brique32 {gauche : 60px ;}
# brique25, # brique33 {gauche : 210px ;}
#brick26, #brick34, #brick41 {gauche : 240px;}
#brick27, #brick35, #brick42 {gauche : 510px;}
# brique28, # brique36 {gauche : 540px ;}
# brique29, # brique37 {gauche : 690px ;}
#brick30, #brick38, #brick44 {gauche : 720px ;}
#brique40 {
gauche : 60 px ;
largeur : 172 px ;
}
#brique43 {
gauche : 540 px ;
largeur : 172 px ;
}
* html # brique40, * html # brique43 {
largeur : 180 px ;
largeur : 172 px ;
}
# brique45, # brique46, # brique47, # brique48 {haut : 284px ;}
# brique49, # brique50, # brique51, # brique52 {haut : 336px ;}
# brique45, # brique49 {gauche: 30px;}
# brique46, # brique50 {gauche : 210px ;}
# brique47, # brique51 {gauche : 510px ;}
# brique48, # brique52 {gauche : 690px ;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {haut : 388px;}
# brique53 {gauche : 30px ;}
#brick54 {gauche : 90px ;}
# brique55 {gauche : 150px ;}
# brique56 {gauche : 210 px ;}
# brique57 {gauche : 510px ;}
# brique58 {gauche : 570px ;}
#brick59 {gauche : 630px ;}
#brick60 {gauche : 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, # brique101 {haut : 466px ;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {haut : 414px;}
#brick79, #brick80, #brick81, #brick82, #brick83, #brick84, #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91 {haut : 154px;}
#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {haut : 466px ;}
#brick61, #brick79, #brick92 { /* demi-brique */
gauche : 30 px ;
largeur : 22 px ;
}
#brick62, #brick80, #brick93 {gauche :60px;}
#brick63, #brick81, #brick94 {gauche : 120px ;}
#brick64, #brick82, #brick95 {gauche : 180px ;}
#brick65, #brick96 { /* demi-brique */
gauche : 240 px ;
largeur : 22 px ;
}
#brick83 {gauche : 240px ;}
#brick84 {gauche : 300px ;}
#brick85 {gauche : 360px ;}
#brick86 {gauche : 420px ;}
#brick87 {gauche : 480px ;}
#brick66, #brick97 { /* demi-brique */
gauche : 510 px ;
largeur : 22 px ;
}
#brick67, #brick88, #brick98 {gauche : 540px;}
#brick68, #brick89, #brick99 {gauche : 600 px ;}
#brick69, #brick90, #brick100 {gauche : 660px;}
#brick70, #brick91, #brick101 { /* demi-brique */
gauche : 720 px ;
largeur : 22 px ;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {haut : 440px;}
# brique71 {gauche : 30px ;}
#brick72 {gauche : 90px ;}
#brick73 {gauche : 150px ;}
#brick74 {gauche : 210px ;}
#brick75 {gauche : 510px ;}
#brick76 {gauche : 570px ;}
#brick77 {gauche : 630px ;}
#brick78 {gauche : 690px ;}
/* briques longues plus foncées + cheminées */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
bordure supérieure : 4 px solide #d00 ;
bordure gauche : 4px solide #c00 ;
bordure inférieure : 4px solide #900 ;
bordure droite : 4px solide #a00 ;
couleur d'arrière-plan : #b00 ;
indice z : 2 ;
}
#chbrick1, #chbrick2, #chbrick4 {gauche : 179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {gauche : 539px;}
#chbrick3 {gauche : 209px ;}
#chbrick7 {gauche : 569px;}
#chbrick1, #chbrick5 {haut :8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
haut : 34 px ;
largeur : 22 px ;
}
#chbrick4, #chbrick8 {haut :60px;}
/* vitres de fenêtre */
# volet1L, # volet2L, # volet3L, # volet1R, # volet2R, # volet3R {
remplissage : 10 px ;
bordure supérieure : 4 px solide #a98 ;
bordure gauche : 10 px solide #cba ;
bordure inférieure : 3px solide #f3e3d3 ;
bordure droite : 10px solide #e9d8c7 ;
couleur d'arrière-plan : #666 ;
indice z : 3 ;
}
* html # volet1L, * html # volet1R {
largeur : 108 px ;
largeur : 68 px ;
hauteur : 29 px ;
hauteur : 18px ;
}
#panneau1L {
haut : 238 px ;
gauche : 96px ;
largeur : 68 px ;
hauteur : 18 px ;
bordure supérieure : 9px solide #a98 ;
}
* html # volet2L, * html # volet2R {
largeur : 53 px ;
largeur : 19 px ;
hauteur : 66 px ;
hauteur : 36 px ;
}
#panneau2L {
haut : 291 px ;
gauche : 96px ;
largeur : 19 px ;
hauteur : 36 px ;
bordure droite : 4px solide #e9d8c7 ;
bordure inférieure : 6px solide #f3e3d3 ;
}
* html # volet3L, * html # volet3R {
largeur : 52 px ;
largeur : 18 px ;
hauteur : 66 px ;
hauteur : 36 px ;
}
#pane3L {
haut : 291 px ;
gauche : 152 px ;
largeur : 18 px ;
hauteur : 36 px ;
bordure gauche : 4px solide #cba ;
bordure inférieure : 6px solide #f3e3d3 ;
}
#panneau1R {
haut : 238 px ;
gauche : 576 px ;
largeur : 68 px ;
hauteur : 18 px ;
bordure supérieure : 9px solide #a98 ;
}
#panneau2R {
haut : 291 px ;
gauche : 576 px ;
largeur : 19 px ;
hauteur : 36 px ;
bordure droite : 4px solide #e9d8c7 ;
bordure inférieure : 6px solide #f3e3d3 ;
}
#pane3R {
haut : 291 px ;
gauche : 632 px ;
largeur : 18 px ;
hauteur : 36 px ;
bordure gauche : 4px solide #cba ;
bordure inférieure : 6px solide #f3e3d3 ;
}
#fenêtreL, #fenêtreR {
haut : 232 px ;
largeur : 120 px ;
hauteur : 130 px ;
bordure : aucune ;
couleur d'arrière-plan : #fed ;
indice z : 2 ;
}
#windowR {gauche:90px;}
#windowL {gauche:570px;}
* html p.porte {
largeur : 142 px ;
largeur : 102 px ;
hauteur : 222 px ;
hauteur : 187px ;
}
p.porte {
largeur : 102 px ;
hauteur : 187px ;
marge : 0 ;
remplissage : 10 px ;
bordure supérieure : 9px solide #800 ;
bordure droite : 10px solide #b00 ;
bordure inférieure : 6 px solide #ccc ;
bordure gauche : 10px solide #b00 ;
couleur d'arrière-plan : #fed ;
indice z : 2 ;
}
* html #intérieur {
largeur : 182 px ;
largeur : 142 px ;
hauteur : 250 px ;
hauteur : 222px ;
}
#intérieur {
position : relative ;
largeur : 142 px ;
hauteur : 222 px ;
remplissage :0 0 10px 0 ;
bordure supérieure : 10px solide #900 ;
bordure gauche : 20px solide #c00 ;
bordure inférieure : 8 px solide #ccc ;
bordure droite : 20px solide #c00 ;
couleur d'arrière-plan : #888 ;
}
* html #extérieur {
largeur : 240 px ;
largeur : 182 px ;
hauteur : 286 px ;
hauteur : 250 px ;
}
#extérieur {
haut : 206 px ;
gauche : 270 px ;
largeur : 182 px ;
hauteur : 250 px ;
remplissage :0 0 12px 0 ;
bordure supérieure : 10px solide #900 ;
bordure gauche : 29px solide #d00 ;
bordure inférieure : 14 px solide #ccc ;
bordure droite : 29px solide #d00 ;
couleur d'arrière-plan : #888 ;
}
* html #porte1, * html #porte2, * html #porte3, * html #porte4 {
largeur : 39 px ;
largeur : 31 px ;
hauteur : 68 px ;
hauteur : 60px ;
}
#porte1, #porte2, #porte3, #porte4 {
largeur : 31 px ;
hauteur : 60 px ;
bordure supérieure : 4 px solide #a98 ;
bordure gauche : 4px solide #cba ;
bordure inférieure : 4px solide #f3e3d3 ;
bordure droite : 4px solide #e9d8c7 ;
couleur d'arrière-plan : #fed ;
indice z : 3 ;
}
#vitre1 {
haut : 250 px ;
gauche : 344 px ;
}
#vitre2 {
haut : 250 px ;
gauche : 397 px ;
}
#porte3 {
haut : 359 px ;
gauche : 344 px ;
}
#porte4 {
haut : 359 px ;
gauche : 397 px ;
}
* html #poignée {
largeur : 23 px ;
largeur : 15 px ;
hauteur : 10 px ;
hauteur : 2px ;
}
#poignée {
taille de police : 1px ; /* --- empêche div d'être non */
hauteur de ligne : 1px ; /* -/ hauteur inférieure à 16 px dans IE6 */
haut : 331 px ;
gauche : 416 px ;
largeur : 15 px ;
hauteur : 2 px ;
border-top : 4px solide #fda ;
bordure gauche : 4px solide #ec9 ;
bordure inférieure : 4px solide #b96 ;
bordure droite : 4px solide #ca7 ;
couleur d'arrière-plan :#db8 ;
indice z : 3 ;
}
* html #handlebase {
largeur : 10 px ;
largeur : 2 px ;
hauteur : 23 px ;
hauteur : 15px ;
}
#handlebase {
taille de police : 1px ; /* --- empêche div d'être non */
hauteur de ligne : 1px ; /* -/ hauteur inférieure à 16 px dans IE6 */
haut : 327 px ;
gauche : 433px ;
largeur : 2 px ;
hauteur : 15 px ;
border-top : 4px solide #fda ;
bordure gauche : 4px solide #ec9 ;
bordure inférieure : 4px solide #b96 ;
bordure droite : 4px solide #ca7 ;
couleur d'arrière-plan : #666 ;
indice z : 2 ;
}
* html #zone de texte {
largeur : 720 px ;
largeur : 680 px ;
}
#zone de texte {
haut : 492 px ;
gauche : 30 px ;
largeur : 680 px ;
remplissage : 20 px ;
hauteur : auto ;
texte-align:centre;
bordure : aucune ;
couleur d'arrière-plan : #eee ;
}
</style>
</tête>
<corps>
<div id="toit"></div>
<div id="toit2"></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="extérieur">
<div id="intérieur">
<p class="porte">&nbsp;</p>
</div>
</div>
<div id="portepane1"></div>
<div id="portepane2"></div>
<div id="portepane3"></div>
<div id="portepane4"></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> par <a href=" http://www.designdetector.com">Chris Hester</a> &middot; Voir mon <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a>
<br />
<br />Construit le 16 octobre 2003 &middot; Dernière mise à jour le 16 mars 2006 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Commentaires</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Trackbacks</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">À propos</a></div >
</corps>
</html>
Articles connexes