CSS многоцветные фоны и градиент

Интерфейс дизайна Metro, созданный Microsoft с Windows 8 не получил достаточно положительных отзывов, возможно потому, что был сильно изменен UI из Windows 7, но он открыл двери для новой эры пользовательского интерфейса. Помимо введения прекрасной реализации плоского дизайна, тонкой типографии и экспансивных изображений, этот интерфейс привел к тому, что, как мне кажется, не хватало в традиционном дизайне Skeuomorph: использование более ярких красок.

После чего IOS и Android обновили свои дизайн стандарты, начиная с  IOS 7 и применением material design. Оба новых интерфейса взяли за основу плоский дизайн. Как IOS так и Android  стали использовать более яркие цвета и градиенты в своем дизайне, пользователи которых раньше не видели.

Итак, теперь, когда мы установили, что яркие цвета играют важную роль во всех современных проектах сегодня, давайте рассмотрим другую реализацию традиционного использования градиентов фона CSS.

В этой реализации мы будем использовать параметр color-stop в свойстве linear-gradient() (или radial-gradient ). Эти брейк-поинты задают, где вы хотите начать определенный цвет. В качестве шаблона для объекта мы будем использовать:

background: linear-gradient(, color1 color1-stop-at, color2 color2-start-at);

Простая логика заключается в том, что мы останавливаем первый цвет на x% и начинаем второй цвет с x% или <x%. Это удаляет градиент из линейного градиента и определяет четкий край между обоими цветами, придавая фону эффект разноцветных материалов.

background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

gradient

Выглядит красиво, не так ли? Добавьте в него текст, и он выглядит как красивый выделенный элемент. В приведенном выше примере добавлен некоторый дополнительный CSS-стиль (например, border-radius и box-shadow).
По сути, свойство background может содержать два содержания один над другим: 2 градиента, 2 изображения или вы можете смешивать и сопоставлять любые из них.
Чтобы использовать более двух цветов (потому что почему бы и нет), установите rgba () для использования 2 параметров градиента.
Вот пример, когда свойство фона содержит изображение и маскирует часть изображения с градиентом оранжевого и прозрачного.

CSS gradient

Пример кода для такого баннера:
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('planets.jpg');

Пробуйте, эксперементируйте. Надеюсь данная статья была для вас полезной

Summary
CSS многоцветные фоны и градиент
Article Name
CSS многоцветные фоны и градиент
Description
Итак, теперь, когда мы установили, что яркие цвета играют важную роль во всех современных проектах сегодня, давайте рассмотрим другую реализацию
Author

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *