Понимание относительных цветов в веб -дизайне

В веб -дизайне даже самые простые решения могут размножаться. То, что начинается как единственный выбор дизайна, быстро расширяется в десятки визуальных вариаций для взаимодействия, фонов, границ и многого другого. Ваша сборка может быть загромождена несоответствующими ценностями и ручными изменениями без согласованной системы.

Относительный синтаксис цвета в CSS предлагает более умный, более масштабируемый подход. Это позволяет вам определять визуальные вариации на основе одного источника, сохраняя ваш дизайн сплоченным и простым в управлении. Обычно это требует написания пользовательского кода. Но с Divi 5 вы можете использовать эти современные методы визуально, с самого начала. Давайте поближе посмотрим.

Проблемы управления общим цветом

Этот идеальный цвет бренда, который вы выбираете, может быстро умножить на десятки вариаций, разбросанных по вашему сайту. Вот некоторые проблемы, которые способствуют этой проблеме:

Управление вариациями для одного цвета

Вы начинаете с одного базового синего и быстро нуждаются в десятках вариаций. Сборщик цветового застройщика вашей страницы становится беспорядком. Светло -голубой, более светлый синий, темно -синий, темно -синий, блеклый синий - каждый из них сохраняется как отдельный цвет.

Ваш бренд синий охватывает двадцать разных оттенков на вашем сайте. В некоторых разделах используется оригинальная синяя, другие используют более легкую версию, которую вы сделали три недели назад, а ваши кнопки используют тот более темный оттенок, который вы сделали для лучшего контраста.

Ни один из этих цветов не соединяется с другими. Когда ваш клиент хочет фиолетового вместо синего, вы сталкиваетесь с обновлением каждого цвета вручную. Вы потратите часы, щелкнув по модулям. Вы охотитесь на каждый оттенок. Вы надеетесь, что вы не пропустите.

Коллекция из многих похожих синих оттенков слева превращается в рассеянные, не связанные с ними пурпурными, потому что обновление их один за другим утомительно и требует постоянной согласованности. Более того, эти цветовые вариации, как правило, имеют глаза и не имеют никакой связи.

Проблема непрозрачности

Многие строители страниц включают контроль прозрачности, которые могут стать кошмаром для консистенции цвета. Вы можете создать идеальное синее наложение с 60% непрозрачности, но позже вам нужен тот же самый прозрачный красный для другого раздела.

Ваш строитель страниц не помнит точного микса, так что вы оставляете глаза на ползунка непрозрачности и пытаетесь соответствовать тому, что вы делали раньше.

Попытки 1, 2 и 3 варьируются по тени и прозрачности, потому что глазное яблоко не дает точных результатов даже с точными контролями.

Некоторые строители страниц позволяют сохранить прозрачные цвета. Другие нет. В итоге вы получаете кучу похожих прозрачных синих.

Они все немного разные. Ваш дизайн теряет последовательность. Вы не можете надежно воссоздать один и тот же прозрачный цвет в различных модулях. Каждый раз, когда вам нужна прозрачность, вы начинаете с нуля. Вы догадаетесь на значениях непрозрачности. Вы надеетесь, что они соответствуют вашему существующему дизайну.

Создание переменных вручную

Большинство строителей страниц предлагают некоторую форму сохранения цвета, но она быстро становится неуправляемой. Вы сохраняете цвета с общими именами, такими как «Желтый 1», «Желтый 2» и «Желтый свет».

Через шесть месяцев вы понятия не имеете, какой желтый делает что. Ваша сохраненная цветовая палитра становится беспорядком похожих цветов с бессмысленными именами. Ваша цветная библиотека растет без какой -либо организационной системы. У вас есть три разных апельсина, которые выглядят почти одинаково, но они служат различным целям.

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

Члены команды добавляют свои цветовые вариации, создавая дублирующие оттенки с разными именами. Ваш бренд Orange существует как «Orange», «Brand Orange», «Primary Orange» и «Orange Main». Никто не знает, какой из них использовать.

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

Но теперь вы создали техническое препятствие. Ваши нетехнологичные члены команды больше не могут обновлять цвета, и ваши клиенты не могут внести простые изменения цвета самостоятельно. Вы становитесь ответственными за каждую небольшую регулировку цвета.

Какие относительные цвета в CSS (и почему они вам нужны)

