طراحی آینه با HTML و CSS

ارسال شده توسط توسط مدیر سایت 2 دقیقه مطالعه
طراحی آینه با HTML و CSS
طراحی آینه با HTML و CSS

طراحی آینه با HTML و CSS

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

 

طراحی آینه با HTML و CSS

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

 

کد ساخت آینه

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

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
			background:#efefef;
		}

		* {
			box-sizing: border-box;
		}

		.mirror {
			width: 300px;
			margin: 100px auto;
		}

		.mirror-glass {
			width: 90%;
			height: 400px;
			padding: 25px 0;
		}

		.mirror-front {
			background:#fff;
			padding: 25px;
			width: 100%;
			height: 400px;
		}

		.mirror-base {
			width: 5%;
			background:#000;
			height: 470px;
			border-radius: 25px;

		}

		.float-right {
			float: right;
		}

		.float-left {
			float: left;
		}

		.clearfix {
			clear: both;
		}

		.bottom-base,
		.base-top {
			width: 100%;
			background:#000;
			height: 15px;
			border-radius: 25px;
			position: relative;
		}

		.bottom-base
		{
			top: -45px;
		}

		.base-top {
			top: 30px;
		}

		.copyright {
			letter-spacing: 3px;
			font-family: tahoma;
			font-size: 12px;
			text-align: center;
			font-weight: bold;
		}

		.copyright a {
			color: #000;
			text-decoration: none;
		}


	</style>
</head>
<body>

	<div class="mirror">

		<div class="base-top"></div>

		<div class="mirror-base float-right"></div>
		<div class="mirror-glass float-right">
			<div class="mirror-front"></div>
		</div>
		<div class="mirror-base float-right"></div>
		<div class="clearfix"></div>

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

	</div>

	<div class="copyright">
		<p>Example For Mirror in html+css by <a href="https://ashokri.com/blog">Amir Shokri</a> | <a href="https://camelCase.ir">camelCase.ir</a></p>
	</div>

</body>
</html>

 

توضیحات ساخت آینه

  • در این مثال چند بخش داریم‌:
    • mirror
      • base-top
      • mirror-base
      • mirror-glass
        • mirror-front
      • mirror-base
      • bottom-base
  • در این مثال از css به صورت inline در کنار فایل html استفاده شده است.
  • بوردرهای بیرونی از رنگ تیره ساخته شده است.
  • برای گرد شدن بخش‌های مختلف از خاصیت borde-radius در css استفاده شده است.

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

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