ساخت چکش وکالت با html و css

ساخت چکش وکالت با html و css

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

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

کد ساخت چکس وکیل با HTML

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

<!DOCTYPE html>
<html>
<head>
	<title>mace | www.camelCase.ir</title>

	<style type="text/css">

		.mace {
			transform: rotate(-45deg);
			width: 600px;
			margin: 200px auto 100px auto;
		}

		.mace-top {
			margin: auto;
		}

		.mace-top * {
			box-sizing: border-box;
			margin-right: 20px;
			padding: 20px;
		}

		.mace-top-left {
			background: #000;
			float: right;
			width: 50px;
			height: 200px;
			border-radius: 50px;
		}

		.mace-top-center {
			background: #000;
			float: right;
			width: 420px;
			height: 200px;
		}

		.mace-top-right {
			background: #000;
			float: right;
			width: 50px;
			height: 200px;
			border-radius: 50px;
		}

		.mace-center {
			width: 150px;
			height: 50px;
			margin:30px auto;
			background: #000;
		}

		.mace-bottom {
			width: 150px;
			height: 300px;
			margin:auto;
			border-bottom-left-radius: 100px;
			border-bottom-right-radius: 100px;
			background: #000;
		}

		.clear {
			clear: both;
		}

		p {
			text-align: center;
			font-size: 12px;
			font-family: tahoma;
			letter-spacing: 3px;
		}


	</style>
</head>
<body>

	<div class="mace">

		<div class="mace-top">
			<div class="mace-top-left"></div>
			<div class="mace-top-center"></div>
			<div class="mace-top-right"></div>
			<div class="clear"></div>
		</div>
		
		<div class="mace-center"></div>

		<div class="mace-bottom"></div>


	</div>

	<p>&copy; 2020; camelCase.ir | Amir Shokri</p>

</body>
</html>

توضیحات ساخت چکش وکیل

در این مثال چند بخش داریم‌:
- mace
- mace-top
  - mace-top-left
  - mace-top-center
  - mace-top-right
- mace-center
- mace-bottom
- clear
این مثال با کمک html و کدهای ساده‌ی css ایجاد شده است و می‌تواند تمرین خوبی برای رسم اشیاء دیگر شود.

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

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

[کل: 0 میانگین: 0]