وب سایت آموزشی آرتور

لینک با موفقیت کپی شد ! text-secondary text-decoration-none font-vs
صفحه اصلی آرشیو مقالات

آموزش بازی حدس تصویر با CSS

بازی حدس تصویر با CSS

مقاله آموزشی

آموزش پروژه محور CSS
رضا کوهساری

رضا کوهساری

خواندن این مقاله 15 دقیقه زمان می‌برد
 
پیش نیازهای این مقاله

دوره جامع و پروژه محور HTML

دوره جامع و پروژه محور CSS

 
مقدمه

این مقاله در پیرو دو مقاله قبل یعنی مقاله ترکیب تصاویر در 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

 


1459 بازدید 2 سال پیش این مقاله در سایت قرار گرفته
مقالات پیشنهادی

بوت استرپ ( Bootstrap ) چیست ؟

بوت استرپ ( Bootstrap ) چ...

بوت استرپ یک فریمورک ( چهار چوب ) رایگان و متن باز است که در سال...

Sass چیست؟

Sass چیست؟

در این مقاله به بررسی کامل یکی دیگر از ابزارهای بسیار مهم و کاربر...

اصطلاحات برنامه نویسی

اصطلاحات برنامه نویسی - ب...

شاید شمایی که الان دارید این مقاله را میخوانید علاقمند به دنیای ب...

جاوا اسکریپت چیست و چگونه کار می‌کند؟

زبان جاوا اسکریپت چیست؟

زبان برنامه نویسی جاوا اسکریپت در کنار Html و CSS یک ضلع مثلث، تش...

طراحی سایت

طراحی سایت خلاقانه

بدون شک زیبایی و رابط کاربری یک وب سایت نقش بسیار کلیدی در تبدیل...

درباره ما


آرتور در زمستان 1400 با هدف آموزش مهارت برنامه نویسی از سطح مقدماتی تا مرحله کسب درآمد، متناسب با نیاز بازار کار تشکیل گردیده است. وب سایت آرتور یک چارت آموزشی مخصوص به دوره های خود دارد که میتواند نقطه شروع شما را تعیین کند. با دوره های رایگان آرتور کار را شروع کنید و در صورت علاقه راه را ادامه دهید.

ارتباط با پشتیبانی


شما میتوانید با استفاده از یکی از راه‌های زیر با پشتیبانی ارتباط برقرار کنید

ایمیل: info@rtor.ir

تلگرام :rtor_dev@