Як домогтися багатоколірного фону тільки за допомогою 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%); }
Ось і все на сьогодні, дякуємо за увагу!
This post was last modified on 10/11/2019 17:32
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…