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