Як домогтися багатоколірного фону тільки за допомогою CSS

Вже понад 5 років в веб-дизайні лідируючі позиції займає плаский дизайн (flat design). Після того, як в 2010 році корпорація Microsoft випустила ОС Windows 8, в якій користувацький інтерфейс витриманий в стилі плаского дизайну, цей дизайн почав стрімко набирати популярність. Flat design представлений у вигляді протилежності реалізму і, за задумом, повинен підкреслювати ефект «чарівної простоти» і витонченості. Крім цього плаский дизайн привніс барвистість в традиційний дизайн.

Сьогодні яскраві кольори відіграють основну роль у всіх сучасних проектах, тому давайте розглянемо одну популярну реалізацію такого підходу. В сьогоднішній статті ми розглянемо на практиці, як можна домогтися різнобарвного фону на прикладі плаского дизайну за допомогою лише CSS.

 

 

Ми будемо використовувати властивість linear-gradient() з акцентом на параметр color-stop у цій властивості. Цей параметр встановлює точки, в яких відбуваються зміни кольору. Нижче представлений синтаксис такої реалізації:

background: linear-gradient(<кут>, колір1 колір1-закінчується, колір2 колір2-починається);

 

Проста логіка полягає в тому, що ми зупиняємо перший колір на x% і починаємо другий колір на x% або <x%. Це розмежовує лінійний градієнт і визначає чітку грань між обома кольорами, надаючи фонові ефект різнобарвного матеріалу.

Ось приклад такого різнобарвного фону:

 

 

Виглядає красиво, чи не так? Додайте текст, і він буде виглядати як добре виділений елемент.

По суті, властивість background може містити два контента одне над іншим: 2 градієнта, 2 зображення або ви можете змішувати і поєднувати будь-які з них.

 

 

Приклад №1: Використовуємо 2 кольори для фону і текстовий блок

Для прикладу будемо використовувати наступний HTML-каркас:

<div class="cards">
 <div class="card-block">
  <div class="card card-one">
   <p>Silence<br> is golden</p>
  </div>
 </div>
</div>

 

Стилі CSS використовуємо наступні:

.card-block {width: 80%; margin: 2em auto;}
.card {
 color: #333;
 font-family: sans-serif;
 font-size: 3em;
 padding: 0.2em 1em;
 border-radius: 0.25em;
 display: block;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.card-one {
 background: -webkit-linear-gradient(50deg, #ff6f61 50%, #007cb7 40%);
 background: -o-linear-gradient(50deg, #ff6f61 50%, #007cb7 40%);
 background: -moz-linear-gradient(50deg, #ff6f61 50%, #007cb7 40%);
 background: linear-gradient(50deg, #ff6f61 50%, #007cb7 40%);
}

 

В результаті ми повинні отримати таку «картку» в стилі плаского дизайну:

 

 

Щоб використовувати більше 2 кольорів (чому б і ні), використовуйте потужності rgba() і використовуйте 2 параметри градієнта.

 

 

Приклад №2: Використовуємо зображення і колір для фону

Ось приклад з властивістю background, в якому міститься зображення і деяку частину зображення маскує помаранчевий градієнт:

 

Тут ми використовуємо такі CSS стилі:

.card-two {
 color: #fff;
 background: -webkit-linear-gradient(-50deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://picsum.photos/id/866/1200/700.jpg');
 background: -o-linear-gradient(-50deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://picsum.photos/id/866/1200/700.jpg');
 background: -moz-linear-gradient(-50deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://picsum.photos/id/866/1200/700.jpg');
 background: linear-gradient(-50deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://picsum.photos/id/866/1200/700.jpg');
 background-size: cover;
 background-position: 50% 60%;
 text-align: right;
}

 

 

 

Приклад №3: Використовуємо 3 різних кольори для фону

У цьому прикладі ми будемо використовувати 3 різних фонових кольори, а також радіальний градієнт.

 

Тут ми використовуємо такі CSS стилі:

.card-three {
 color: #fff;
 background: -o-linear-gradient(50deg, #49006d 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #a32857 70%, #ee6d8a 70%);
 background: -moz-linear-gradient(50deg, #49006d 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #a32857 70%, #ee6d8a 70%);
 background: linear-gradient(50deg, #49006d 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #a32857 70%, #ee6d8a 70%);
}

 

 

Приклад №4: Використовуємо 3 різних фонових кольори

У цьому прикладі ми будемо використовувати просто 3 різних фонових кольори.

 

Тут ми використовуємо такі CSS стилі:

.card-four {
 color: #fff;
 background: -webkit-linear-gradient(50deg, #184a45  30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #ff6f61 60%, #b5bab6 60%);
 background: -o-linear-gradient(50deg, #184a45  30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #ff6f61 60%, #b5bab6 60%);
 background: -moz-linear-gradient(50deg, #184a45  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #ff6f61 60%, #b5bab6 60%);
 background: linear-gradient(50deg, #184a45 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #ff6f61 60%, #b5bab6 60%);
}

 

 

 

Ось і все на сьогодні, дякуємо за увагу!