جلسه ۱۵ – مثال های بیشتر پس زمینه در CSS

چطور رنگ پس زمینه را تغییر دهیم؟ چگونه تصویر برای پس زمینه قرار بدیم؟ مثال برای بک گراند چیا میتونیم بگیم؟ چند تا مثال واسه بک گراند!! در این مقاله با هم مثال های کاربردی در رابطه با پس زمینه ها را بررسی می‌کنیم.

یاد آوری مبحث پس زمینه

در جلسه قبل یعنی استایل background در CSS ، با هم مفاهیم اصلی پس زمینه رو یاد گرفتیم.

فهمیدیم که چطور پس زمینه رنگ یا تصویر قرار بدیم، چطور پس زمینه رو در راستا های مختلف تکرار کنیم، چطور سایز و اندازش رو تغییر بدیم و غیره!

تو این جلسه، با هم چند مثال کاربردی از مبحث پس زمینه یا همون background‌ رو بررسی می‌کنیم.

مثال هایی که بررسی می‌کنیم، دارای کد های خلاصه شده هستن، یعنی با کپی پیست کردن اون ها تو ادیتوراتون به نتیجه مطلوب نمی‌رسین. هدف از این مقاله، فقط بررسی نقش دستورات مربوط به پس زمینه تو مثال های مختلف هست و لازم نیست با کد هایی که براتون ابهام انگیزن، سر و کله بزنین 🙂

مثال ها

مثال ۰: پس زمینه تمام صفحه

تو این مثال، پس زمینه تمام صفحه رو بررسی می‌کنیم.

همونطور که از اسمش پیداست، پس زمینه ای هست که می‌تونه تمام صفحه ما رو پوشش بده.

به مثال زیر و کد اون توجه کنین:

body{
   background-image:url('town.jpg');
   background-size: cover;
}

همونطور که می‌بینین، پس زمینه مستقیما روی عنصر body تنظیم شده.

مثال ۱: پس زمینه فیکس شده

تو جلسه قبل، دیدیم که می‌تونیم با استفاده از خاصیتی به اسم background-attachment، پس زمینه هایی رو تنظیم کنیم که دارای ویژگی fixed هستن. یعنی چی؟

یعنی با اسکرول کردن سر جای خودشون می‌مونن و حرکت نمی‌کنن!

به مثال زیر توجه کنین:

همونطور که میبینیم، با یه وب سایتی روبرو هستیم که با اسکرول کردن به سمت پایین، عکس ما بالا نمیره.

این سبک از تصاویر پس زمینه به راحتی با کد HTML و CSS زیر امکان پذیره:

<header>
کد های مفصل مربوط به عناصر   
</header>

header{
   background-image: url('medical.jpg');
   background-attachment: fixed;
}

مثال ۲: پس زمینه شفاف

پس زمینه شفاف چیه؟ خیلی جا ها ما برای بهتر شدن رابط کاربری وب سایتمون، اقدام به دستکاری شفافیت قسمت های مختلف سایتمون می‌کنیم، جوری که معلوم باشه پشت سر اون قسمت چیه!

یکی از قسمت هایی که دستکاری شفافیت اون رو خوشگل می‌کنه، تصاویر پس زمینه وب سایتمونه. چجوری؟

به مثال زیر توجه کنین:

همونطور که تو مثال فوق میبینیم، تونستیم توسط یه پس زمینه شفاف، جلوه خوبی به وب سایتمون بدیم.

اگه پس زمینه خیلی زیاد شفاف باشه، عناصر form به سختی دیده می‌شن که اصلا به مذاق کاربر سایت خوش نمیاد!

اگه کاملا مات باشه و مشکی هم باشه، چندان تو دل برو نیست و سایت رو بد ترکیب می‌کنه.

برای ساختن پس زمینه شفاف بالا از کد HTML و CSS ساده زیر استفاده می‌شه:

<form>
   <input type="text" placeholder="Please enter your name...">
   <input type="password" placeholder="Please enter your password...">
   <input type="submit">
</form>

form{
   background-color: rgba(0,0,0,0.6);
}

مثال ۳: پس زمینه تاریک

حالا تو این مثال، می‌خوایم بررسی کنیم که چطور می‌تونیم یک پس زمینه تاریک برای عنصرمون تدارک ببینیم؟

به مثال زیر توجه کنین:

همونطور که میبینیم، با مثال قبل طرفیم، با این تفاوت که به جای تدارک دیدن یک پس زمینه شفاف و تیره برای form، مستقیما پس زمینه کلی رو تاریک کردیم.

اما این تاریک کردن به چه شکلی انجام شده؟

به کد HTML و CSS زیر توجه کنین:

<form>
   <input type="text" placeholder="Please enter your name...">
   <input type="password" placeholder="Please enter your password...">
   <input type="submit">
</form>

body{
   background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('sunset.jpg');
   background-size: cover;
   background-position: center;
}

اینجا کافیه از ترکیب دو مقدار linear-gradient و url استفاده کنیم.

نکته: ترکیب این دو، به صورت مستقیم و اصلی برای تاریک کردن عکس ها به کار نمیره، اما روش فرعی و فوق العاده‌ای هست که خیلی جا ها ممکنه به کارتون بیاد!

مثال ۴: پس زمینه پویا

تو این مثال، با استفاده از CSS animations، یه پس زمینه ی پویا طراحی کردیم که طی مدت زمان کوتاهی، رنگش رو تغییر میده.

dark

و جالبه بدونین که این ساده ترین مثال از پس زمینه های پویاست.

نتیجه گیری

خب، به انتهای این فصل رسیدیم، امیدوارم که بهره ی کافی رو برده باشید 🙂 در این فصل با پس زمینه (پیش زمینه یا Background) آشنا شدیم و مثال های کاربردی مختلفی را با همدیگه بررسی کردیم. جالبه بدونید در طراحی های امروزی در بیشتر مواقع از پس زمینه های خیلی ساده و با رنگ های Flat استفاده می‌شود و به جهت افزایش سرعت سایت سعی می‌شود کمترین حجم را برای صفحه ایجاد کنند.

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

مدیر محتوا: علی اسمعیلی / متخصص و برنامه نویس‌