Inicio>Tutorial de diseño web>efectos especiales web

Código CSS para mostrar los efectos especiales de una hermosa casa.

Autor：Eve Cole Fecha de actualización：2009-06-12 19:27:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="es" lang="es">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=ISO-8859-1" />
<title>Casa CSS (Demostración de borde 3D 2) por Chris Hester</title>
<tipo de estilo="texto/css">
/* ¡Gracias a Big John por las repetidas pruebas en IE5/Win! */
/* http://posicioniseverything.net */
* {
familia de fuentes:Verdana, Arial, Helvetica, sans-serif;
tamaño de fuente: 12px;
altura de línea: 14px;
}
cuerpo {
margen:0;
relleno: 0;
color de fondo: #fff;
color:#000; // por favor publique aquí: http://digg.com/design/CSS_House
}
/* define todos los divs como ladrillos para guardar el código. Sobrescriba los valores más adelante para cualquier elemento que no sea de ladrillo */
/* primero tratamos el modelo de caja rota de IE5. La siguiente regla funciona solo para IE */
/* Ver http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* html div {
ancho: 60 píxeles; /* Ancho total del cuadro (bordes + relleno + ancho) para IE5/Win */
ancho: 52px; /* Otras versiones de IE obtienen este ancho */
altura: 26 píxeles; /* Alto total de la caja */
altura: 18px;
}
/* Ahora trabaja con todos los demás navegadores CSS */
div {
posición:absoluta;
ancho: 52px;
altura: 18 píxeles;
margen:0;
relleno: 0;
borde superior: 4px sólido #f00;
borde izquierdo: 4px sólido #e00;
borde inferior: 4px sólido #b00;
borde derecho: 4px sólido #c00;
color de fondo:#d00;
índice z: 1;
}
* html #techo {
ancho: 758 px;
ancho: 500 px;
altura: 150 px;
altura: 50 px;
}
#techo {
arriba: 4px;
izquierda: 10px;
ancho: 500 px;
altura: 50 píxeles;
borde superior: 0px sólido #fc0;
borde izquierdo: 129px sólido #fff;
borde inferior: 100 px sólido # 575;
borde derecho: 129px sólido #fff;
color de fondo: #fff;
}
* html #techo2 {
ancho: 632 px;
ancho: 374px;
altura: 90 píxeles;
altura: 40px;
}
#techo2 {
arriba: 14px;
izquierda: 73px;
ancho: 374px;
altura: 40 píxeles;
borde superior: 0px sólido #fc0;
borde izquierdo: 129px sólido #fff;
borde inferior: 50 px sólido #686;
borde derecho: 129px sólido #fff;
color de fondo: #fff;
índice z: 2;
}
#ladrillo1, #ladrillo2, #ladrillo3, #ladrillo4, #ladrillo5, #ladrillo9, #ladrillo10, #ladrillo11, #ladrillo12 {arriba:180px;}
#ladrillo1 {izquierda:30px;}
#ladrillo2 {izquierda:90px;}
#ladrillo3 {izquierda:150px;}
#ladrillo4 {izquierda:210px;}
* html #ladrillo5 {
ancho: 240 px;
ancho: 232px;
}
#ladrillo5 {izquierda:270px; ancho: 232px;}
#ladrillo9 {izquierda:510px;}
#ladrillo10 {izquierda:570px;}
#ladrillo11 ​​{izquierda:630px;}
#ladrillo12 {izquierda:690px;}
#ladrillo13, #ladrillo14, #ladrillo15, #ladrillo16, #ladrillo17, #ladrillo18 {top:206px;}
/* Tratar con todos los medios ladrillos a la vez para IE5/Win */
* html #ladrillo13, * html #ladrillo15, * html #ladrillo16, * html #ladrillo18, * html #ladrillo23, * html #ladrillo24, * html #ladrillo25,
* html #ladrillo26, * html #ladrillo27, * html #ladrillo28, * html #ladrillo29, * html #ladrillo30, * html #ladrillo31, * html #ladrillo32,
* html #ladrillo33, * html #ladrillo34, * html #ladrillo35, * html #ladrillo36, * html #ladrillo37, * html #ladrillo38, * html #ladrillo39,
* html #ladrillo41, * html #ladrillo42, * html #ladrillo44, * html #ladrillo61,
* html #ladrillo79, * html #ladrillo92, * html #ladrillo65, * html #ladrillo96, * html #ladrillo66, * html #ladrillo97, * html #ladrillo70,
* html #brick91, * html #brick101, * html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7,
* html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7 {
ancho: 30px;
ancho: 22px;
}
#ladrillo13 { /* medio ladrillo */
izquierda: 30px;
ancho: 22px;
}
#ladrillo14 {
izquierda: 60px;
ancho: 172 px;
}
#ladrillo15 { /* medio ladrillo */
izquierda: 240px;
ancho: 22px;
}
#ladrillo16 { /* medio ladrillo */
izquierda: 510px;
ancho: 22px;
}
#ladrillo17 {
izquierda: 540px;
ancho: 172 px;
}
#ladrillo18 { /* medio ladrillo */
izquierda: 720 px;
ancho: 22px;
}
* html #ladrillo14, * html #ladrillo17 {
ancho: 180 px;
ancho: 172 px;
}
#ladrillo19, #ladrillo20, #ladrillo21, #ladrillo34, #ladrillo22 {arriba:232px;}
#ladrillo19 {izquierda:30px;}
#ladrillo20 {izquierda:210px;}
#ladrillo21 {izquierda:510px;}
#ladrillo22 {izquierda:690px;}
#ladrillo23, #ladrillo24, #ladrillo25, #ladrillo26, #ladrillo27, #ladrillo28, #ladrillo29, #ladrillo30 {
arriba: 258px;
ancho: 22px;
}
#ladrillo31, #ladrillo32, #ladrillo33, #ladrillo34, #ladrillo35, #ladrillo36, #ladrillo37, #ladrillo38 {
arriba: 310px;
ancho: 22px;
}
#ladrillo39, #ladrillo41, #ladrillo42, #ladrillo44 {
arriba: 362px;
ancho: 22px;
}
#ladrillo40, #ladrillo43 {arriba:362px;}
#ladrillo23, #ladrillo31, #ladrillo39 {izquierda:30px;}
#ladrillo24, #ladrillo32 {izquierda:60px;}
#ladrillo25, #ladrillo33 {izquierda:210px;}
#ladrillo26, #ladrillo34, #ladrillo41 {izquierda:240px;}
#ladrillo27, #ladrillo35, #ladrillo42 {izquierda:510px;}
#ladrillo28, #ladrillo36 {izquierda:540px;}
#ladrillo29, #ladrillo37 {izquierda:690px;}
#ladrillo30, #ladrillo38, #ladrillo44 {izquierda:720px;}
#ladrillo40 {
izquierda: 60px;
ancho: 172 px;
}
#ladrillo43 {
izquierda: 540px;
ancho: 172 px;
}
* html #ladrillo40, * html #ladrillo43 {
ancho: 180 px;
ancho: 172 px;
}
#ladrillo45, #ladrillo46, #ladrillo47, #ladrillo48 {arriba:284px;}
#ladrillo49, #ladrillo50, #ladrillo51, #ladrillo52 {arriba:336px;}
#ladrillo45, #ladrillo49 {izquierda:30px;}
#ladrillo46, #ladrillo50 {izquierda:210px;}
#ladrillo47, #ladrillo51 {izquierda:510px;}
#ladrillo48, #ladrillo52 {izquierda:690px;}
#ladrillo53, #ladrillo54, #ladrillo55, #ladrillo59, #ladrillo56, #ladrillo57, #ladrillo58, #ladrillo60, #ladrillo61 {arriba:388px;}
#ladrillo53 {izquierda:30px;}
#ladrillo54 {izquierda:90px;}
#ladrillo55 {izquierda:150px;}
#ladrillo56 {izquierda:210px;}
#ladrillo57 {izquierda:510px;}
#ladrillo58 {izquierda:570px;}
#ladrillo59 {izquierda:630px;}
#ladrillo60 {izquierda: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, # ladrillo101 {arriba: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 {arriba:154px;}
#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {top:466px;}
#brick61, #brick79, #brick92 { /*medio ladrillo*/
izquierda: 30px;
ancho: 22px;
}
#ladrillo62, #ladrillo80, #ladrillo93 {izquierda:60px;}
#ladrillo63, #ladrillo81, #ladrillo94 {izquierda:120px;}
#ladrillo64, #ladrillo82, #ladrillo95 {izquierda:180px;}
#brick65, #brick96 { /*medio ladrillo*/
izquierda: 240px;
ancho: 22px;
}
#ladrillo83 {izquierda:240px;}
#ladrillo84 {izquierda:300px;}
#ladrillo85 {izquierda:360px;}
#ladrillo86 {izquierda:420px;}
#ladrillo87 {izquierda:480px;}
#brick66, #brick97 { /*medio ladrillo*/
izquierda: 510px;
ancho: 22px;
}
#ladrillo67, #ladrillo88, #ladrillo98 {izquierda:540px;}
#ladrillo68, #ladrillo89, #ladrillo99 {izquierda:600px;}
#ladrillo69, #ladrillo90, #ladrillo100 {izquierda:660px;}
#brick70, #brick91, #brick101 { /*medio ladrillo*/
izquierda: 720 px;
ancho: 22px;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {arriba:440px;}
#ladrillo71 {izquierda:30px;}
#ladrillo72 {izquierda:90px;}
#ladrillo73 {izquierda:150px;}
#ladrillo74 {izquierda:210px;}
#ladrillo75 {izquierda:510px;}
#ladrillo76 {izquierda:570px;}
#ladrillo77 {izquierda:630px;}
#ladrillo78 {izquierda:690px;}
/* ladrillos largos más oscuros + chimeneas */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
borde superior: 4px sólido #d00;
borde izquierdo: 4px sólido #c00;
borde inferior: 4px sólido #900;
borde derecho: 4px sólido #a00;
color de fondo:#b00;
índice z: 2;
}
#chbrick1, #chbrick2, #chbrick4 {izquierda:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {izquierda:539px;}
#chbrick3 {izquierda:209px;}
#chbrick7 {izquierda:569px;}
#chbrick1, #chbrick5 {arriba:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
arriba: 34px;
ancho: 22px;
}
#chbrick4, #chbrick8 {arriba:60px;}
/* paneles de ventana */
#panel1L, #panel2L, #panel3L, #panel1R, #panel2R, #panel3R {
relleno: 10px;
borde superior: 4px sólido #a98;
borde izquierdo: 10px sólido #cba;
borde inferior: 3px sólido #f3e3d3;
borde derecho: 10px sólido #e9d8c7;
color de fondo:#666;
índice z: 3;
}
* html #panel1L, * html #panel1R {
ancho: 108px;
ancho: 68px;
altura: 29 píxeles;
altura: 18px;
}
#panel1L {
arriba: 238px;
izquierda: 96px;
ancho: 68px;
altura: 18 píxeles;
borde superior: 9px sólido #a98;
}
* html #pane2L, * html #pane2R {
ancho: 53px;
ancho: 19px;
altura: 66 píxeles;
altura: 36px;
}
# panel2L {
arriba: 291px;
izquierda: 96px;
ancho: 19px;
altura: 36px;
borde derecho: 4px sólido #e9d8c7;
borde inferior: 6px sólido #f3e3d3;
}
* html #pane3L, * html #pane3R {
ancho: 52px;
ancho: 18px;
altura: 66 píxeles;
altura: 36px;
}
# panel3L {
arriba: 291px;
izquierda: 152px;
ancho: 18px;
altura: 36px;
borde izquierdo: 4px sólido #cba;
borde inferior: 6px sólido #f3e3d3;
}
#panel1R {
arriba: 238px;
izquierda: 576px;
ancho: 68px;
altura: 18 píxeles;
borde superior: 9px sólido #a98;
}
# panel2R {
arriba: 291px;
izquierda: 576px;
ancho: 19px;
altura: 36px;
borde derecho: 4px sólido #e9d8c7;
borde inferior: 6px sólido #f3e3d3;
}
# panel3R {
arriba: 291px;
izquierda: 632px;
ancho: 18px;
altura: 36px;
borde izquierdo: 4px sólido #cba;
borde inferior: 6px sólido #f3e3d3;
}
#ventanaL, #ventanaR {
arriba: 232px;
ancho: 120 px;
altura: 130 px;
borde: ninguno;
color de fondo:#fed;
índice z: 2;
}
#ventanaR {izquierda:90px;}
#ventanaL {izquierda:570px;}
* html p.puerta {
ancho: 142 px;
ancho: 102 px;
altura: 222 px;
altura: 187 px;
}
p.puerta {
ancho: 102px;
altura: 187 px;
margen:0;
relleno: 10px;
borde superior: 9px sólido #800;
borde derecho: 10px sólido #b00;
borde inferior: 6px sólido #ccc;
borde izquierdo: 10px sólido #b00;
color de fondo:#fed;
índice z: 2;
}
* html #interior {
ancho: 182px;
ancho: 142 px;
altura: 250 px;
altura: 222 px;
}
#interno {
posición: relativa;
ancho: 142 px;
altura: 222 px;
relleno:0 0 10px 0;
borde superior: 10px sólido #900;
borde izquierdo: 20px sólido #c00;
borde inferior: 8px sólido #ccc;
borde derecho: 20px sólido #c00;
color de fondo:#888;
}
* html #exterior {
ancho: 240 px;
ancho: 182px;
altura: 286 px;
altura: 250 px;
}
#exterior {
arriba: 206px;
izquierda: 270px;
ancho: 182px;
altura: 250 px;
relleno:0 0 12px 0;
borde superior: 10px sólido #900;
borde izquierdo: 29px sólido #d00;
borde inferior: 14px sólido #ccc;
borde derecho: 29px sólido #d00;
color de fondo:#888;
}
* html #puerta1, * html #puerta2, * html #puerta3, * html #puerta4 {
ancho: 39px;
ancho: 31px;
altura: 68 píxeles;
altura: 60 px;
}
#paneldepuerta1, #paneldepuerta2, #paneldepuerta3, #paneldepuerta4 {
ancho: 31px;
altura: 60 píxeles;
borde superior: 4px sólido #a98;
borde izquierdo: 4px sólido #cba;
borde inferior: 4px sólido #f3e3d3;
borde derecho: 4px sólido #e9d8c7;
color de fondo:#fed;
índice z: 3;
}
#panel de puerta1 {
arriba: 250px;
izquierda: 344px;
}
#panel2 {
arriba: 250px;
izquierda: 397px;
}
#panel3 {
arriba: 359px;
izquierda: 344px;
}
#panel de puerta4 {
arriba: 359px;
izquierda: 397px;
}
* html #manejar {
ancho: 23px;
ancho: 15px;
altura: 10px;
altura: 2px;
}
#manejar {
tamaño de fuente: 1px; /* --- evita que div sea no */
altura de línea: 1px; /* -/ menor que 16px de altura en IE6 */
arriba: 331px;
izquierda: 416px;
ancho: 15px;
altura: 2px;
borde superior: 4px sólido #fda;
borde izquierdo: 4px sólido #ec9;
borde inferior: 4px sólido #b96;
borde derecho: 4px sólido #ca7;
color de fondo:#db8;
índice z: 3;
}
* html #handlebase {
ancho: 10px;
ancho: 2px;
altura: 23 píxeles;
altura: 15 px;
}
#base de mango {
tamaño de fuente: 1px; /* --- evita que div sea no */
altura de línea: 1px; /* -/ menor que 16px de altura en IE6 */
arriba: 327px;
izquierda: 433px;
ancho: 2px;
altura: 15 píxeles;
borde superior: 4px sólido #fda;
borde izquierdo: 4px sólido #ec9;
borde inferior: 4px sólido #b96;
borde derecho: 4px sólido #ca7;
color de fondo:#666;
índice z: 2;
}
* html #cuadro de texto {
ancho: 720 px;
ancho: 680 px;
}
#cuadro de texto {
arriba: 492px;
izquierda: 30px;
ancho: 680 px;
relleno: 20px;
altura:automático;
alineación de texto:centro;
borde: ninguno;
color de fondo: #eee;
}
</estilo>
</cabeza>
<cuerpo>
<div id="techo"></div>
<div id="techo2"></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="ladrillo1"></div>
<div id="ladrillo2"></div>
<div id="ladrillo3"></div>
<div id="ladrillo4"></div>
<div id="ladrillo5"></div>
<div id="ladrillo9"></div>
<div id="ladrillo10"></div>
<div id="ladrillo11"></div>
<div id="ladrillo12"></div>
<div id="ladrillo13"></div>
<div id="ladrillo14"></div>
<div id="ladrillo15"></div>
<div id="ladrillo16"></div>
<div id="ladrillo17"></div>
<div id="ladrillo18"></div>
<div id="ladrillo19"></div>
<div id="ladrillo20"></div>
<div id="ladrillo21"></div>
<div id="ladrillo22"></div>
<div id="ladrillo23"></div>
<div id="ladrillo24"></div>
<div id="ladrillo25"></div>
<div id="ladrillo26"></div>
<div id="ladrillo27"></div>
<div id="ladrillo28"></div>
<div id="ladrillo29"></div>
<div id="ladrillo30"></div>
<div id="ladrillo31"></div>
<div id="ladrillo32"></div>
<div id="brick33"></div>
<div id="ladrillo34"></div>
<div id="ladrillo35"></div>
<div id="ladrillo36"></div>
<div id="ladrillo37"></div>
<div id="ladrillo38"></div>
<div id="ladrillo39"></div>
<div id="ladrillo40"></div>
<div id="ladrillo41"></div>
<div id="ladrillo42"></div>
<div id="ladrillo43"></div>
<div id="ladrillo44"></div>
<div id="ladrillo45"></div>
<div id="ladrillo46"></div>
<div id="ladrillo47"></div>
<div id="ladrillo48"></div>
<div id="ladrillo49"></div>
<div id="ladrillo50"></div>
<div id="ladrillo51"></div>
<div id="ladrillo52"></div>
<div id="ladrillo53"></div>
<div id="ladrillo54"></div>
<div id="ladrillo55"></div>
<div id="ladrillo56"></div>
<div id="ladrillo57"></div>
<div id="ladrillo58"></div>
<div id="ladrillo59"></div>
<div id="ladrillo60"></div>
<div id="ladrillo61"></div>
<div id="ladrillo62"></div>
<div id="ladrillo63"></div>
<div id="ladrillo64"></div>
<div id="ladrillo65"></div>
<div id="ladrillo66"></div>
<div id="ladrillo67"></div>
<div id="ladrillo68"></div>
<div id="ladrillo69"></div>
<div id="ladrillo70"></div>
<div id="brick71"></div>
<div id="ladrillo72"></div>
<div id="ladrillo73"></div>
<div id="ladrillo74"></div>
<div id="ladrillo75"></div>
<div id="ladrillo76"></div>
<div id="ladrillo77"></div>
<div id="ladrillo78"></div>
<div id="ladrillo79"></div>
<div id="ladrillo80"></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="ladrillo90"></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="ladrillo99"></div>
<div id="ladrillo100"></div>
<div id="ladrillo101"></div>
<div id="exterior">
<div id="interior">
<p class="puerta">&nbsp;</p>
</div>
</div>
<div id="panel de puerta1"></div>
<div id="panel de puerta2"></div>
<div id="panel de puerta3"></div>
<div id="panel de puerta4"></div>
<div id="mango"></div>
<div id="handlebase"></div>
<div id="ventanaL"></div>
<div id="pane1L"></div>
<div id="pane2L"></div>
<div id="pane3L"></div>
<div id="ventanaR"></div>
<div id="pane1R"></div>
<div id="pane2R"></div>
<div id="pane3R"></div>
<div id="textbox"><b>Casa CSS</b> por <a href=" http://www.designdetector.com">Chris Hester</a> &middot; Vea mi <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a>
<br />
<br />Construido el 16 de octubre de 2003 &middot; Última actualización el 16 de marzo de 2006 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Comentarios</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Trackbacks</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">Acerca de</a></div >
</cuerpo>
</html>
Artículos relacionados