Вже понад 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 зображення або ви можете змішувати і поєднувати будь-які з них.
Для прикладу будемо використовувати наступний 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 параметри градієнта.
Ось приклад з властивістю 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 різних фонових кольори, а також радіальний градієнт.
Тут ми використовуємо такі 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%); }
У цьому прикладі ми будемо використовувати просто 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%); }
Ось і все на сьогодні, дякуємо за увагу!
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…