این مقاله در پیرو دو مقاله قبل یعنی مقاله ترکیب تصاویر در CSS و مقاله ساخت لودینگ سفارشی در CSS است، که در این مقاله قصد داریم. قصد داریم با استفاده از زبان های HTML و CSS یک پروژه بازی حدس تصویر را پیاده سازی کنیم که این جور پروژه ها بیشتر جنبه سرگرمی دارن و میشود در وب سایت هایی که از نوع سرگرمی هستند استفاده شود.
در ابتدای کار شرحی از پروژه را با هم مرور میکنیم و بررسی میکنیم که قراره در این مقاله چه پروژه ای را پیاده سازی کنیم و در انتهای مقاله باید جه طرحی را در خروجی بدست بیاوریم.
در این پروژه ما قصد داریم که دو تصویر یکسان را در سایز های مختلف را در پروژه استفاده کنیم و سایز هر دو عکس را به یک اندازه تبدیل کنیم و در مرحله بعد بایدبا اعمال کردن دو قابلیت بر روی آنها پروژه را به حالتی که در تصویر مشاهده میکنید در بیاریم.
در شروع کار ما باید یک سند HTML در ویرایشگر خود بسازیم و در مرحله بعد در سند HTML خود کدهای مربوطه را پیاده سازی میکنیم. در این پروژه ما از دو تگ div که هر تگ div در برگیرنده دو تگ از نوع img هست استفاده میکنیم. در ابتدا میتوانید تصاویر استفاده شده در پروژه را در دو لینک زیر دانلود کنید
<!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
در این مقاله به بررسی کامل یکی دیگر از ابزارهای بسیار مهم و کاربر...
در این مقاله به صورت کامل و مفصل درباره زبان برنامه نویسی html می...
در این مقاله آموزشی یک پروژه گرافیکی را با استفاده از HTML و CSS...
خیلی ها دغدغه سن خود را دارند و این که مدام بر این باور هستند که...
در این مقاله آموزشی قصد داریم بازی حدس تصویر را پیاده سازی کنیم ک...
آرتور در زمستان 1400 با هدف آموزش مهارت برنامه نویسی از سطح مقدماتی تا مرحله کسب درآمد، متناسب با نیاز بازار کار تشکیل گردیده است. وب سایت آرتور یک چارت آموزشی مخصوص به دوره های خود دارد که میتواند نقطه شروع شما را تعیین کند. با دوره های رایگان آرتور کار را شروع کنید و در صورت علاقه راه را ادامه دهید.
شما میتوانید با استفاده از یکی از راههای زیر با پشتیبانی ارتباط برقرار کنید
ایمیل: info@rtor.ir
تلگرام :rtor_dev@