Редактор Wix: добавление цвета и градиента фона к вашим элементам | Справочный центр
Создавайте привлекательные красивые фоны для своих элементов с помощью сплошных цветов, градиентов или плавных градиентов.
Из этой статьи вы узнаете больше о:
Добавление сплошного цвета к фону
Применение одного цвета к фону. Выберите цвета темы вашего сайта, сохраненные цвета или добавьте новый.
Чтобы изменить цвет фона:
- Щелкните соответствующий элемент в Редакторе.
- Нажмите Изменить фон .
- Нажмите Цвет .
- Щелкните значок «Цвет» в верхней части палитры цветов и выберите один из следующих вариантов:
- Цвет темы: Это цвета, используемые в теме вашего сайта, которые можно автоматически применять к элементам на вашем сайте. Выберите цвет в разделе Theme Colors , чтобы применить его к фону.
Вы также можете изменить цвета темы, нажав Отредактируйте в правом верхнем углу панели. Узнать больше - Мои цвета: Это цвета, которые вы ранее добавили и сохранили на своем сайте. Щелкните цвет в разделе Мои цвета , чтобы применить его к фону.
- Выберите новый цвет: Нажмите +Добавить , чтобы выбрать новый цвет. После этого новый цвет будет доступен в разделе
- Цвет темы: Это цвета, используемые в теме вашего сайта, которые можно автоматически применять к элементам на вашем сайте. Выберите цвет в разделе Theme Colors , чтобы применить его к фону.
Вы также можете изменить цвета темы, нажав Отредактируйте в правом верхнем углу панели. Узнать большеДобавление градиента к фону
Градиенты — это увлекательный и увлекательный способ персонализировать элементы и сайт. Выберите эффект и отрегулируйте цвета и непрозрачность, чтобы привлечь внимание посетителей. Существует 3 типа фоновых градиентов:
- Линейный: Цвета в градиенте находятся на противоположных концах и сливаются вдоль невидимой линии.
- Радиальный: Цвета окружают друг друга и сливаются по радиусу.
- Коническая: Цвета в градиенте имеют повернутый переход вокруг центральной точки.
Чтобы добавить и настроить градиент:
- Щелкните соответствующий элемент в Редакторе.
- Нажмите Изменить фон .
- Нажмите Цвет .
- Щелкните значок «Градиент» в верхней части палитры цветов.
- Нажмите раскрывающееся меню и выберите тип градиента, который вы хотите применить.
- Настройте свой градиент, используя параметры:
- Линейный:
- Угол: Выберите угол градиента.
- Расположение цветов и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
- Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
- Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.
- Радиальный:
- Центральная точка: Установите центральную точку градиента.
- Расположение цветов и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
- Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
- Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.
- Коническая:
- Положение и вращение: Щелкните и перетащите внутренний круг центральной точки, чтобы изменить ее положение на фоне, и щелкните и перетащите внешний круг, чтобы изменить вращение перехода цвета.
- Расположение цветов и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
- Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
- Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.
- Линейный:
Добавление плавного градиента к фону
Создайте уникальный фон для своих элементов с помощью плавного градиента. В этих градиентах есть точки вдоль градиента с разными цветами, которые вы можете объединить так, как хотите.
В нижней части панели доступны пресеты для каждого типа градиента. Эти градиенты создаются с использованием цветов вашего сайта и могут быть настроены в соответствии с вашими потребностями.
Чтобы добавить и отредактировать градиент жидкости:
- Щелкните соответствующий элемент в Редакторе.
- Нажмите Изменить фон .
- Нажмите Цвет .
- Щелкните значок «Жидкий градиент» в верхней части палитры цветов.
- Настройте свой градиент, используя параметры:
- Позиция: Измените положение каждого цвета в градиенте.
- Настройка цветов и непрозрачности: Измените цвет и используйте ползунок, чтобы увеличить или уменьшить непрозрачность.
- Размер: Установите размер цветов в градиенте.
- Распространение: Установите, насколько каждый цвет распространяется по градиенту.
- Цвет за градиентом: Выберите цвет для отображения за градиентом.
- Добавить новый цвет: Щелкните в любом месте предварительного просмотра, где еще нет цветной точки, чтобы добавить и настроить новый цвет. Совет: Вы можете добавить столько цветов, сколько хотите, поэтому нет ограничений на то, сколько вы можете настроить градиент.
- Позиция: Измените положение каждого цвета в градиенте.
Применение градиентов к фону видео или изображений
Если у вашего элемента есть фоновое изображение или видео, вы также можете добавить к нему эффект градиента.
Просто выберите видео или изображение в качестве фона, затем отрегулируйте непрозрачность градиента.
Чтобы применить градиенты к фону мультимедиа:
- Щелкните соответствующий элемент в Редакторе.
- Нажмите Изменить фон .
- Нажмите Настройки .
- Щелкните поле цвета рядом с Цвет позади видео / изображение .
- Создайте и добавьте градиент.
- Нажмите X в верхней части палитры цветов/градиентов, чтобы закрыть ее.
- Перетащите ползунок под Непрозрачность изображения / Непрозрачность видео , чтобы сделать градиент фона настолько видимым, насколько вы хотите.
Градиенты попутного ветра — Как сделать светящийся градиентный фон
Градиенты стали чрезвычайно популярны в Интернете. На самом деле, необычно видеть веб-сайт продукта без градиента, который добавляет всплеск цвета и контрастирует со всем негативным пространством.
Тонкость может иметь большое значение — и в этой короткой статье я покажу вам, как добиться мощного эффекта светящегося градиента с помощью Tailwind.
Вот что мы будем создавать:
Tailwind CSS Gradients
Прежде чем мы углубимся в реализацию, важно понять, как градиенты работают в Tailwind. Tailwind добавил поддержку градиентов во втором основном выпуске, предоставив несколько новых служебных классов для добавления цветовых точек для получения градиентного фона на элементе.
В очень простом линейном примере вы должны определить начальный и конечный цвета, используя соответственно утилиты from-{color} и to-{color}. Вот пример.
<дел>
Определение направления градиента
Возможно, вы заметили дополнительный служебный класс в приведенном выше примере (bg-gradient-to-r). В дополнение к точкам цвета важно определить направление линейного градиента на целевом элементе.
Существует несколько служебных классов для определения направления градиента попутного ветра:
Также стоит отметить, что вы можете применять направление и цвет градиента условно.
Например, если вы хотите изменить направление градиента при наведении на элемент, вы можете использовать следующие служебные классы:
Попутный градиент с более чем двумя точками цвета
Можно добавить дополнительную точку цвета к линейным градиентам попутного ветра. Этого можно добиться с помощью утилит via-{color}. Элементы, к которым применена эта утилита, будут плавно исчезать между первой, второй и конечной точками цвета.
Настройка среды для создания светящегося градиента
Теперь, когда у нас есть общее представление о том, как Tailwind обрабатывает градиенты, мы можем заняться реализацией. Если вы хотите добавить этот эффект светящегося градиента в сторонний проект, скорее всего, у вас уже есть готовый репозиторий React, Vue или Angular. Если вы не установили Tailwind в выбранной вами среде, ознакомьтесь с официальными руководствами по раскрутке здесь, официальными руководствами по раскрутке здесь.
Если вы просто экспериментируете и хотите попробовать что-то новое, у команды Tailwind есть собственный веб-редактор с настроенной и готовой к работе библиотекой. Я рекомендую попробовать Tailwind PlayTailwind Play и следовать этому руководству. CodePenCodePen — еще один отличный вариант.
Создание фона и ограничений с помощью Tailwind CSS
Прежде чем мы начнем работать с картой и светящимся градиентом, давайте создадим фон и добавим некоторые ограничения ширины, чтобы карта не занимала весь экран. Вы можете настроить это под свои нужды. Код ниже добавляет тонкий серый фон, использует Flexbox для центрирования дочернего элемента div и применяет максимальную ширину.
Для будущих шагов вся разметка будет заключена в эти два элемента контейнера div.
50 9273 Создание карт с помощью Basic Utility 9
Затем создайте элемент div, представляющий саму карту.
Примените отступы по осям X и Y, сделайте фон белым, скруглите углы и примените несколько служебных классов Flexbox для того, что будет дальше.
Добавить содержимое карты
Теперь, когда контейнер карты установлен, мы можем заполнить его некоторым содержимым. В созданном мной примере используется значок слева и информация о карте справа.
Задайте размер значка и при необходимости добавьте цвет с помощью служебного класса text-{color}.
Фактическое текстовое содержимое карты помещается в содержащий div , освобождаясь от гибкого макета родителя и возвращая его к отображаемому значению по умолчанию блока.
К содержащему элементу div применена утилита space-y-2, которая добавит отступ между дочерними элементами, создав небольшое свободное пространство.
5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75h25.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L16 14.75L19.25V6.75Z">
👉
ПРИМЕЧАНИЕ. Контейнер карточек не обязательно должен быть гибким элементом, если вы не хотите, чтобы содержимое располагалось рядом.
Теперь, когда все готово, мы готовы добавить градиент!0003
Создать светящийся градиент невероятно просто. На самом деле нам нужен только один дополнительный элемент.
Внутри первого div-контейнера, используемого для применения максимальной ширины, создайте дополнительный div на том же уровне иерархии, что и div, используемый для карты. Примените к новому элементу следующие имена классов:
5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75h25.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z">
Волшебство происходит с служебным классом -inset-1, который предоставляет Tailwind, привязывая абсолютно позиционированные элементы к краям ближайшего позиционированного родителя. Поскольку служебный класс вставки имеет префикс с отрицательным значением, элемент будет расположен за пределами верхней, правой, левой и нижней части родительского элемента.
Конечно, поскольку мы не установили точку отсчета для этого элемента, это не дает нам ожидаемого результата. Чтобы это исправить, добавьте относительный класс в родительский div.
5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75х25.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 64.75L12 14.75 19.25V6.75Z">
Не стесняйтесь настраивать цвета градиента, направление градиента, размытие и прозрачность по вашему вкусу!
Реализация состояния Gradient Hover в Tailwind с помощью Group Utility и модификатора Hover
В текущем состоянии градиент заметен за картой, но может быть неплохо увеличить непрозрачность градиента, когда пользователь наводит курсор на карта. К счастью, Tailwind упрощает эту задачу с помощью модификатора наведения.
Традиционно модификатор наведения активируется, когда ваша мышь накладывается на элемент. Однако что, если мы хотим, чтобы наш градиент менялся, когда указатель мыши находится над любой частью карты, а не только над градиентом?
Здесь в игру вступает групповой служебный класс.
Вспомогательный класс группы Tailwind позволяет применять стили на основе состояния некоторого родительского элемента. Целевой элемент можно изменить с помощью утилиты group-{modifier}.
В нашем примере мы хотим применить класс группы к div родительской карты, а затем установить модификатор group-hover:opacity-100 на самом градиенте.
Теперь при наведении курсора мыши на любую часть карты , непрозрачность градиента увеличится до 100%. Однако эффект немного раздражает — давайте добавим хороший переход, чтобы непрозрачность постепенно увеличивалась и уменьшалась.