Относительные цвета решают ваши проблемы с цветом. Вы выбираете один цвет бренда. CSS делает все необходимые вам версии. Легкие для фонов. Темные для границ. Чистые для наложений. Все из одного начального цвета.

CSS функционирует как динамический цветовой инструмент. Вы говорите: «Сделайте эту желтую зажигалку». CSS делает работу. Ваша красная кнопка должна исчезнуть при колебании. CSS добавляет прозрачность. Ваш синий заголовок нуждается в более темной границе. CSS создает это сразу.

Традиционные рабочие процессы требуют больше ручных усилий. Дизайнеры изготавливают наборы цветов в Photoshop. Кодеры использовали такие инструменты, как SASS. Строители веб -сайтов должны были догадаться в соответствии с цветами. CSS теперь обрабатывает это автоматически.

Как CSS создает цвета из цветов

Слово «от» говорит CSS использовать существующий цвет в качестве отправной точки. Вы даете CSS цвет, и он разбивает этот цвет на кусочки, которые он может использовать.

Ваш начальный цвет становится основой. CSS разбивает его на части. Красные суммы, зеленые суммы, синие суммы. Или оттенок, яркость и насыщение, если вы предпочитаете эти элементы управления.

Вы можете начать с любого цветового формата. Используйте шестигранный цвет, как #E91E63. Скажите CSS работать с ним как HSL для легких изменений яркости. Выведите его как RGB, если ваш код нуждается в этом. CSS преобразует все автоматически.

Код следует за простой шаблоном. Сначала вы говорите, откуда получить цвет, а затем вы говорите, что изменить в этом. Вы можете сохранить все одинаковое, но добавить прозрачность или изменить оттенок, но сохранить яркость. Оба работают одинаково.

Разбивая цвета на части

Различные форматы цвета дают вам разные инструменты. RGB позволяет смену красного, зеленого и синего цвета отдельно. HSL дает вам управление оттенком, насыщением и легкостью.

