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

ارسال شده توسط توسط مدیر سایت 2 دقیقه مطالعه
ساخت چکش وکالت با html و css
ساخت چکش وکالت با html و css

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

یکی از تکنیک‌های جدید وب این است که به جای استفاده از تصاویر از svg یا المان‌هایی که با css ساخته می‌شود استفاده کنید تا حجم لود صفحات پایین بیاید. در این نوشته قصد آموزش ساخت یک ساخت چکش وکیل با html و 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 ایجاد شده است و می‌تواند تمرین خوبی برای رسم اشیاء دیگر شود.

 

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

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
برچسب: