Вже понад 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%);
}
Ось і все на сьогодні, дякуємо за увагу!
Потрібно більше інформації?
