2 راه برای ایجاد بخش های صفحه پس زمینه نیمه رنگی

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

طرح بندی های زیر را که با Bootstrap ساخته شده اند، در نظر بگیرید:

در اینجا ما سه بخش داریم:

• بخش اول و سوم شامل یک عنوان و چند متن ساختگی است.
• بخش دوم شامل سه کارت است.

آنچه می خواهیم این است که بسته به چیدمان، نیمی از پس زمینه قسمت دوم را رنگ آمیزی کنیم.

روش 1 - استفاده از گرادیان

سریعترین روش ایجاد یک پس زمینه رنگی تقسیم شده از طریق یک گرادیان خطی است. استایل زیر کافی است؛ تنها چیزی که نیاز داریم این است که بسته به طرح بندی، استاپ های رنگی درست را تنظیم کنیم (به طور پیش فرض، گرادیان های خطی از بالا به پایین اجرا می شوند):

1

/*CUSTOM VARIABLES HERE*/

2

3

.section-second {

4

    background: linear-gradient(var(--bg) 50%, transparent 50%);

5

}

در اینجا نحوه ظاهر اولین طرح ما با این تکنیک است:

و اینم مورد دوم:

روش 2 - استفاده از شبه عناصر

روش دیگر برای تقسیم رنگ پس زمینه یک بخش به دو رنگ، تعیین یک شبه عنصر و تنظیم ارتفاع آن برابر با ارتفاع نیم بخش است. سپس، بسته به جایی که می خواهیم آن را قرار دهیم، ارتفاع آن را به عنوان هر کدام قرار می دهیم top: 0 یا bottom: 0.

در زیر سبک هایی وجود دارد که پس از استفاده از تودرتوی CSS به آنها نیاز خواهیم داشت:

1

/*CUSTOM VARIABLES HERE*/

2

3

.section-second {

4

  position: relative;

5

6

  &::before {

7

    content: "";

8

    position: absolute;

9

    top: 0;

10

    /*bottom: 0;*/

11

    left: 0;

12

    right: 0;

13

    height: 50%;

14

    z-index: -1;

15

    background: var(--bg);

16

  }

17

}

در اینجا نحوه ظاهر اولین طرح ما با این تکنیک است:

و اینم مورد دوم:

نتیجه

در این آموزش کوتاه، دو روش آسان برای تقسیم عمودی پس زمینه یک صفحه به دو رنگ را مورد بحث قرار دادیم. بدیهی است که اگر بخواهید پس زمینه را به صورت افقی تغییر دهید، مفهوم یکسان باقی می ماند.

نکته آخر اینکه تمام دموهای این آموزش به مجموعه CodePen اضافه شده است. حتما آن را بررسی کنید و کمی به آن عشق بورزید!