Grafica si animatii din HTML si CSS. Vila de locuit.
Vila de locuit

Vila de locuit

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.

Vila de locuit

Vila de locuit

HTML
<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>
CSS
	.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);
								}

Grafica si animatii din HTML si CSS. Vila de locuit.