<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS House (3D Border Demo 2) by Chris Hester</title>

<style type="text/css">

/* Thanks to Big John for repeated testing in IE5/Win! */

/* [url]http://positioniseverything.net[/url] */

* {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

line-height:14px;

}

body {

margin:0;

padding:0;

background-color:#fff;

color:#000; // to please poster here: [url]http://digg.com/design/CSS_House[/url]

}

/* define all divs as bricks to save code. Overwrite values later for any non-bricks */

/* firstly deal with IE5's broken box model. The rule below works for IE only */

/* See [url]http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html[/url] */

* html div {

width:60px; /* Total box width (borders + padding + width) for IE5/Win */

w\idth:52px; /* Other versions of IE get this width */

height:26px; /* Total box height */

he\ight:18px;

}

/* Now deal with all other CSS browsers */

div {

position:absolute;

width:52px;

height:18px;

margin:0;

padding:0;

border-top:4px solid #f00;

border-left:4px solid #e00;

border-bottom:4px solid #b00;

border-right:4px solid #c00;

background-color:#d00;

z-index:1;

}

* html #roof {

width:758px;

w\idth:500px;

height:150px;

he\ight:50px;

}

#roof {

top:4px;

left:10px;

width:500px;

height:50px;

border-top:0px solid #fc0;

border-left:129px solid #fff;

border-bottom:100px solid #575;

border-right:129px solid #fff;

background-color:#fff;

}

* html #roof2 {

width:632px;

w\idth:374px;

height:90px;

he\ight:40px;

}

#roof2 {

top:14px;

left:73px;

width:374px;

height:40px;

border-top:0px solid #fc0;

border-left:129px solid #fff;

border-bottom:50px solid #686;

border-right:129px solid #fff;

background-color:#fff;

z-index:2;

}

#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;}

#brick1 {left:30px;}

#brick2 {left:90px;}

#brick3 {left:150px;}

#brick4 {left:210px;}

* html #brick5 {

width:240px;

w\idth:232px;

}

#brick5 {left:270px; width:232px;}

#brick9 {left:510px;}

#brick10 {left:570px;}

#brick11 {left:630px;}

#brick12 {left:690px;}

#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {top:206px;}

/* Deal with all half bricks at once for 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 {

width:30px;

w\idth:22px;

}

#brick13 { /* half-brick */

left:30px;

width:22px;

}

#brick14 {

left:60px;

width:172px;

}

#brick15 { /* half-brick */

left:240px;

width:22px;

}

#brick16 { /* half-brick */

left:510px;

width:22px;

}

#brick17 {

left:540px;

width:172px;

}

#brick18 { /* half-brick */

left:720px;

width:22px;

}

* html #brick14, * html #brick17 {

width:180px;

w\idth:172px;

}

#brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;}

#brick19 {left:30px;}

#brick20 {left:210px;}

#brick21 {left:510px;}

#brick22 {left:690px;}

#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {

top:258px;

width:22px;

}

#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {

top:310px;

width:22px;

}

#brick39, #brick41, #brick42, #brick44 {

top:362px;

width:22px;

}

#brick40, #brick43 {top:362px;}

#brick23, #brick31, #brick39 {left:30px;}

#brick24, #brick32 {left:60px;}

#brick25, #brick33 {left:210px;}

#brick26, #brick34, #brick41 {left:240px;}

#brick27, #brick35, #brick42 {left:510px;}

#brick28, #brick36 {left:540px;}

#brick29, #brick37 {left:690px;}

#brick30, #brick38, #brick44 {left:720px;}

#brick40 {

left:60px;

width:172px;

}

#brick43 {

left:540px;

width:172px;

}

* html #brick40, * html #brick43 {

width:180px;

w\idth:172px;

}

#brick45, #brick46, #brick47, #brick48 {top:284px;}

#brick49, #brick50, #brick51, #brick52 {top:336px;}

#brick45, #brick49 {left:30px;}

#brick46, #brick50 {left:210px;}

#brick47, #brick51 {left:510px;}

#brick48, #brick52 {left:690px;}

#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {top:388px;}

#brick53 {left:30px;}

#brick54 {left:90px;}

#brick55 {left:150px;}

#brick56 {left:210px;}

#brick57 {left:510px;}

#brick58 {left:570px;}

#brick59 {left:630px;}

