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); }