Вот как это работает. Вы пишете RGB (из #FF4081 RGB). CSS берет этот розовый шестнадцатеричный код и расщепляет его на красные, зеленые и синие числа. Тогда вы можете использовать эти числа, как хотите. Паттерн остается прежним: цветовая функция (от вашего цвета Channel2 Channel2 Channel2).

Таким образом, вместо того, чтобы писать цвета с нуля, вы опираетесь на существующий цвет и меняете только те части, которые хотите изменить.

Каждая часть преобразуется в соответствии с тем, что вы выбрали. Преобразование этого розового шестигранника дает вам r = 255, g = 64, b = 129. Используйте их как есть или измените их с помощью Calc ().

Вы также можете смешать и соответствовать каналам. Хотите, чтобы все красные пиксели были такими же? Используйте RGB (из var (–color) ggg). Это берет зеленое значение и использует его для красного, зеленого и синего, создавая серый тон из вашего исходного цвета.

Поддержка браузера и другие соображения

Большие сайты не могут игнорировать посетителей, потому что им нужно разместить всех. Старые версии Safari работают по -разному. Хромированные версии обрабатывают некоторые вещи по -своему. Firefox, это собственно. В конечном итоге вы напишите три разные кодовые версии для одного цветового эффекта.

Вся эта дополнительная работа отнимает время от лучших вещей. Вы можете улучшить функциональность сайта и добавить функции, которые хотят люди.

Многие разработчики используют относительные цвета выборочно. Внутренние инструменты и личные проекты работают хорошо, так как вы контролируете браузер. Маркетинговые сайты и клиентская работа нуждается в более тщательном планировании.

Технология отлично работает там, где она поддерживается. Вопрос в том, соответствует ли дополнительная сложность вашего проекта временной шкалы и команды или технических способностей клиента. Но для большинства случаев это было бы излишним и накладным расходом для большинства членов команды.

Именно поэтому вмешалась команда Divi. Мы видели, как веб -дизайнеры борются с совместимостью браузера, пропуская мощные цветовые инструменты. Наше решение в Divi 5 принимает лучшие части относительных цветов и завершает их в систему, которая работает повсюду и не требует кодирования.

Как Divi 5 облегчает относительные цвета

Теперь вы знаете силу относительных цветов; Тем не менее, вы, возможно, поняли, что его не так просто реализовать. Divi 5 принял другой подход и встроил гибкость цвета прямо в свой визуальный интерфейс. Но давайте выясним, что такое Диви.

Что такое Диви?

Divi - самый популярный WordPress Page Builder. Он приоритет визуальному дизайну и дает вам полный контроль над вашим дизайном.

Вы можете наблюдать, как ваши изменения происходят вживую, настраивать размеры шрифтов или расстояние между линиями, и сразу же увидеть результаты на вашей странице. Вы получаете доступ к более чем более 200 модулям, которые идут куда угодно. Текстовые блоки, заголовки и контент работают как команда. Нет жестких шаблонов, которые сжимают ваши идеи в неловкие формы.

Вот что отличает Divi: более 2000 готовых макетов, созданных для реальных предприятий. Это не базовые стартовые шаблоны. Каждый дизайн предназначен для конкретных отраслей. Вы найдете макеты, которые говорят на языке вашей аудитории и соответствуют потребностям вашего бизнеса.

Пропустите пустую страницу блюза с помощью Divi Quick Sites

Divi Quick Sites исправляет этот пугающий пустой холст, который убивает проекты, прежде чем они начнут. Вы получаете профессиональные стартовые веб -сайты с солидным дизайном, который наша команда дизайнеров создает с помощью оригинальных изображений и произведений искусства, которые вы не найдете нигде.

Если вы хотите что -то более персонализированное, Divi Quick Sites работает с Divi AI для создания пользовательских макетов на основе деталей вашего бизнеса. Опишите свою консалтинговую фирму или ресторан, и она производит соответствующие страницы с отраслевым контентом.

Это не основные каркасы: вы получаете фактические заголовки, письменный контент и изображения, которые соответствуют вашему бизнесу. Он даже разрабатывает заголовки и нижние колонтитулы, страницы продукта и шаблоны сообщения в блоге, среди прочего, для вас.

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

Полный контроль над дизайном вашего сайта, теперь с ИИ

Строитель темы возглавляет вас за дизайн на всем вашем веб -сайте. Создайте пользовательские заголовки, которые отражают личность вашего бренда. Создайте макеты блога, которые удерживают читателей с длинными статьями. Ваши 404 страниц могут оставаться в бренде с подходящими шрифтами и стилем.

Divi AI, как упоминалось ранее, помещает ИИ прямо в ваш рабочий процесс дизайна. Создайте заголовки, которые звучат так, будто вы их написали, и описания продуктов, которые отражают голос вашего бренда.

Редактирование фото можно сделать внутри строителя. Расскажите AI, какие изменения вы хотите на изображении, и он обрабатывает изменения.

Нужны свежие изображения? Это также создает их.

Полные разделы страниц, которые идеально подходят для вашего бизнеса.

Плюс фрагменты кода, когда они вам нужны.

Divi 5: Следующая эволюция

Divi 5 входит в альфа -тестирование с четкой миссией: чтобы улучшить производительность вашего процесса веб -дизайна. Мы слушали реальные отзывы о том, что вас замедляет и что поможет вам.

Все, что вам нравится в нынешнем Divi, остается на месте. Мы только что заставили это работать лучше. Интерфейс выглядит чище. Страницы загружаются быстрее, чем раньше. Управление отвечают правильно, когда вы нажимаете на них.

Мы перестроили фонд, используя сегодняшние веб -стандарты. Это означает меньше странных ошибок и более плавную производительность в целом.

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

Альфа -версия готова к использованию на новых веб -сайтах, хотя мы не рекомендуем преобразовать ваши существующие веб -сайты Divi 4 в Divi 5.

Что нового в Divi 5

Divi 5 вносит серьезные изменения в то, как вы создаете веб -сайты. Общественная версия Alpha отлично подходит для новых проектов прямо сейчас. Наши команды разработчиков отправляют новые функции каждые две недели, с несколькими крупными обновлениями уже выпущены с момента начала Альфа.

Вот несколько обновлений ключей:

• Современная кодовая база ускоряет ситуацию, загружая только те модули, которые вам действительно нужны, удаляя вздутие кода, которое замедляет Divi 4.
• Полная система макета Flexbox теперь включает в себя новые шаблоны строк, автоматическое вертикальное центрирование, обертывание контента и распределение расстояния с помощью визуальных элементов управления.
• Совершенно новый строитель петли , который повторяет модули, группы или разделы с динамическим содержанием и поддерживает вложенные петли для сложных структур данных.
• Относительные цвета с HSL обеспечивают динамический контроль цвета на основе значений оттенка, насыщения и легкость.
• Система на основе HTML-5 полностью заменяет шорткоды , что означает меньше ошибок и лучшую совместимость WordPress.
• Интерфейс Visual Builder получил полный макияж, с легкими и темными режимами, пристывшими панелями, окнами вкладок, сочетаниями клавиш и улучшенным видом на слои с панировочными крошками.
• Настраиваемые отзывчивые точки останова заменяют три фиксированных Divi 4, что дает вам больше управления с помощью масштабирования холста, чтобы точно увидеть, как дизайны рассматривают разные размеры экрана.
• Модульные группы работают как универсальные контейнеры, которые объединяют связанные элементы вместе, чтобы вы могли создать их как единицы или перемещать их без потери отношений.
• Переменные дизайна позволяют устанавливать цвета, шрифты, числа, изображения, текст и URL -адреса во всем мире по всему сайту.
• ПРЕДУПРЕТЫ Группы опций Сохраняют определенные свойства дизайна, такие как типография или тени, которые работают в разных типах модулей.
• Усовершенствованные единицы CSS теперь поддерживают функции Clamp (), Calc (), min () и max () через визуальный интерфейс без написания кода.
• Система взаимодействий создает всплывающие окна, переключатели, эффекты прокрутки и эффекты движения мыши без внешних плагинов.

Что будет ...

• Модули Woocommerce восстановились с нуля с использованием архитектуры Divi 5 с полной задачей и переменной совместимостью.
• Инспектор элементов предоставит новые инструменты отладки и разработки для продвинутых пользователей.
• Аналогичным образом, модуль Group Carousel может помочь вам создать карусель, состоящую из групп, а затем разработать контент для каждого слайда, используя полный набор элементов Divi для разработки любого стиля карусели, который вы хотите.

Создание палитр, которые масштабируются с Divi 5

Ваш цветовой сборщик становится беспорядком, когда вам нужны десятки вариаций цвета вашего бренда. Divi 5 исправляет это, соединяя каждый оттенок с одним базовым цветом. Приведенные ниже шаги показывают, как построить масштабируемую и поддерживаемую цветовую систему.

1. Настройка основного цветного основания

Откройте визуальный строитель и найдите значок Manager переменной на левой боковой панели. Нажмите на него, чтобы увидеть цвет вашего сайта. Divi 5 поставляется с предустановленными цветовыми переменными, которые уже ожидают вас: первичные, вторичные, заголовок и цвета корпуса.

Вы не можете удалить эти заданные переменные, но вы можете изменить их значения. Это работает отлично, потому что эти четыре цвета обрабатывают большинство веб -сайтов. Нажмите на основную цветную переменную и введите основной цвет вашего бренда. Это становится основой для любого другого цветового вариации на вашем сайте.

Ваша основная цветовая переменная должна отражать самую насыщенную версию цвета вашего бренда. Думайте об этом как о чистой, неразбавленной версии, прежде чем создавать более легкие фон или добавить эффекты прозрачности. Это дает вам наибольшую диапазон при изменении здания позже.

Вторичный цвет хорошо работает для акцентов, кнопок или основных моментов, которые должны выделиться среди вашего основного цвета бренда. Установите свой заголовок на что -то, что хорошо читается на вашем фоне. Цвет тела обычно остается темно -серым или черным для читаемости.

Эти четыре заданные переменные соединяются со всей системой Диви. Когда вы строите модули, эти цвета появляются в виде быстрых вариантов. Измените свой основной от синего на зеленый здесь, и каждый модуль с мгновенными обновлениями переменной на вашем сайте мгновенно.

Избегайте создания чрезмерных пользовательских переменных на ранней стадии. Вместо этого начните с этих четырех пресетов. Большинству веб -сайтов могут понадобиться только эти основные цвета, с вариациями, созданными через относительные элементы управления цветом Divi 5. Но, конечно, если вам нужно, вы можете добавить столько переменных, сколько хотите.

2. Создание цветовых оттенков с помощью управления HSL

Теперь добавьте еще одну цветную переменную. На этот раз вы создадите оттенок из своего основного цвета вместо того, чтобы установить новый базовый цвет. В цветовой сборке выберите основную цветную переменную из списка.

Теперь вы видите три ползунка: оттенок, насыщенность и легкость. Они контролируют, как меняется ваш базовый цвет.

Оттенок движется вокруг цветового колеса от 0 до 360 градусов. Оставьте это в покое, делая оттенки того же цвета. Насыщенность составляет от 0% до 100% и контролирует, насколько ярким выглядит ваш цвет. При 0%любой цвет становится серым. При 100%вы получаете полную интенсивность.

Легкость работает от 0% до 100%. Этот слайдер создает ваши настоящие оттенки. В 0 вы получаете чистую форму вашего цвета. Переместите его до 50% для более легких оттенков. Выбросить его до -20% для более темных оттенков.

Вы можете смешать и соответствовать этим цветам HSL, чтобы построить новые цвета и вариации по мере необходимости.

Давайте создадим два вариации нашего основного цвета. Добавьте переменную и назовите свой новый оттенок что -то ясное, например, «первичный свет» или «первичная темнота». Повторите этот процесс, чтобы создать несколько оттенков. Типичная настройка использует ваш базовый первичный при этом на 30% легкостью для фонов и тому подобное, а также темно при легкостью -15%.

Вы также можете добавить такие более легкие и более темные оттенки для вашего вторичного цвета.

3. Создание вложенных цветовых переменных

Вы сделали первичный свет и первичную тьму на шаге 2. Теперь вы можете построить больше цветов из этих оттенков.

Сделайте новую переменную под названием «Фоновый фон карты». Выберите свой основной свет из списка. Подержать непрозрачность до 50%. Это дает вам едва нет оттенка для фона карт. Далее, создайте «пуговица». Выберите первичную тьму. Побалуйте легкость еще на 10%, чтобы сделать его еще темнее. Теперь ваши кнопки могут быть более темным цветом, когда люди свидают над ними.

Вы также можете создавать пользовательские цвета из своих оттенков. Сделайте «Текстовую тень», выбирая кнопку. Установить непрозрачность на 15%. Теперь ваша текстовая тень подключается к кнопке, которая подключается к первичной темноте, которая подключается к начальной.

Попробуйте «пограничный акцент» от первичного света. Установите насыщенность до 100%, чтобы он стал больше. Это дает вам яркую границу, которая все еще соответствует вашему бренду. Каждая цепочка становится длиннее. Все пять цветов отслеживаются до одного основного выбора.

Добавьте похожие оттенки для вашего вторичного цвета для хорошего выбора цветов, чтобы выбрать.

4. Применение относительных цветов на ваш сайт

Вы построили свой цвет и создали все эти оттенки. Теперь наступает практическая часть: реализация их на вашем сайте.

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

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

Ваши цветовые переменные работают везде: заголовки, нижние колонтитулы, макеты блога и страницы продукта. Члены вашей команды и клиенты могут выбрать цвета, не догадаясь. Они видят «первичный свет» вместо случайных шестигранных кодов в сборщике. Чистые имена означают меньше ошибок и более быстрых дизайнерских работ. Все знают, какой цвет служит какой целью.

Эта система на основе переменных предотвращает визуальную несоответствия. Вам не придется сохранять десятки подобных блюзов или удивляться, какой оттенок использовать для эффектов наклонения. Ваши переменные дают вам структуру при сохранении гибкости дизайна.

5. Обновление цветов при необходимости

Ваш клиент решает, что он хочет полночь синий, а не только синий. При традиционном управлении цветом это означает часы просеивания модулей и вручную обновлять каждый оттенок или обновлять кучу глобальных цветов одновременно. С относительными цветами Divi 5 вы меняете одну переменную, а все остальное следует.

Ваши основные световые фоны становятся светло -зелеными. Основные темные границы переходят к темно -зеленому. Цвета пуговицы приспосабливаются к темному симу. Все те вложенные вами отношения остаются нетронутыми.

Ваша карта фоновая тень имела 15% непрозрачность первичного света. Это становится 15% непрозрачности нового зеленого первичного света, не касаясь его. Ваша текстовая тень подключается к кнопке, который подключается к первичной темноте, которая подключается к начальной.

Старый путь означал воссоздание цветовой гармонии с нуля каждый раз. Вы сохраняете отношения при изменении основания, и ваш дизайн остается сбалансированным.

Ваши цвета, ваши правила

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

Относительные цвета Divi 5 заканчивают этот кошмар рабочего процесса. Постройте один раз из базового цвета и автоматически смотрите каждое обновление вариации на вашем сайте. Система обрабатывает совместимость браузера, сохраняет отношения и поддерживает организованную форму для выбора цвета, поэтому вам не нужно будет играть с CSS.

Ваш следующий проект заслуживает лучшего управления цветом. Загрузите Divi 5 и посмотрите, что такое организованный дизайн.