#brick60 {left: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 { /* half-brick */

left:30px;

width:22px;

}

#brick62, #brick80, #brick93 {left:60px;}

#brick63, #brick81, #brick94 {left:120px;}

#brick64, #brick82, #brick95 {left:180px;}

#brick65, #brick96 { /* half-brick */

left:240px;

width:22px;

}

#brick83 {left:240px;}

#brick84 {left:300px;}

#brick85 {left:360px;}

#brick86 {left:420px;}

#brick87 {left:480px;}

#brick66, #brick97 { /* half-brick */

left:510px;

width:22px;

}

#brick67, #brick88, #brick98 {left:540px;}

#brick68, #brick89, #brick99 {left:600px;}

#brick69, #brick90, #brick100 {left:660px;}

#brick70, #brick91, #brick101 { /* half-brick */

left:720px;

width:22px;

}

#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}

#brick71 {left:30px;}

#brick72 {left:90px;}

#brick73 {left:150px;}

#brick74 {left:210px;}

#brick75 {left:510px;}

#brick76 {left:570px;}

#brick77 {left:630px;}

#brick78 {left:690px;}

/* darker long bricks + chimneys */

#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;

background-color:#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 {

top:34px;

width:22px;

}

#chbrick4, #chbrick8 {top:60px;}

/* window panes */

#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {

padding:10px;

border-top:4px solid #a98;

border-left:10px solid #cba;

border-bottom:3px solid #f3e3d3;

border-right:10px solid #e9d8c7;

background-color:#666;

z-index:3;

}

* html #pane1L, * html #pane1R {

width:108px;

w\idth:68px;

height:29px;

he\ight:18px;

}

#pane1L {

top:238px;

left:96px;

width:68px;

height:18px;

border-top:9px solid #a98;

}

* html #pane2L, * html #pane2R {

width:53px;

w\idth:19px;

height:66px;

he\ight:36px;

}

#pane2L {

top:291px;

left:96px;

width:19px;

height:36px;

border-right:4px solid #e9d8c7;

border-bottom:6px solid #f3e3d3;

}

* html #pane3L, * html #pane3R {

width:52px;

w\idth:18px;

height:66px;

he\ight:36px;

}

#pane3L {

top:291px;

left:152px;

width:18px;

height:36px;

border-left:4px solid #cba;

border-bottom:6px solid #f3e3d3;

}

#pane1R {

top:238px;

left:576px;

width:68px;

height:18px;

border-top:9px solid #a98;

}

#pane2R {

top:291px;

left:576px;

width:19px;

height:36px;

border-right:4px solid #e9d8c7;

border-bottom:6px solid #f3e3d3;

}

#pane3R {

top:291px;

left:632px;

width:18px;

height:36px;

border-left:4px solid #cba;

border-bottom:6px solid #f3e3d3;

}

#windowL, #windowR {

top:232px;

width:120px;

height:130px;

border:none;

background-color:#fed;

z-index:2;

}

#windowR {left:90px;}

#windowL {left:570px;}

* html p.door {

width:142px;

w\idth:102px;

height:222px;

he\ight:187px;

}

p.door {

width:102px;

height:187px;

margin:0;

padding:10px;

border-top:9px solid #800;

border-right:10px solid #b00;

border-bottom:6px solid #ccc;

border-left:10px solid #b00;

background-color:#fed;

z-index:2;

}

* html #inner {

width:182px;

w\idth:142px;

height:250px;

he\ight:222px;

}

#inner {

position:relative;

width:142px;

height:222px;

padding:0 0 10px 0;

border-top:10px solid #900;

border-left:20px solid #c00;

border-bottom:8px solid #ccc;

border-right:20px solid #c00;

background-color:#888;

}

* html #outer {

width:240px;

w\idth:182px;

height:286px;

he\ight:250px;

}

#outer {

top:206px;

left:270px;

width:182px;

height:250px;

padding:0 0 12px 0;

border-top:10px solid #900;

border-left:29px solid #d00;

border-bottom:14px solid #ccc;

border-right:29px solid #d00;

background-color:#888;

}

* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {

width:39px;

w\idth:31px;

height:68px;

he\ight:60px;

}

#doorpane1, #doorpane2, #doorpane3, #doorpane4 {

width:31px;

height:60px;

border-top:4px solid #a98;

