Как добиться многоцветного фона только лишь с помощью 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%); }
Вот и все на сегодня, спасибо за внимание!
Последние посты
Как выбрать идеальный ноутбук: Полный гайд
Выбор ноутбука может быть сложной задачей в мире, где рынок переполнен вариантами на любой вкус… Читать далее
Томас Эдисон
Наша самая большая слабость заключается в том, что мы быстро сдаемся. Самый верный способ добиться… Читать далее
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее