Главная страница>Учебник по веб-дизайну>Веб-спецэффекты

CSS-код для демонстрации спецэффектов красивого дома

Автор：Eve Cole Время обновления：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">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House (демо-версия 3D Border 2), Крис Хестер</title>
<style type="text/css">
/* Спасибо Большому Джону за повторное тестирование в IE5/Win! */
/* http://positioniseeverything.net */
* {
семейство шрифтов: Verdana, Arial, Helvetica, без засечек;
размер шрифта: 12 пикселей;
высота строки: 14 пикселей;
}
тело {
маржа: 0;
дополнение: 0;
цвет фона: #fff;
цвет:#000; // разместить постер здесь: http://digg.com/design/CSS_House
}
/* определяем все элементы div как блоки для сохранения кода. Позже перезаписать значения для всех не-кирпичей */
/* сначала разберемся с неработающей коробчатой ​​моделью IE5. Приведенное ниже правило работает только для IE */
/* См. http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* HTML-див {
ширина: 60 ​​пикселей; /* Общая ширина поля (границы + отступы + ширина) для IE5/Win */
ширинаширина:52 пикселей; /* Другие версии IE имеют такую ​​ширину */
высота: 26 пикселей; /* Общая высота коробки */
высотавысота: 18 пикселей;
}
/* Теперь разберемся со всеми остальными CSS-браузерами */
дел {
позиция: абсолютная;
ширина: 52 пикселей;
высота: 18 пикселей;
маржа: 0;
дополнение: 0;
border-top:4px сплошной #f00;
левая граница: 4 пикселя сплошной #e00;
border-bottom: 4px сплошной #b00;
правая граница: 4 пикселя сплошной # c00;
цвет фона:#d00;
z-индекс: 1;
}
* html #крыша {
ширина: 758 пикселей;
ширинаидт: 500 пикселей;
высота: 150 пикселей;
высотавысота: 50 пикселей;
}
#крыша {
верх: 4 ​​пикселя;
слева: 10 пикселей;
ширина: 500 пикселей;
высота: 50 пикселей;
border-top:0px сплошной #fc0;
левая граница: 129 пикселей, сплошная #fff;
border-bottom:100px сплошной #575;
правая граница: 129 пикселей, сплошной #fff;
цвет фона: #fff;
}
* html #roof2 {
ширина: 632 пикселей;
ширина: 374 пикселей;
высота: 90 пикселей;
высотавысота: 40 пикселей;
}
#крыша2 {
верх: 14 пикселей;
слева: 73 пикселей;
ширина: 374 пикселей;
высота: 40 пикселей;
border-top:0px сплошной #fc0;
левая граница: 129 пикселей, сплошная #fff;
border-bottom:50px сплошной #686;
правая граница: 129 пикселей, сплошной #fff;
цвет фона: #fff;
z-индекс: 2;
}
#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;}
#brick1 {left:30px;}
#brick2 {слева:90 пикселей;}
#brick3 {слева: 150 пикселей;}
#brick4 {слева: 210 пикселей;}
* html #brick5 {
ширина: 240 пикселей;
ширинаидт: 232 пикселей;
}
#brick5 {слева: 270 пикселей; ширина: 232 пикселей;}
#brick9 {слева:510 пикселей;}
#brick10 {слева:570 пикселей;}
#brick11 {слева:630 пикселей;}
#brick12 {слева:690 пикселей;}
#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {top:206px;}
/* Обработка всех полукирпичей одновременно для 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 {
ширина: 30 пикселей;
ширинаширина: 22 пикселей;
}
#brick13 { /* полкирпича */
слева: 30 пикселей;
ширина: 22 пикселей;
}
#кирпич14 {
слева: 60 ​​пикселей;
ширина: 172 пикселей;
}
#brick15 { /* полкирпича */
слева: 240 пикселей;
ширина: 22 пикселей;
}
#brick16 { /* полкирпича */
слева: 510 пикселей;
ширина: 22 пикселей;
}
#кирпич17 {
слева: 540 пикселей;
ширина: 172 пикселей;
}
#brick18 { /* полкирпича */
слева: 720 пикселей;
ширина: 22 пикселей;
}
* html #brick14, * html #brick17 {
ширина: 180 пикселей;
ширинаидт: 172 пикселей;
}
#brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;}
#brick19 {слева:30 пикселей;}
#brick20 {слева:210 пикселей;}
#brick21 {слева:510 пикселей;}
#brick22 {слева:690 пикселей;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
верх: 258 пикселей;
ширина: 22 пикселей;
}
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
верх: 310 пикселей;
ширина: 22 пикселей;
}
#brick39, #brick41, #brick42, #brick44 {
верх: 362 пикселей;
ширина: 22 пикселей;
}
#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;}
#кирпич40 {
слева: 60 ​​пикселей;
ширина: 172 пикселей;
}
#кирпич43 {
слева: 540 пикселей;
ширина: 172 пикселей;
}
* html #brick40, * html #brick43 {
ширина: 180 пикселей;
ширинаидт: 172 пикселей;
}
#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 {слева:30 пикселей;}
#brick54 {слева:90 пикселей;}
#brick55 {слева: 150 пикселей;}
#brick56 {слева: 210 пикселей;}
#brick57 {слева:510 пикселей;}
#brick58 {слева: 570 пикселей;}
#brick59 {слева:630 пикселей;}
#brick60 {слева:690 пикселей;}
#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, # кирпич101 {вверх: 466 пикселей;}
#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 { /* полкирпича */
слева: 30 пикселей;
ширина: 22 пикселей;
}
#brick62, #brick80, #brick93 {left:60px;}
#brick63, #brick81, #brick94 {left:120px;}
#brick64, #brick82, #brick95 {left:180px;}
#brick65, #brick96 { /* полкирпича */
слева: 240 пикселей;
ширина: 22 пикселей;
}
#brick83 {слева: 240 пикселей;}
#brick84 {слева:300 пикселей;}
#brick85 {слева:360 пикселей;}
#brick86 {слева: 420 пикселей;}
#brick87 {слева: 480 пикселей;}
#brick66, #brick97 { /* полкирпича */
слева: 510 пикселей;
ширина: 22 пикселей;
}
#brick67, #brick88, #brick98 {left:540px;}
#brick68, #brick89, #brick99 {left:600px;}
#brick69, #brick90, #brick100 {left:660px;}
#brick70, #brick91, #brick101 { /* полкирпича */
слева: 720 пикселей;
ширина: 22 пикселей;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}
#brick71 {слева:30 пикселей;}
#brick72 {слева:90 пикселей;}
#brick73 {слева: 150 пикселей;}
#brick74 {слева: 210 пикселей;}
#brick75 {слева:510 пикселей;}
#brick76 {слева: 570 пикселей;}
#brick77 {слева:630 пикселей;}
#brick78 {слева:690 пикселей;}
/* темные длинные кирпичи + дымоходы */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
border-top:4px сплошной #d00;
левая граница: 4 пикселя сплошная # c00;
border-bottom:4px сплошной #900;
правая граница: 4 пикселя сплошной #a00;
цвет фона:#b00;
z-индекс: 2;
}
#chbrick1, #chbrick2, #chbrick4 {left:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {left:539px;}
#chbrick3 {слева: 209 пикселей;}
#chbrick7 {слева:569 пикселей;}
#chbrick1, #chbrick5 {top:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
верх: 34 пикселя;
ширина: 22 пикселей;
}
#chbrick4, #chbrick8 {top:60px;}
/* оконные панели */
#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {
отступ: 10 пикселей;
border-top:4px сплошной #a98;
граница слева: 10 пикселей сплошной #cba;
border-bottom: 3px сплошной #f3e3d3;
правая граница: 10 пикселей сплошная #e9d8c7;
цвет фона: #666;
z-индекс: 3;
}
* html #pane1L, * html #pane1R {
ширина: 108 пикселей;
ширина: 68 пикселей;
высота: 29 пикселей;
высотавысота: 18 пикселей;
}
#pane1L {
верх: 238 пикселей;
слева: 96 пикселей;
ширина: 68 пикселей;
высота: 18 пикселей;
border-top:9px сплошной #a98;
}
* html #pane2L, * html #pane2R {
ширина: 53 пикселей;
ширина ширина: 19 пикселей;
высота: 66 пикселей;
высотавысота: 36 пикселей;
}
#pane2L {
верх: 291 пикселей;
слева: 96 пикселей;
ширина: 19 пикселей;
высота: 36 пикселей;
правая граница: 4 пикселя сплошной #e9d8c7;
граница-дно: 6 пикселей сплошной #f3e3d3;
}
* html #pane3L, * html #pane3R {
ширина: 52 пикселей;
ширина ширина: 18 пикселей;
высота: 66 пикселей;
высотавысота: 36 пикселей;
}
#pane3L {
верх: 291 пикселей;
слева: 152 пикселей;
ширина: 18 пикселей;
высота: 36 пикселей;
левая граница: 4 пикселя сплошной #cba;
граница-дно: 6 пикселей сплошной #f3e3d3;
}
#pane1R {
верх: 238 пикселей;
слева: 576 пикселей;
ширина: 68 пикселей;
высота: 18 пикселей;
border-top:9px сплошной #a98;
}
#pane2R {
верх: 291 пикселей;
слева: 576 пикселей;
ширина: 19 пикселей;
высота: 36 пикселей;
правая граница: 4 пикселя сплошной #e9d8c7;
border-bottom: 6px сплошной #f3e3d3;
}
#pane3R {
верх: 291 пикселей;
слева: 632 пикселей;
ширина: 18 пикселей;
высота: 36 пикселей;
левая граница: 4 пикселя сплошной #cba;
граница-дно: 6 пикселей сплошной #f3e3d3;
}
#окноL, #windowR {
верх: 232 пикселя;
ширина: 120 пикселей;
высота: 130 пикселей;
граница: нет;
цвет фона:#fed;
z-индекс: 2;
}
#windowR {left:90px;}
#windowL {left:570px;}
* html p.door {
ширина: 142 пикселей;
ширинаидт: 102 пикселей;
высота: 222 пикселей;
высотавысота: 187 пикселей;
}
п.дверь {
ширина: 102 пикселей;
высота: 187 пикселей;
маржа: 0;
отступ: 10 пикселей;
border-top:9px сплошной #800;
правая граница: 10 пикселей сплошная #b00;
border-bottom:6px сплошной #ccc;
граница слева: 10 пикселей, сплошная #b00;
цвет фона:#fed;
z-индекс: 2;
}
* html #inner {
ширина: 182 пикселей;
ширинаидт: 142 пикселей;
высота: 250 пикселей;
высотавысота: 222 пикселей;
}
#внутренний {
положение: родственник;
ширина: 142 пикселей;
высота: 222 пикселей;
отступ: 0 0 10 пикселей 0;
border-top:10px сплошной #900;
граница слева: 20 пикселей, сплошной #c00;
border-bottom:8px сплошной #ccc;
правая граница: 20 пикселей сплошная # c00;
цвет фона: #888;
}
* html #outer {
ширина: 240 пикселей;
ширина ширина: 182 пикселей;
высота: 286 пикселей;
высотавысота: 250 пикселей;
}
#outer {
верх: 206 пикселей;
слева: 270 пикселей;
ширина: 182 пикселей;
высота: 250 пикселей;
отступ: 0 0 12 пикселей 0;
border-top:10px сплошной #900;
граница слева: 29 пикселей, сплошной #d00;
border-bottom:14px сплошной #ccc;
правая граница: 29 пикселей, сплошной #d00;
цвет фона: #888;
}
* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {
ширина: 39 пикселей;
ширина: 31 пиксель;
высота: 68 пикселей;
высотавысота:60 пикселей;
}
#doorpane1, #doorpane2, #doorpane3, #doorpane4 {
ширина: 31 пикселей;
высота: 60 ​​пикселей;
border-top:4px сплошной #a98;
левая граница: 4 пикселя сплошной #cba;
border-bottom: 4px сплошной #f3e3d3;
правая граница: 4 пикселя сплошной #e9d8c7;
цвет фона:#fed;
z-индекс: 3;
}
#doorpane1 {
верх: 250 пикселей;
слева: 344 пикселей;
}
#doorpane2 {
верх: 250 пикселей;
слева: 397 пикселей;
}
#doorpane3 {
верх: 359 пикселей;
слева: 344 пикселей;
}
#doorpane4 {
верх: 359 пикселей;
слева: 397 пикселей;
}
* html #handle {
ширина: 23 пикселя;
ширинаширина: 15 пикселей;
высота: 10 пикселей;
высотавысота:2px;
}
#ручка {
размер шрифта: 1 пиксель; /* --- останавливает div от отсутствия */
высота строки: 1 пиксель; /* -/ высота меньше 16 пикселей в IE6 */
верх: 331 пикселей;
слева: 416 пикселей;
ширина: 15 пикселей;
высота: 2 пикселя;
border-top: 4px сплошной #fda;
граница слева: 4 пикселя сплошной #ec9;
border-bottom:4px сплошной #b96;
правая граница: 4 пикселя сплошной #ca7;
цвет фона:#db8;
z-индекс: 3;
}
* html #handlebase {
ширина: 10 пикселей;
ширинаидт:2px;
высота: 23 пикселя;
высотавысота: 15 пикселей;
}
#handlebase {
размер шрифта: 1 пиксель; /* --- останавливает div от отсутствия */
высота строки: 1 пиксель; /* -/ высота меньше 16 пикселей в IE6 */
верх: 327 пикселей;
слева: 433 пикселей;
ширина: 2 пикселя;
высота: 15 пикселей;
border-top: 4px сплошной #fda;
граница слева: 4 пикселя сплошной #ec9;
border-bottom:4px сплошной #b96;
правая граница: 4 пикселя сплошной #ca7;
цвет фона: #666;
z-индекс: 2;
}
* html #textbox {
ширина: 720 пикселей;
ширина: 680 пикселей;
}
#текстовое поле {
верх: 492 пикселей;
слева: 30 пикселей;
ширина: 680 пикселей;
отступ: 20 пикселей;
высота: авто;
выравнивание текста: по центру;
граница: нет;
цвет фона:#eee;
}
</стиль>
</голова>
<тело>
<div id="крыша"></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="внешний">
<div id="внутренний">
<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> автор <a href=" http://www.designdetector.com">Крис Хестер</a> &middot; См. мой <a href=" http://www.designdetector.com/demos/css-house-2.html">CSS House 2</a>.
<br />
<br />Построен 16 октября 2003 г. &middot; Последнее обновление: 16 марта 2006 г. &middot; <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Комментарии</a > | <a href=" http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Обратные ссылки</a > | <a href=" http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">О программе</a></div >
</тело>
</html>
Связанные статьи