Як домогтися багатоколірного фону тільки за допомогою 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%);
}

 

 

 

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

 

Recent Posts

Преміум та безкоштовні WordPress шаблони: що варто обрати саме вам?

Коли мова заходить про вибір ідеальної платформи для побудови сайту, багато людей, перш за все,… Read More

02/06/2021

Ошо

Вже пізно повертати назад, щоб все правильно почати, але ще не пізно рушити вперед, щоб… Read More

23/05/2021

Шпаргалка по часовим формам дієслова в англійській мові

В англійській мові дуже складна система часів (часові форми дієслова – Verb Tenses), яка відноситься… Read More

17/05/2021

Теорія кольору – поради для натхнення веб-дизайнерам

Ви коли-небудь замислювалися про те, як веб-дизайнери підбирають ідеальне поєднання кольорів? Цікавилися тим, які кольори… Read More

30/04/2021

Як стати фрілансером – дієві поради

Фріланс – це можливість спокійно і розмірено працювати вдома, не звертаючи увагу на навколишній простір,… Read More

27/04/2021

Найкрасивіші каньйони з усього світу (частина 1/2)

Протягом багатьох сотень тисяч, або навіть мільйонів років, швидка течія річок підточувала і вимивала скельні… Read More

27/04/2021