Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 04.07.2022)
36200
осіб
217
літаків
187
гелікоптерів
1589
танків
3754
ББМ
804
артилерія
105
ППО
246
РСЗВ
2629
машин
15
кораблі і катери
Як домогтися багатоколірного фону тільки за допомогою CSS

Як домогтися багатоколірного фону тільки за допомогою 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%. Це розмежовує лінійний градієнт і визначає чітку грань між обома кольорами, надаючи фонові ефект різнобарвного матеріалу.

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

Різнобарвний фон за допомогою CSS

 

 

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

По суті, властивість 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%);
}

 

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

Різнобарвний фон за допомогою CSS

 

 

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

 

 

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

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

Різнобарвний фон за допомогою CSS

 

Тут ми використовуємо такі 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

 

Тут ми використовуємо такі 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

 

Тут ми використовуємо такі 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%);
}

 

 

 

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.