Grafica complicata din HTML si CSS pentru realizarea acestei vile. Imi amintesc ca mi-a luat doua zile realizarea ei. Reprezinta una din realizari grafice la care ma bucur mereu cand o revad.
<div class="house"> <div class="house-space"> <div class="house-space-content"> <div class="house-space-content-left"> <div class="house-space-content-left-graphics"> <div class="house-space-content-left-roof-floor"> <div class="house-space-content-left-roof"> <div class="house-space-content-left-roof1"></div> <div class="house-space-content-left-roof2"></div> <div class="house-space-content-left-roof3"></div> </div> <div class="house-space-content-left-floor"> <div class="house-space-content-left-floor-top"></div> <div class="house-space-content-left-floor-room"> <div class="house-space-content-left-floor-room-windows"> <div class="house-space-content-left-floor-room-window"> <div class="house-space-content-left-floor-room-window-glass"></div> </div> <div class="house-space-content-left-floor-room-window"> <div class="house-space-content-left-floor-room-window-glass"></div> </div> <div class="house-space-content-left-floor-room-window"> <div class="house-space-content-left-floor-room-window-glass"></div> </div> </div> </div> </div> </div> <div class="house-space-content-left-bars"> <div class="house-space-content-left-bars-vs"> <div class="house-space-content-left-bars-v"></div> <div class="house-space-content-left-bars-v"></div> <div class="house-space-content-left-bars-v"></div> <div class="house-space-content-left-bars-v"></div> </div> <div class="house-space-content-left-bars-hs"> <div class="house-space-content-left-bars-h"></div> <div class="house-space-content-left-bars-h"></div> <div class="house-space-content-left-bars-h"></div> </div> </div> </div> <div class="house-space-content-left-graphics"> <div class="house-space-content-left-roof"> <div class="house-space-content-left-roof1"></div> <div class="house-space-content-left-roof2"></div> <div class="house-space-content-left-roof3"></div> </div> <div class="house-space-content-left-floor-room-area"> <div class="house-space-content-left-floor-room-area-windows"> <div class="house-space-content-left-floor-room-area-window"></div> <div class="house-space-content-left-floor-room-area-window"></div> <div class="house-space-content-left-floor-room-area-window"></div> <div class="house-space-content-left-floor-room-area-window"></div> <div class="house-space-content-left-floor-room-area-window"></div> </div> <div class="house-space-content-left-floor-room-area-separator"></div> <div class="house-space-content-left-floor-room-furniture-doors"> <div class="house-space-content-left-floor-room-furniture"></div> <div class="house-space-content-left-floor-room-doors"> <div class="house-space-content-left-floor-room-door"></div> <div class="house-space-content-left-floor-room-door"></div> <div class="house-space-content-left-floor-room-door"></div> <div class="house-space-content-left-floor-room-door"></div> </div> </div> </div> <div class="house-space-content-left-floor-stairs"> <div class="house-space-content-left-floor-stair"></div> <div class="house-space-content-left-floor-stair"></div> <div class="house-space-content-left-floor-stair"></div> <div class="house-space-content-left-floor-stair"></div> </div> </div> </div> <div class="house-space-content-right"> <div class="house-space-content-right-content"> <div class="house-space-content-right-roof"></div> <div class="house-space-content-right-wall"> <div class="house-space-content-right-wall-top"></div> <div class="house-space-content-right-wall-solid"> <div class="house-space-content-right-wall-solid-door"> <div class="house-space-content-right-wall-solid-door-frame"> <div class="house-space-content-right-wall-solid-door-window1"></div> <div class="house-space-content-right-wall-solid-door-window2"></div> <div class="house-space-content-right-wall-solid-door-window3"></div> <div class="house-space-content-right-wall-solid-door-window4"></div> </div> </div> </div> <div class="house-space-content-line-thin"></div> <div class="house-space-content-line-big"></div> <div class="house-space-content-right-wall-solid"> <div class="house-space-content-right-wall-solid-door"> <div class="house-space-content-right-wall-solid-door-frame"> <div class="house-space-content-right-wall-solid-door-window5"></div> <div class="house-space-content-right-wall-solid-door-window6"></div> <div class="house-space-content-right-wall-solid-door-window7"></div> <div class="house-space-content-right-wall-solid-door-window8"></div> </div> </div> </div> <div class="house-space-content-stairs"> <div class="house-space-content-stair"></div> <div class="house-space-content-stair"></div> <div class="house-space-content-stair"></div> </div> </div> </div> </div> </div> </div> </div>
.house-space,
.house-space-content,
.house-space-content-left-floor-room-windows,
.house-space-content-left-bars-vs,
.house-space-content-left-floor-room-area-windows,
.house-space-content-left-floor-room-doors,
.house-space-content-right-wall-solid,
.house-space-content-right-wall-solid-door-frame,
.house-space-content-left-floor-stairs{
display: flex;
}
.house-space-content-left-floor,
.house-space-content-left-floor-room-area{
border-left: 4px solid #424646;
}
.house-space-content-left-floor-room-area,
.house-space-content-left-floor-room{
border-top: 4px solid #424646;
background: #946656;
}
.house{
width: 100%;
min-width: 100px;
max-width: 1000px;
background: #ea9f3a;
margin: auto;
z-index: 1;
}
.house:active{
transition: 1s;
filter: sepia(1);
}
.house-space{
padding: 10px;
box-sizing: border-box;
overflow: auto;
justify-content: center;
align-items: center;
z-index: 2;
}
.house-space-content{
width: 100%;
max-width: 600px;
position: relative;
z-index: 3;
}
.house-space-content-left{
width: 400px;
padding-top: 64px;
position: relative;
z-index: 4;
}
.house-space-content-left-graphics{
position: relative;
z-index: 5;
}
.house-space-content-left-graphics:after{
content: "";
width: 30px;
height: 100%;
background: rgba(0,0,0,.2);
filter: blur(2px);
position: absolute;
right: 0;
top: 0;
z-index: 11;
}
.house-space-content-left-roof-floor{
width: 100%;
z-index: 6;
}
.house-space-content-left-roof-floor:first-of-type{
width: 300px;
margin-left: 100px;
}
.house-space-content-left-roof{}
.house-space-content-left-roof2,
.house-space-content-left-roof3{
width: calc(100% - 5px);
margin-left: 5px;
}
.house-space-content-line-thin,
.house-space-content-left-roof1{
height: 2px;
background: #40423d;
border: 2px solid #584529;
border-right-width: 0;
}
.house-space-content-line-thin,
.house-space-content-left-roof1{
width: calc(100% - 2px);
}
.house-space-content-line-big,
.house-space-content-left-roof2{
height: 12px;
background: #224652;
}
.house-space-content-left-roof3{
height: 3px;
background: #304c56;
}
.house-space-content-left-floor{
width: calc(100% - 10px - 4px);
margin-left: 10px;
}
.house-space-content-left-floor-top{
height: 10px;
background: #63514c;
}
.house-space-content-left-floor-room{
padding-top: 12px;
}
.house-space-content-left-floor-room-windows{
width: 200px;
padding-left: 14px;
justify-content: space-between;
}
.house-space-content-left-floor-room-window{
width: calc(100% / 3 - 8px - 20px - 10px);
height: 100px;
border: 4px solid #424646;
border-bottom-width: 0;
padding: 10px 10px 0 10px;
background: #7c574d;
}
.house-space-content-left-floor-room-window-glass{
width: calc(100% - 4px);
height: calc(100% - 4px);
}
.house-space-content-right-wall-solid-door-window1,
.house-space-content-right-wall-solid-door-window2,
.house-space-content-right-wall-solid-door-window3,
.house-space-content-right-wall-solid-door-window4,
.house-space-content-right-wall-solid-door-window5,
.house-space-content-right-wall-solid-door-window6,
.house-space-content-right-wall-solid-door-window7,
.house-space-content-right-wall-solid-door-window8,
.house-space-content-left-floor-room-window-glass{
background: #b3dfe3;
border: 2px solid #6c7071;
overflow: hidden;
position: relative;
}
.house-space-content-left-floor-room-door:before,
.house-space-content-left-floor-room-door:after,
.house-space-content-left-floor-room-area-window:before,
.house-space-content-left-floor-room-area-window:after,
.house-space-content-left-floor-room-window-glass:before,
.house-space-content-left-floor-room-window-glass:after,
.house-space-content-right-wall-solid-door-window1:before,
.house-space-content-right-wall-solid-door-window1:after,
.house-space-content-right-wall-solid-door-window2:before,
.house-space-content-right-wall-solid-door-window2:after,
.house-space-content-right-wall-solid-door-window3:before,
.house-space-content-right-wall-solid-door-window3:after,
.house-space-content-right-wall-solid-door-window4:before,
.house-space-content-right-wall-solid-door-window4:after,
.house-space-content-right-wall-solid-door-window5:before,
.house-space-content-right-wall-solid-door-window5:after,
.house-space-content-right-wall-solid-door-window6:before,
.house-space-content-right-wall-solid-door-window6:after,
.house-space-content-right-wall-solid-door-window7:before,
.house-space-content-right-wall-solid-door-window7:after,
.house-space-content-right-wall-solid-door-window8:before,
.house-space-content-right-wall-solid-door-window8:after{
content: "";
height: 300px;
background: rgba(255,255,255,.7);
transform: rotate(25deg);
position: absolute;
left: 10px;
}
.house-space-content-right-wall-solid-door-window1:before,
.house-space-content-right-wall-solid-door-window2:before,
.house-space-content-right-wall-solid-door-window3:before,
.house-space-content-right-wall-solid-door-window4:before,
.house-space-content-right-wall-solid-door-window5:before,
.house-space-content-right-wall-solid-door-window6:before,
.house-space-content-right-wall-solid-door-window7:before,
.house-space-content-right-wall-solid-door-window8:before,
.house-space-content-left-floor-room-window-glass:before{
width: 7px;
top: -140px;
}
.house-space-content-right-wall-solid-door-window1:after,
.house-space-content-right-wall-solid-door-window2:after,
.house-space-content-right-wall-solid-door-window3:after,
.house-space-content-right-wall-solid-door-window4:after,
.house-space-content-right-wall-solid-door-window5:after,
.house-space-content-right-wall-solid-door-window6:after,
.house-space-content-right-wall-solid-door-window7:after,
.house-space-content-right-wall-solid-door-window8:after,
.house-space-content-left-floor-room-window-glass:after{
width: 12px;
top: -110px;
}
.house-space-content-left-bars{
width: 370px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
z-index: 7;
}
.house-space-content-left-bars-vs,
.house-space-content-left-bars-hs{
width: calc(100% - 6px);
height: 100%;
padding: 0 3px;
position: absolute;
}
.house-space-content-left-bars-vs{
justify-content: space-between;
}
.house-space-content-left-bars-v,
.house-space-content-left-bars-h{
background: #304853;
}
.house-space-content-left-bars-v{
width: 5px;
height: 100%;
}
.house-space-content-left-bars-hs{}
.house-space-content-left-bars-h{
height: 2px;
margin: 8px 0;
}
.house-space-content-left-bars-h:last-of-type{
margin-bottom: 0;
}
.house-space-content-left-graphics:nth-child(2){}
.house-space-content-left-floor-room-area{
width: calc(100% - 33px - 4px);
margin-left: 33px;
}
.house-space-content-left-floor-room-area-windows{
width: calc(100% - 20px);
padding: 10px;
justify-content: space-between;
}
.house-space-content-left-floor-room-area-window{
width: calc(100% / 5 - 4px - 5px);
height: 20px;
border: 2px solid #44413d;
background: #b3dfe3;
overflow: hidden;
position: relative;
}
.house-space-content-left-floor-room-area-window:before{
width: 7px;
top: -140px;
}
.house-space-content-left-floor-room-area-window:after{
width: 12px;
top: -110px;
}
.house-space-content-left-floor-room-area-separator,
.house-space-content-left-floor-room-doors{
width: calc(100% - 4px - 4px);
margin: auto;
}
.house-space-content-left-floor-room-area-separator{
height: 4px;
border: 2px solid #44413d;
}
.house-space-content-left-floor-room-furniture-doors{
height: 150px;
position: relative;
z-index: 6;
}
.house-space-content-left-floor-room-doors,
.house-space-content-left-floor-room-furniture{
width: calc(100% - 4px - 4px);
height: calc(100% - 4px - 4px);
padding: 2px;
margin: 2px;
position: absolute;
}
.house-space-content-left-floor-room-furniture{
background: rgba(0, 0, 0, .5);
z-index: 7;
}
.house-space-content-left-floor-room-doors{
justify-content: space-between;
z-index: 8;
}
.house-space-content-left-floor-room-door{
width: calc(100% / 4 - 4px);
height: calc(100% - 4px);
border: 2px solid #fff;
background: #b3dfe3;
overflow: hidden;
position: relative;
}
.house-space-content-left-floor-room-door:before{
width: 7px;
top: -50px;
}
.house-space-content-left-floor-room-door:after{
width: 12px;
top: -15px;
}
.house-space-content-left-floor-room-door:nth-child(2){
animation: house-space-content-left-floor-room-door2 3s alternate 2;
animation-delay: 2s;
left: 145px;
z-index: 10;
}
@keyframes house-space-content-left-floor-room-door2{
0%{
left: 145px;
}
70%{
left: 0;
}
100%{
left: 0;
}
}
.house-space-content-left-floor-room-door:nth-child(3){
animation: house-space-content-left-floor-room-door3 3s alternate 2;
animation-delay: 2s;
left: 75px;
z-index: 9;
}
@keyframes house-space-content-left-floor-room-door3{
0%{
left: 75px;
}
70%{
left: 0;
}
100%{
left: 0;
}
}
.house-space-content-left-floor-stairs{
justify-content: flex-end;
flex-wrap: wrap;
}
.house-space-content-left-floor-stair{
height: 7px;
border-top: 2px solid #424646;
border-left: 2px solid #424646;
background: #946656;
position: relative;
}
.house-space-content-left-floor-stair:nth-child(1){
width: calc(100% - 2px - 30px);
}
.house-space-content-left-floor-stair:nth-child(2){
width: calc(100% - 2px - 20px);
}
.house-space-content-left-floor-stair:nth-child(3){
width: calc(100% - 2px - 10px);
}
.house-space-content-left-floor-stair:nth-child(4){
width: calc(100% - 2px);
border-bottom: 2px solid #424646;
}
.house-space-content-left-floor-stair:after{
content: "";
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
right: 0;
}
.house-space-content-left-floor-stair:nth-child(1):after{
width: 40px;
}
.house-space-content-left-floor-stair:nth-child(2):after{
width: 60px;
}
.house-space-content-left-floor-stair:nth-child(3):after{
width: 80px;
}
.house-space-content-left-floor-stair:nth-child(4):after{
width: 100px;
}
.house-space-content-right{
min-width: 200px;
}
.house-space-content-right-content{
background: #9ca4a6;
}
.house-space-content-right-roof,
.house-space-content-right-wall,
.house-space-content-right-wall-top,
.house-space-content-right-wall-solid,
.house-space-content-right-wall-solid-door,
.house-space-content-stairs,
.house-space-content-stair{
border-color: #314242;
border-width: 2px;
}
.house-space-content-right-roof{
width: calc(100% - 4px + 8px);
height: 10px;
margin-left: -4px;
background: #9fa9ae;
border-style: solid;
}
.house-space-content-right-wall{}
.house-space-content-right-wall-solid,
.house-space-content-right-wall-top{
width: calc(100% - 4px);
}
.house-space-content-right-wall-solid,
.house-space-content-right-wall-top,
.house-space-content-stairs{
border-left-style: solid;
border-right-style: solid;
}
.house-space-content-right-wall-top{
height: 19px;
background: #cad3d3;
box-shadow: inset 0 14px 0 #97a5ad;
border-bottom-style: solid;
}
.house-space-content-right-wall-solid{
height: 200px;
justify-content: center;
align-items: flex-end;
}
.house-space-content-right-wall-solid:nth-child(2){
height: 190px;
}
.house-space-content-right-wall-solid-door{
width: 82px;
height: 120px;
padding: 4px 4px 0 4px;
background: #705b4d;
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
}
.house-space-content-right-wall-solid-door-frame{
width: calc(100% - 4px);
height: calc(100% - 2px);
border: 2px solid #5b4e42;
border-bottom-width: 0;
background: #6f6158;
flex-wrap: wrap;
}
.house-space-content-right-wall-solid-door-window1,
.house-space-content-right-wall-solid-door-window2,
.house-space-content-right-wall-solid-door-window3,
.house-space-content-right-wall-solid-door-window4,
.house-space-content-right-wall-solid-door-window5,
.house-space-content-right-wall-solid-door-window6,
.house-space-content-right-wall-solid-door-window7,
.house-space-content-right-wall-solid-door-window8{
margin: 5px;
}
.house-space-content-right-wall-solid-door-window1{
width: 10px;
height: 45px;
}
.house-space-content-right-wall-solid-door-window2{
width: 40px;
height: 45px;
}
.house-space-content-right-wall-solid-door-window3{
width: 10px;
height: 45px;
}
.house-space-content-right-wall-solid-door-window4{
width: 40px;
height: 45px;
}
.house-space-content-right-wall-solid-door-window5{
width: 30px;
height: 30px;
}
.house-space-content-right-wall-solid-door-window6{
width: 20px;
height: 30px;
}
.house-space-content-right-wall-solid-door-window7{
width: 30px;
height: 60px;
}
.house-space-content-right-wall-solid-door-window8{
width: 20px;
height: 60px;
}
.house-space-content-line-thin{}
.house-space-content-line-big{}
.house-space-content-stairs{
height: 30px;
background: #c8d0d3;
border-bottom-style: solid;
border-bottom-width: 15px;
border-top-style: solid;
}
.house-space-content-stair{
width: 100px;
height: 13px;
background: #c7d3d2;
border-style: solid;
margin: auto;
box-shadow: -30px -3px 5px rgba(0,0,0,.2);
}