رضا کوهساری
پیش نیازهای این مقاله
مقدمه
این مقاله در پیرو دو مقاله قبل یعنی مقاله ترکیب تصاویر در CSS و مقاله ساخت لودینگ سفارشی در CSS است، که در این مقاله قصد داریم. قصد داریم با استفاده از زبان های HTML و CSS یک پروژه بازی حدس تصویر را پیاده سازی کنیم که این جور پروژه ها بیشتر جنبه سرگرمی دارن و میشود در وب سایت هایی که از نوع سرگرمی هستند استفاده شود.
شرح مسئله
در ابتدای کار شرحی از پروژه را با هم مرور میکنیم و بررسی میکنیم که قراره در این مقاله چه پروژه ای را پیاده سازی کنیم و در انتهای مقاله باید جه طرحی را در خروجی بدست بیاوریم.
در این پروژه ما قصد داریم که دو تصویر یکسان را در سایز های مختلف را در پروژه استفاده کنیم و سایز هر دو عکس را به یک اندازه تبدیل کنیم و در مرحله بعد بایدبا اعمال کردن دو قابلیت بر روی آنها پروژه را به حالتی که در تصویر مشاهده میکنید در بیاریم.
شروع کار
در شروع کار ما باید یک سند HTML در ویرایشگر خود بسازیم و در مرحله بعد در سند HTML خود کدهای مربوطه را پیاده سازی میکنیم. در این پروژه ما از دو تگ div که هر تگ div در برگیرنده دو تگ از نوع img هست استفاده میکنیم. در ابتدا میتوانید تصاویر استفاده شده در پروژه را در دو لینک زیر دانلود کنید
کدهای HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p_3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<img src="y_l.png">
</div>
<div class="box pixel">
<img src="y_s.png">
</div>
</body>
</html>
توضیح کد بالا
در این پروژه ما از دو تگ div به عنوان تگ های والد استفاده نموده که هر تگ div شامل یک تگ فرزند از نوع img است که دربرگیرنده تصاویر استفاده شده در پروژه است. تگ div اول در برگیرنده عکس اصلی با سایز بزرگ را نمایش میدهد و تگ div دوم در برگیرنده عکس دوم که نسبت به عکس اول سایز کوچکتری دارد را در بر میگیرد به عبارتی ساز هر کدام از عکس ها به شرح زیر است:
عکس اول ( عرض 400 و ارتفاع 557 )
عکس دوم ( عرض 40 و ارتفاع 56 )
پیاده سازی استایل های پروژه
حال که قالب بندی پروژه را به صورت کامل انجام دادیم نوبت به استایل دهی به پروژه میشود که این کار بر عهده CSS میباشد
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.box {
position: relative;
width: 400px;
height: 557px;
margin: 10px;
background: #000;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box.pixel img {
image-rendering: pixelated;
filter: contrast(150%);
}
توضیح کد بالا
margin فاصله های خارجی موجود در پروژه که به صورت پیشفرض بر روی پروژه اعمال میشود را از بین میبریم.
padding فاصله های داخلی موجود در پروژه که به صورت پیشفرض بر روی پروژه اعمال میشود را از بین میبریم.
box-sizing: border-box این قابلیت باعث میشود که با اعمال قابلیت هایی همچون padding تغییری در ابعاد تگ مربوطه ایجاد نشود.
display: flex باعث میشود که تگ های مربوطه در یک راستا در محور Xها قرار گیرند.
justify-content: center این قابلیت باعث میشود که تگ ها از نظر افقی وسط چین شوند.
align-items: center این قابلیت باعث میشود که تگ ها از نظر عمودی وسط چین شوند.
min-height: 100vh تمام ارتفاع نمایشگر را دربرگیرنده میگیرد.
position: relative زمانی از position: relative استفاده میکنیم که position تگ فرزند از نوع absolute باشد.
نکته : پس در پیاده سازی استایل های CSS هرگاه قصد داشتیم از position: absolute استفاده کنیم باید حتما position آن را از نوع relative قرار دهیم.
top تگ مربوطه را در position بالای تگ پدرش ( div ) قرار میدهد.
left تگ مربوطه را در position سمت چپ تگ پدرش ( div ) قرار میدهد.
width پهنای تگ مربوطه ( img ) را برابر 100% تگ پدرش قرار میدهد.
height ارتفاع تگ مربوطه ( img ) را برابر 100% تگ پدرش قرار میدهد.
object-fit: cover این قابلیت باعث میشود که تصویر مربوطه به صورت کامل بر روی تگ پدرش قرار گیرد و به قولی ابعاد تصویر را جمع و جور میکند.
image-rendering: pixelated این قابلیت باعث میشود که تصویر به حالت پیکسل مانند در بیاید.
filter: contrast(150%) باعث ایجاد تغییرات در میزان رنگ بندی تصویر میشود.
منبع : وب سایت آرتور - دوره جامع و پروژه محور CSS
تاکنون دیدگاهی ثبت نشده، اولین نفر باشید که دیدگاه ثبت می کند !
با دیدگاه های سازنده خود ما را در بهتر شدن همراهی کنید !
لینک کوتاه
https://b2n.ir/a25090
مقالات پیشنهادی
فرانت اند چیست؟
وقتی صحبت از زبان فرانت اند می شود؛اولین چیزی که به ذهنمان خطور ک...
Sass چیست؟
در این مقاله به بررسی کامل یکی دیگر از ابزارهای بسیار مهم و کاربر...
زبان جاوا اسکریپت چیست؟
زبان برنامه نویسی جاوا اسکریپت در کنار Html و CSS یک ضلع مثلث، تش...
UI و UX چیست؟
بدون شک اگر وارد حوزه برنامه نویسی شده باشید با مفاهیم بسیاری روب...
بازی حدس تصویر با CSS
در این مقاله آموزشی قصد داریم بازی حدس تصویر را پیاده سازی کنیم ک...