ساخت مسواک با html و css

ساخت مسواک با html و css

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

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

کد تمرین

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

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

		body {
			background: #efefef;
		}

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

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

		.toothbrush-base {
			width: 100%;
			display: block;
			height: 30px;
			border-radius: 10px;
			background: #4cd137;
			margin-top: -4px;
		}

		.toothbrush-brushs {
			width: 100px;
			height: 100%;
			float: right;
			margin-right: 20px;
		}

		.toothbrush-brushs div {
			width: 22%;
			border-top-right-radius: 15px;
			border-top-left-radius: 15px;
			display: inline-block;
			height: 30px;
		}

		.toothbrush-brushs div:nth-child(odd) {
			background: #d1d8e0;
		}

		.toothbrush-brushs div:nth-child(even) {
			background: #a5b1c2;
		}

		.toothbrush-dough {
			background: #45aaf2;
			width: 80px;
			height: 30px;
			float: right;
			margin-right: 30px;
			margin-bottom: 5px;
			border-top-left-radius: 25px;
			border-bottom-right-radius: 25px;
		}

		.clearfix {
			clear: both;
		}

		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="toothbrush">
		<div class="toothbrush-dough"></div>
		<div class="clearfix"></div>
		<div class="toothbrush-brushs">
			<div class="toothbrush-brushs-item"></div>
			<div class="toothbrush-brushs-item"></div>
			<div class="toothbrush-brushs-item"></div>
			<div class="toothbrush-brushs-item"></div>
		</div>
		<div class="clearfix"></div>
		<div class="toothbrush-base"></div>
	</div>

	<p>&copy; 2020 <a href="https://amirshnll.ir" title="Amir Shokri">Amir Shokri</a> | <a title="mailto" href="mailto:Amirsh.nll@gmail.com">Amirsh.nll@gmail.com</a></p>

</body>
</html>

توضیحات

در این مثال چند بخش داریم:
- toothbrush-dough.
- toothbrush-brushs.
  - toothbrush-brushs-item.
- toothbrush-base.
ساختار بالا شامل سه بخش dough و brushs و base است که معرف آن‌ها هستند.
در این مثال از css به صورت inline در کنار فایل html استفاده شده است.
بدنه‌ی مسواک سبز زنگ، برس‌های مسواک به صورت یکی در میان با کمک nth-child در css تیره و روشن است.
خمیر دندان به رنگ آبی فیروزه‌ای است و دو طرف آن گرد یا curve شده است.
برای گرد شدن بخش‌های مختلف از خاصیت borde-radius در css استفاده شده است.

اگر مثال‌های دیگری مد نظر دارید از بخش تماس با ما این مثال‌ها را به ما پیشنهاد دهید.

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]