طراحی کابینت با HTML و css

طراحی کابینت با HTML و css

یکی از تکنیک‌های جدید وب این است که به جای استفاده از تصاویر از svg یا المان‌هایی که با css ساخته می‌شود استفاده کنید تا حجم لود صفحات پایین بیاید. در این نوشته قصد آموزش ساخت یک کابینت ساده با کمک html و css را برای شما داریم. کابینت‌ها در صنعت طراحی داخلی از اهمیت بالایی برخودار هستند.

در این آموزش قصد داریم یک کابینت ساده به شکل بالا را با کمک html و css بسازیم.

کد تمرین

برای ساخت کابینت با کمک html و css از کد زیر استفاده کنید:

<!DOCTYPE html>
<html>
<head>
	<title>Cupboards with Html + CSS</title>
	<style type="text/css">

		body {
			background: #efefef;
		}

		.cupboards * {
			box-sizing: border-box;
		}

		.cupboards {
			width: 300px;
			margin:150px auto;
		}

		.cupboards-top {
			border:10px solid #4b4b4b;
			border-radius: 15px;
			padding: 20px 5px;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			width: 100%;
			margin: auto !important;
			background: #cd6133;
		}

		.cupboards-main {
			padding: 20px;
			border:10px solid #4b4b4b;
			height: 200px;
			width: 90%;
			margin: auto;
			border-top:0px;
			border-bottom:0px;
			background: #ff793f;
		}

		.cupboards-bottom {
			border:10px solid #4b4b4b;
			border-radius: 15px;
			padding: 20px 5px;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			width: 100%;
			margin: auto !important;
			background: #cd6133;
		}

		.cupboards-base-right {
			float: right;
			margin-right: 30px;
		}
		.cupboards-base-left {
			float: left;
			margin-left: 30px;
		}
		.cupboards-base-right , .cupboards-base-left {
			border:5px solid #4b4b4b;
			width: 15px;
			height: 15px;
			border-radius: 25px;
			border-top-right-radius: 0px;
			border-top-left-radius: 0px;
		}

		.cupboards-handle-right {
			float: right;
			margin-right: 50px;
		}
		.cupboards-handle-left {
			float: left;
			margin-left: 50px;
		}
		.cupboards-handle-right , .cupboards-handle-left {
			border:5px solid #4b4b4b;
			width: 30px;
			height: 100px;
			border-radius: 5px;
		}

		.cupboards-handle-point {
			background: #4b4b4b;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			margin:30px auto;
		}

		p {
			font-family: tahoma;
			font-size: 13px;
			letter-spacing: 5px;
			margin: auto;
			text-align: center;
		}

		a {
			color: #000;
			font-weight: bold;
			text-decoration: none;
		}

	</style>
</head>
<body>
	<div class="cupboards">
		<div class="cupboards-top"></div>
		<div class="cupboards-main">
			<div class="cupboards-handle-right">
				<div class="cupboards-handle-point"></div>
			</div>
			<div class="cupboards-handle-left">
				<div class="cupboards-handle-point"></div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="cupboards-bottom"></div>
		<div class="cupboards-base">
			<div class="cupboards-base-right"></div>
			<div class="cupboards-base-left"></div>
			<div class="clearfix"></div>
		</div>
	</div>
</body>
</html>

توضیحات ساخت کابینت

در این مثال چند بخش داریم‌:
- cupboards-top.
- cupboards-main.
  - cupboards-handle-right.
    - cupboards-handle-point.
  - cupboards-handle-left.
    - cupboards-handle-point.
- cupboards-bottom.
- cupboards-base.
  - cupboards-base-right.
  - cupboards-base-left.
ساختار بالا شامل سه بخش top و main و bottom و base است که معرف آن‌ها هستند.
در این مثال از css به صورت inline در کنار فایل html استفاده شده است.
بوردرهای بیرونی از رنگ تیره ساخته شده است.
بخش بالایی و پایینی کابینت رنگ نارنجی تیره‌تری دارد و داخل کابینت دارای رنگ نارنجی روشن‌تری است.
برای گرد شدن بخش‌های مختلف از خاصیت borde-radius در css استفاده شده است.