Grafica si animatii din HTML si CSS. Tabla si hartie pe perete.

Tabla si hartie pe perete

Tevile si zona cu hartie reprezinta elementele ce m-au solicitat mai mult comparativ cu restul elementelor.

Tabla si hartie pe perete

HTML

<div class="wall">
	<div class="wall-layer">
		<div class="wall-layer-row">
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
		</div>
		<div class="wall-layer-row">
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
		</div>
		<div class="wall-layer-row">
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
			<div class="wall-layer-row-box">
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
				<div class="wall-layer-row-box-area-brik">
					<div class="wall-layer-row-box-brik"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="wall-layer">
		<div class="wall-layer-pipes">
			<div class="wall-layer-pipe-space-left">
				<div class="wall-layer-pipe-space-left-v1"></div>
				<div class="wall-layer-pipe-space-left-v2"></div>
				<div class="wall-layer-pipe-space-left-v3"></div>
				<div class="wall-layer-pipe-space-left-v4"></div>
				<div class="wall-layer-pipe-space-left-v5"></div>
			</div>
			<div class="wall-layer-pipe-space-top">
				<div class="wall-layer-pipe-space-top-left">
					<div class="wall-layer-pipe-space-top-v1"></div>
					<div class="wall-layer-pipe-space-top-v2"></div>
					<div class="wall-layer-pipe-space-top-v3"></div>
					<div class="wall-layer-pipe-space-top-v4"></div>
					<div class="wall-layer-pipe-space-top-v5"></div>
				</div>
				<div class="wall-layer-pipe-space-top-right">
					<div class="wall-layer-pipe-space-top-v1"></div>
					<div class="wall-layer-pipe-space-top-v2"></div>
					<div class="wall-layer-pipe-space-top-v3"></div>
					<div class="wall-layer-pipe-space-top-v4"></div>
					<div class="wall-layer-pipe-space-top-v5"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="wall-layer">
		<div class="wall-layer-half">
			<div class="wall-layer-half-inside">
				<div class="wall-layer-half-inside-paper">
					<div class="wall-layer-half-inside-paper-top">
						<div class="wall-layer-half-inside-paper-top1">
							<div class="wall-layer-half-inside-paper-top1-circle"></div>
						</div>
						<div class="wall-layer-half-inside-paper-top2">
							<div class="wall-layer-half-inside-paper-top2-line"></div>
						</div>
					</div>
					<div class="wall-layer-half-inside-paper-body">
						<div class="wall-layer-half-inside-paper-body-area">
							<div class="wall-layer-half-inside-paper-body-area-ui" contenteditable></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wall-layer-half">
			<div class="wall-layer-half-inside">
				<div class="wall-layer-half-inside-table">
					<div class="wall-layer-half-inside-table-code" contenteditable></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

	.wall-layer,
	.wall-layer-row,
	.wall-layer-pipes,
	.wall-layer-pipe-space-left,
	.wall-layer-pipe-space-top,
	.wall-layer-row-box,
	.wall-layer-row-box-area-brik,
	.wall-layer-half,
	.wall-layer-half-inside,
	.wall-layer-half-inside-paper-top1,
	.wall-layer-half-inside-paper-top2,
	.wall-layer-half-inside-table{
		display: flex;
	}
	.wall-layer-row-box{
		flex-direction: column;
	}
	.wall-layer-row-box{
		justify-content: space-between;
	}
	.wall-layer:nth-child(1),
	.wall-layer-row{
		justify-content: space-around;
	}
	.wall-layer-row-box-area-brik:nth-child(2n){
		justify-content: flex-end;
	}
	.wall-layer-half-inside,
	.wall-layer-half-inside-paper-top1,
	.wall-layer-half-inside-table{
		justify-content: center;
	}
	.wall-layer-pipe-space-top,
	.wall-layer-half-inside,
	.wall-layer-half-inside-paper-top1,
	.wall-layer-half-inside-paper-top2,
	.wall-layer-half-inside-table{
		align-items: center;
	}
	.wall-layer-half-inside-paper-top2{
		align-self: flex-end;
	}
	.wall,
	.wall-layer-half-inside-paper-top1,
	.wall-layer-half-inside-paper-top2{
		position: relative;
	}
	.wall-layer{
		position: absolute;
	}
	.wall-layer,
	.wall-layer-half-inside-paper-top2-line{
		width: 100%;
	}
	.wall-layer,
	.wall-layer-row-box,
	.wall-layer-pipes,
	.wall-layer-pipe-space-left,
	.wall-layer-pipe-space-top-left,
	.wall-layer-half,
	.wall-layer-half-inside-paper-body-area{
		height: 100%;
	}
	.wall-layer-pipe-space-left-v1,
	.wall-layer-pipe-space-top-v5{
		background: #6d6b5b;
	}
	.wall-layer-pipe-space-left-v2,
	.wall-layer-pipe-space-top-v4{
		background: #423d2d;
	}
	.wall-layer-pipe-space-left-v3,
	.wall-layer-pipe-space-top-v3{
		background: #7f8572;
	}
	.wall-layer-pipe-space-left-v4,
	.wall-layer-pipe-space-top-v2{
		background: #dbbb9e;
	}
	.wall-layer-pipe-space-left-v5,
	.wall-layer-pipe-space-top-v1{
		background: #7f8572;
	}
	.wall,
	.wall-layer-half-inside-paper-body-area-ui,
	.wall-layer-half-inside-table,
	.wall-layer-half-inside-table-code{
		overflow: auto;
	}
	.wall-layer-half-inside-paper-body-area-ui,
	.wall-layer-half-inside-table-code{
		outline: none;
	}
	.wall,
	.wall-layer-half-inside-paper-top,
	.wall-layer-half-inside-paper-top1{
		margin: auto;
	}
	.wall-layer-half-inside-table-code,
	.wall-layer-half-inside-table-code *{
		color: white;
	}
	.wall{
		width: 100%;
		min-width: 100px;
		max-width: 1000px;
		height: 600px;
		background: #512721;
	}
		.wall-layer{
			min-width: 800px;
			top: 0;
			left: 0;
		}
		.wall-layer:nth-child(1){
			flex-wrap: wrap;
			flex-direction: column;
		}
			.wall-layer-row{
				width: 100%;
				height: 150px;
				overflow: hidden;
			}
				.wall-layer-row-box{
					min-width: 90px;
					max-width: 120px;
					padding: 0 40px;
				}
					.wall-layer-row-box-area-brik{
						height: 20px;
					}
					.wall-layer-row-box-area-brik .wall-layer-row-box-brik{
						width: calc(100% - 30px);
						height: 100%;
						background: #88362a;
					}
					.wall-layer-row-box-area-brik:nth-child(2n) .wall-layer-row-box-brik{
						background: #bb5040;
					}
		.wall-layer:nth-child(2){
			justify-content: flex-end;
		}
			.wall-layer-pipes{
				width: calc(100% - 20px);
			}
				.wall-layer-pipe-space-left{
					width: 16px;
				}
					.wall-layer-pipe-space-left-v1{
						width: 2px;
					}
					.wall-layer-pipe-space-left-v2{
						width: 3px;
					}
					.wall-layer-pipe-space-left-v3{
						width: 5px;
					}
					.wall-layer-pipe-space-left-v4{
						width: 3px;
					}
					.wall-layer-pipe-space-left-v5{
						width: 3px;
					}
				.wall-layer-pipe-space-top{
					width: calc(100% - 16px);
					height: 26px;
					margin-top: 20px;
				}
					.wall-layer-pipe-space-top-left{
						width: 20px;
					}
					.wall-layer-pipe-space-top-left .wall-layer-pipe-space-top-v1{
						height: 5px;
					}
					.wall-layer-pipe-space-top-left .wall-layer-pipe-space-top-v2{
						height: 5px;
					}
					.wall-layer-pipe-space-top-left .wall-layer-pipe-space-top-v3{
						height: 6px;
					}
					.wall-layer-pipe-space-top-left .wall-layer-pipe-space-top-v4{
						height: 5px;
					}
					.wall-layer-pipe-space-top-left .wall-layer-pipe-space-top-v5{
						height: 5px;
					}
					.wall-layer-pipe-space-top-right{
						width: calc(100% - 20px);
						height: 16px;
					}
					.wall-layer-pipe-space-top-right .wall-layer-pipe-space-top-v1{
						height: 2px;
					}
					.wall-layer-pipe-space-top-right .wall-layer-pipe-space-top-v2{
						height: 3px;
					}
					.wall-layer-pipe-space-top-right .wall-layer-pipe-space-top-v3{
						height: 5px;
					}
					.wall-layer-pipe-space-top-right .wall-layer-pipe-space-top-v4{
						height: 3px;
					}
					.wall-layer-pipe-space-top-right .wall-layer-pipe-space-top-v5{
						height: 3px;
					}
		.wall-layer:nth-child(3){}
			.wall-layer-half{
				width: 50%;
			}
				.wall-layer-half-inside{
					width: calc(100% - 20px);
					height: calc(100% - 20px);
					padding: 10px;
				}
				.wall-layer-half-inside:nth-child(1){}
					.wall-layer-half-inside-paper,
					.wall-layer-half-inside-table{
						width: 100%;
						min-width: 200px;
						max-width: 380px;
						height: 100%;
						min-height: 200px;
						max-height: 450px;
					}
						.wall-layer-half-inside-paper-top{
							width: 120px;
							height: 60px;
						}
							.wall-layer-half-inside-paper-top1,
							.wall-layer-half-inside-paper-top2{
								border: 2px solid transparent;
								border-top-color: #d4d6cf;
								border-left-color: #5f6050;
								border-right-color: #d4d6cf;
								border-bottom-color: #616251;
							}
							.wall-layer-half-inside-paper-top1{
								width: 30px;
								height: 30px;
								background: #7f8673;
								border-radius: 5px;
								z-index: 1;
							}
								.wall-layer-half-inside-paper-top1-circle{
									width: 15px;
									height: 15px;
									background: white;
									border-radius: 50%;
									transform: rotate(-60deg);
									border: 1px solid transparent;
									border-top-color: #d4d6cf;
									border-left-color: #d4d6cf;
									border-right-color: #423d2e;
									border-bottom-color: #423d2e;
								}
							.wall-layer-half-inside-paper-top2{
								width: calc(100% - 4px);
								height: calc(100% - 20px);
								background: #7f8673;
								border: 2px solid transparent;
								border-top-color: #d4d6cf;
								border-left-color: #5f6050;
								border-right-color: #d4d6cf;
								border-bottom-color: #616251;
								margin-top: -17px;
							}
								.wall-layer-half-inside-paper-top2-line{
									height: 7px;
									background: #616251;
									margin-top: 10px;
								}
						.wall-layer-half-inside-paper-body{
							width: calc(100% - 40px - 4px);
							height: calc(100% - 40px - 4px - 30px);
							padding: 20px;
							border: 2px solid #f79453;
							background: #bd7850;
							margin-top: -30px;
						}
						.wall-layer-half-inside-paper-body:hover{
							box-shadow: -5px 5px 0 0 rgba(0,0,0,.3);
						}
							.wall-layer-half-inside-paper-body-area{
								background: #f4efe5;
								box-shadow: -5px 5px 0 rgba(0,0,0,0.3);
							}
								.wall-layer-half-inside-paper-body-area-ui{
									width: calc(100% - 40px);
									height: calc(100% - 40px);
									padding: 20px;
								}
				.wall-layer-half-inside:nth-child(2){}
					.wall-layer-half-inside-table{
						box-sizing: border-box;
						background: #bd7850;
						border: 2px solid transparent;
						border-top-color: #f79453;
						border-right-color: #f79453;
						border-left-color: #7d4a37;
						border-bottom-color: #7d4a37;
						resize: both;
					}
						.wall-layer-half-inside-table-code{
							width: calc(100% - 10px - 30px);
							height: calc(100% - 10px - 30px);
							padding: 5px;
							background: #2e292d;
							border: 1px solid transparent;
							border-top-color: #000;
							border-right-color: #000;
							border-left-color: #f79352;
							border-bottom-color: #f79352;
							font-family: monospace;
							tab-size: 2;
						}

Documentatie

Simulator de sistem de operare

Foloseste aceasta interfata grafica ce simuleaza un sistem de operare. Sper ca aplicatiile din acesta sa iti fie utile.