Página Inicial>Tutorial de web design>Efeitos especiais da Web

Código CSS para mostrar os efeitos especiais de uma linda casa

Autor：Eve Cole Data da Última Atualização：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">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House (3D Border Demo 2) por Chris Hester</title>
<style type="texto/css">
/* Obrigado ao Big John pelos repetidos testes no IE5/Win! */
/* http://positioniseverything.net */
* {
família de fontes:Verdana, Arial, Helvetica, sans-serif;
tamanho da fonte: 12px;
altura da linha: 14px;
}
corpo {
margem:0;
preenchimento:0;
cor de fundo:#fff;
cor:#000; // para postar aqui: http://digg.com/design/CSS_House
}
/* define todas as divs como blocos para salvar o código. Substitua os valores posteriormente para quaisquer não-tijolos */
/* primeiro lide com o modelo de caixa quebrada do IE5. A regra abaixo funciona apenas para IE */
/* Veja http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
*div html {
largura:60px; /* Largura total da caixa (bordas + preenchimento + largura) para IE5/Win */
largura:52px; /* Outras versões do IE têm esta largura */
altura:26px; /* Altura total da caixa */
altura:18px;
}
/* Agora lide com todos os outros navegadores CSS */
div {
posição:absoluta;
largura:52px;
altura:18px;
margem:0;
preenchimento:0;
borda superior: 4px sólido #f00;
borda esquerda:4px sólido #e00;
borda inferior:4px sólido #b00;
borda direita:4px sólido #c00;
cor de fundo:#d00;
índice z:1;
}
* html #telhado {
largura:758px;
largura:500px;
altura:150px;
altura:50px;
}
#teto {
topo:4px;
esquerda:10px;
largura:500px;
altura:50px;
borda superior:0px sólido #fc0;
borda esquerda: 129px sólido #fff;
borda inferior:100px sólido #575;
borda direita: 129px sólido #fff;
cor de fundo:#fff;
}
*html #telhado2 {
largura:632px;
largura:374px;
altura:90px;
altura:40px;
}
#telhado2 {
topo: 14px;
esquerda:73px;
largura:374px;
altura:40px;
borda superior:0px sólido #fc0;
borda esquerda: 129px sólido #fff;
borda inferior:50px sólido #686;
borda direita: 129px sólido #fff;
cor de fundo:#fff;
índice z:2;
}
#tijolo1, #tijolo2, #tijolo3, #tijolo4, #tijolo5, #tijolo9, #tijolo10, #tijolo11, #tijolo12 {superior:180px;}
#brick1 {esquerda:30px;}
#brick2 {esquerda:90px;}
#brick3 {esquerda:150px;}
#brick4 {esquerda:210px;}
*html#brick5{
largura:240px;
largura:232px;
}
#brick5 {esquerda:270px; largura:232px;}
#brick9 {esquerda:510px;}
#brick10 {esquerda:570px;}
#brick11 {esquerda:630px;}
#brick12 {esquerda:690px;}
#tijolo13, #tijolo14, #tijolo15, #tijolo16, #tijolo17, #tijolo18 {top:206px;}
/* Lida com todos os meios tijolos de uma vez para 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 {
largura:30px;
largura:22px;
}
#brick13 { /* meio tijolo */
esquerda:30px;
largura:22px;
}
#tijolo14 {
esquerda:60px;
largura:172px;
}
#tijolo15 { /* meio tijolo */
esquerda:240px;
largura:22px;
}
#brick16 { /* meio tijolo */
esquerda:510px;
largura:22px;
}
#tijolo17 {
esquerda:540px;
largura:172px;
}
#brick18 { /* meio tijolo */
esquerda:720px;
largura:22px;
}
*html#tijolo14, *html#tijolo17{
largura:180px;
largura:172px;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;}
#brick19 {esquerda:30px;}
#brick20 {esquerda:210px;}
#brick21 {esquerda:510px;}
#brick22 {esquerda:690px;}
#tijolo23, #tijolo24, #tijolo25, #tijolo26, #tijolo27, #tijolo28, #tijolo29, #tijolo30 {
topo: 258px;
largura:22px;
}
#tijolo31, #tijolo32, #tijolo33, #tijolo34, #tijolo35, #tijolo36, #tijolo37, #tijolo38 {
topo:310px;
largura:22px;
}
#tijolo39, #tijolo41, #tijolo42, #tijolo44 {
topo:362px;
largura:22px;
}
#brick40, #brick43 {top:362px;}
#brick23, #brick31, #brick39 {esquerda:30px;}
#brick24, #brick32 {esquerda:60px;}
#brick25, #brick33 {esquerda:210px;}
#brick26, #brick34, #brick41 {esquerda:240px;}
#brick27, #brick35, #brick42 {esquerda:510px;}
#brick28, #brick36 {esquerda:540px;}
#brick29, #brick37 {esquerda:690px;}
#brick30, #brick38, #brick44 {esquerda:720px;}
#tijolo40 {
esquerda:60px;
largura:172px;
}
#tijolo43 {
esquerda:540px;
largura:172px;
}
*html#tijolo40, *html#tijolo43{
largura:180px;
largura:172px;
}
#brick45, #brick46, #brick47, #brick48 {top:284px;}
#brick49, #brick50, #brick51, #brick52 {top:336px;}
#brick45, #brick49 {esquerda:30px;}
#brick46, #brick50 {esquerda:210px;}
#brick47, #brick51 {esquerda:510px;}
#brick48, #brick52 {esquerda:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {top:388px;}
#brick53 {esquerda:30px;}
#brick54 {esquerda:90px;}
#brick55 {esquerda:150px;}
#brick56 {esquerda:210px;}
#brick57 {esquerda:510px;}
#brick58 {esquerda:570px;}
#brick59 {esquerda:630px;}
#brick60 {esquerda: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 {topo: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 { /* meio tijolo */
esquerda:30px;
largura:22px;
}
#brick62, #brick80, #brick93 {esquerda:60px;}
#brick63, #brick81, #brick94 {esquerda:120px;}
#brick64, #brick82, #brick95 {esquerda:180px;}
#brick65, #brick96 { /* meio tijolo */
esquerda:240px;
largura:22px;
}
#brick83 {esquerda:240px;}
#brick84 {esquerda:300px;}
#brick85 {esquerda:360px;}
#brick86 {esquerda:420px;}
#brick87 {esquerda:480px;}
#brick66, #brick97 { /* meio tijolo */
esquerda:510px;
largura:22px;
}
#brick67, #brick88, #brick98 {esquerda:540px;}
#brick68, #brick89, #brick99 {esquerda:600px;}
#brick69, #brick90, #brick100 {esquerda:660px;}
#brick70, #brick91, #brick101 { /* meio tijolo */
esquerda:720px;
largura:22px;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}
#brick71 {esquerda:30px;}
#brick72 {esquerda:90px;}
#brick73 {esquerda:150px;}
#brick74 {esquerda:210px;}
#brick75 {esquerda:510px;}
#brick76 {esquerda:570px;}
#brick77 {esquerda:630px;}
#brick78 {esquerda:690px;}
/* tijolos longos mais escuros + chaminés */
#tijolo5, #tijolo14, #tijolo17, #tijolo40, #tijolo43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
borda superior:4px sólido #d00;
borda esquerda:4px sólido #c00;
borda inferior:4px sólido #900;
borda direita:4px sólido #a00;
cor de fundo:#b00;
índice z:2;
}
#chbrick1, #chbrick2, #chbrick4 {esquerda:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {esquerda:539px;}
#chbrick3 {esquerda:209px;}
#chbrick7 {esquerda:569px;}
#chbrick1, #chbrick5 {top:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
topo:34px;
largura:22px;
}
#chbrick4, #chbrick8 {topo:60px;}
/* painéis de janela */
#painel1L, #painel2L, #painel3L, #painel1R, #painel2R, #painel3R {
preenchimento: 10px;
borda superior:4px sólido #a98;
borda esquerda:10px sólido #cba;
borda inferior:3px sólido #f3e3d3;
borda direita: 10px sólido #e9d8c7;
cor de fundo:#666;
índice z:3;
}
* html #painel1L, * html #painel1R {
largura: 108px;
largura:68px;
altura:29px;
altura:18px;
}
#painel1L {
topo: 238px;
esquerda:96px;
largura:68px;
altura:18px;
borda superior: 9px sólido #a98;
}
* html #pane2L, * html #pane2R {
largura:53px;
largura:19px;
altura:66px;
altura:36px;
}
#painel2L {
topo:291px;
esquerda:96px;
largura:19px;
altura:36px;
borda direita: 4px sólido #e9d8c7;
borda inferior: 6px sólido #f3e3d3;
}
* html #pane3L, * html #pane3R {
largura:52px;
largura:18px;
altura:66px;
altura:36px;
}
#painel3L {
topo:291px;
esquerda:152px;
largura: 18px;
altura:36px;
borda esquerda: 4px sólido #cba;
borda inferior: 6px sólido #f3e3d3;
}
#painel1R {
topo: 238px;
esquerda:576px;
largura:68px;
altura:18px;
borda superior: 9px sólido #a98;
}
#painel2R {
topo:291px;
esquerda:576px;
largura:19px;
altura:36px;
borda direita: 4px sólido #e9d8c7;
borda inferior: 6px sólido #f3e3d3;
}
#painel3R {
topo:291px;
esquerda:632px;
largura: 18px;
altura:36px;
borda esquerda: 4px sólido #cba;
borda inferior: 6px sólido #f3e3d3;
}
#janelaL, #janelaR {
topo: 232px;
largura:120px;
altura:130px;
fronteira:nenhuma;
cor de fundo:#fed;
índice z:2;
}
#windowR {esquerda:90px;}
#janelaL {esquerda:570px;}
* html p.porta {
largura:142px;
largura:102px;
altura:222px;
altura:187px;
}
p.porta {
largura:102px;
altura:187px;
margem:0;
preenchimento: 10px;
borda superior: 9px sólido #800;
borda direita:10px sólido #b00;
borda inferior:6px sólido #ccc;
borda esquerda:10px sólido #b00;
cor de fundo:#fed;
índice z:2;
}
*html #inner{
largura:182px;
largura:142px;
altura:250px;
altura:222px;
}
#interno {
posição:relativo;
largura:142px;
altura:222px;
preenchimento:0 0 10px 0;
borda superior:10px sólido #900;
borda esquerda: 20px sólido #c00;
borda inferior: 8px sólido #ccc;
borda direita: 20px sólido #c00;
cor de fundo:#888;
}
*html #externo{
largura:240px;
largura:182px;
altura:286px;
altura:250px;
}
#externo {
topo: 206px;
esquerda:270px;
largura:182px;
altura:250px;
preenchimento:0 0 12px 0;
borda superior:10px sólido #900;
borda esquerda: 29px sólido #d00;
borda inferior: 14px sólido #ccc;
borda direita: 29px sólido #d00;
cor de fundo:#888;
}
* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {
largura:39px;
largura:31px;
altura:68px;
altura:60px;
}
#vidraça1, #vidraça2, #vidraça3, #vidraça4 {
largura:31px;
altura:60px;
borda superior:4px sólido #a98;
borda esquerda: 4px sólido #cba;
borda inferior: 4px sólido #f3e3d3;
borda direita: 4px sólido #e9d8c7;
cor de fundo:#fed;
índice z:3;
}
#porta1 {
topo: 250px;
esquerda:344px;
}
#porta2 {
topo: 250px;
esquerda:397px;
}
#porta3 {
topo:359px;
esquerda:344px;
}
#porta4 {
topo:359px;
esquerda:397px;
}
*html#handle{
largura:23px;
largura:15px;
altura:10px;
altura:2px;
}
#lidar {
tamanho da fonte: 1px; /* --- impede que div seja não */
altura da linha: 1px; /* --/ menor que 16px de altura no IE6 */
topo:331px;
esquerda:416px;
largura: 15px;
altura:2px;
borda superior: 4px sólido #fda;
borda esquerda:4px sólido #ec9;
borda inferior:4px sólido #b96;
borda direita:4px sólido #ca7;
cor de fundo:#db8;
índice z:3;
}
*html #handlebase{
largura:10px;
largura:2px;
altura:23px;
altura:15px;
}
#handlebase {
tamanho da fonte: 1px; /* --- impede que div seja não */
altura da linha: 1px; /* --/ menor que 16px de altura no IE6 */
topo:327px;
esquerda:433px;
largura:2px;
altura:15px;
borda superior: 4px sólido #fda;
borda esquerda:4px sólido #ec9;
borda inferior:4px sólido #b96;
borda direita:4px sólido #ca7;
cor de fundo:#666;
índice z:2;
}
*html #caixadetexto{
largura:720px;
largura:680px;
}
#caixa de texto {
topo:492px;
esquerda:30px;
largura:680px;
preenchimento: 20px;
altura:automático;
alinhamento de texto:centro;
fronteira:nenhuma;
cor de fundo:#eee;
}
</estilo>
</head>
<corpo>
<div id="telhado"></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="externo">
<div id="interno">
<p class="porta">&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> por <a href=" http://www.designdetector.com">Chris Hester</a> &middot; Veja meu <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a>
<br />
<br />Construído em 16 de outubro de 2003 &middot; Última atualização em 16 de março de 2006 &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Comentários</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Trackbacks</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">Sobre</a></div >
</body>
</html>
Artigos Relacionados