border-left:4px solid #cba;

border-bottom:4px solid #f3e3d3;

border-right:4px solid #e9d8c7;

background-color:#fed;

z-index:3;

}

#doorpane1 {

top:250px;

left:344px;

}

#doorpane2 {

top:250px;

left:397px;

}

#doorpane3 {

top:359px;

left:344px;

}

#doorpane4 {

top:359px;

left:397px;

}

* html #handle {

width:23px;

w\idth:15px;

height:10px;

he\ight:2px;

}

#handle {

font-size:1px; /* ---\ stops div from being no */

line-height:1px; /* -/ smaller than 16px height in IE6 */

top:331px;

left:416px;

width:15px;

height:2px;

border-top:4px solid #fda;

border-left:4px solid #ec9;

border-bottom:4px solid #b96;

border-right:4px solid #ca7;

background-color:#db8;

z-index:3;

}

* html #handlebase {

width:10px;

w\idth:2px;

height:23px;

he\ight:15px;

}

#handlebase {

font-size:1px; /* ---\ stops div from being no */

line-height:1px; /* -/ smaller than 16px height in IE6 */

top:327px;

left:433px;

width:2px;

height:15px;

border-top:4px solid #fda;

border-left:4px solid #ec9;

border-bottom:4px solid #b96;

border-right:4px solid #ca7;

background-color:#666;

z-index:2;

}

* html #textbox {

width:720px;

w\idth:680px;

}

#textbox {

top:492px;

left:30px;

width:680px;

padding:20px;

height:auto;

text-align:center;

border:none;

background-color:#eee;

}

</style>

</head>

<body>

<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"> </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"></div>

</body>

</html>

CSS House的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. JVM程序计数器

    一.先来看看概念 多线程的Java应用程序:为了让每个线程正常工作就提出了程序计数器(Programe Counter Register),每个线程都有自己的程序计数器这样当线程执行切换的时候就可以在 ...

  2. Linux中MySQL忽略表中字段大小写

    linux 下,mysql 的表面默认是区分大小写的,windows 下默认不区分大小写,我们大多数在windows 下开发,之后迁移到linux(特别是带有Hibernate的工程),可以修改配置是 ...

  3. SQL Server 虚拟化（2）——理想的SQL Server虚拟机架构

    本文属于SQL Server虚拟化系列 搭建SQL Server虚拟机,在各个组织之间都有自己的标准和最佳实践.从第一眼看去,光物理配置就有过百种,所有的这些细微差别都有可能为后续日常管理过程中故障侦 ...

  4. Python强大的可变参数传递机制

    今天模拟定义map函数.写着写着就发现Python可变长度参数的机制真是灵活而强大. 假设有一个元组t,包含n个成员: t=(arg1,...,argn) 而一个函数f恰好能接受n个参数: f(arg ...

  5. android 自定义view之侧滑效果

    效果图: 看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来.但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高仿的. 知识点: 1.Vi ...

  6. Android简易实战教程--第四十七话《使用OKhttp回调方式获取网络信息》

    在之前的小案例中写过一篇使用HttpUrlConnection获取网络数据的例子.在OKhttp盛行的时代,当然要学会怎么使用它,本篇就对其基本使用做一个介绍,然后再使用它的接口回调的方式获取相同的数 ...

  7. oracle手工生成AWR报告方法记录

    AWR(Automatic Workload Repository)报告是我们进行日常数据库性能评定.问题SQL发现的重要手段.熟练掌握AWR报告,是做好开发.运维DBA工作的重要基本功. AWR报告 ...

  8. Low-rank approximations

    Low-rank approximations Give matrix and a positive integer , we wish to find an matrix of rank at mo ...

  9. 递归的神奇之处在于你会发现问题竟然解决了--解N皇后谜题有感

    看sicp看到8皇后谜题, 突然兴致来了,尝试独立解决(scheme代码的好处在于,即使你瞟了眼答案, 也不会有任何收获, 除了知道那儿有一坨神秘的括号和英文字符外但Python代码就不同了),成功了 ...

  10. Android捕获全局异常

    Android捕获全局异常 程序避免不了出现bug,导致程序崩溃,为了尽量不影响用户体验,可以全局捕获异常 效果图 异常捕获处理前 异常捕获处理后(将程序重新启动) 捕获异常的工具类 package ...