ساخت مسواک با html و css - آموزش برنامه نویسی فارسی

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

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

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

مسواک در مراقبت از دندان ها و نزد دندانپزشک ها اهمیت بالایی دارد.

با ما همراه باشید.

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

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

بدون حاشیه سراغ ادامه ی این آموزش می رویم.

کد ساخت مسواک با HTML

برای ساخت‌مسواک با کمک 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]