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

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

Свойство градиента
Свойство градиента

Щелкните рядом со свойством градиента, чтобы открыть панель градиентов. С помощью этой панели выполните следующие действия.

  • Выберите цвета из разных цветовых моделей (RGBa, HSLa) или с помощью шестнадцатеричного кода цвета. Затем сохраните различные сочетания цветов в виде цветовых образцов.
    • Чтобы сбросить вновь заданный цвет на исходный, щелкните исходный цвет (K).
    • Для изменения порядка расположения цветовых образцов перетащите цветовые образцы в нужное положение.
    • Чтобы удалить цветовой образец, перетащите его за пределы панели.
  • Для создания сложных градиентов используйте контрольные точки цвета. Для создания контрольной точки цвета щелкните в любом месте между контрольными точками цвета по умолчанию. Чтобы удалить контрольную точку цвета, перетащите ее за пределы панели.
  • Укажите угол линейного градиента.
  • Для повторения узора измените свойство background-repeat.
  • Сохраните пользовательские градиенты в виде цветовых образцов.

Давайте разберем следующий код.

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg: указывает угол линейного градиента
  • rgba (255, 255, 255, 1.00): цвет первой контрольной точки цвета
  • 0%: указывает положение контрольной точки цвета

Примечание.

В Dreamweaver значения положения контрольных точек цвета указываются в процентах. Если указать другие единицы, например «px» или «em», Dreamweaver воспримет значение как «nil». Кроме того, Dreamweaver не поддерживает цвета CSS. Поэтому, если в коде задать эти цвета, программа воспримет их как значения «nil».

Рендеринг градиентов в веб-браузерах

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

Вместе с форматом w3c Dreamweaver может записать следующие префиксы браузеров:

  • Webkit
  • Firefox
  • Opera

По умолчанию Dreamweaver записывает префиксы браузера для Webkit и интерактивного просмотра Dreamweaver. В диалоговом окне Настройки (Настройки > Стили CSS) можно выбрать другие браузеры.

Примечание.

Для теней Box всегда формируются префиксы Webkit и w3c, независимо от того, выбраны они в настройках или нет.

Все изменения градиентов также отражаются в синтаксисе, который подходит для указанных веб-браузеров. При открытии в Dreamweaver CC существующего файла, который содержит синтаксис для определенного веб-браузера, следует обязательно указать соответствующие префиксы браузеров в диалоговом окне «Настройки». Поскольку по умолчанию при использовании или изменении градиентов Dreamweaver обновляет код только для Webkit и интерактивного просмотра Dreamweaver. Таким образом, содержащийся в коде синтаксис, который подходит для других браузеров, не обновляется.

Замена фоновых изображений на градиенты

Порядок фоновых изображений и градиентов (в котором они расположены в коде) можно изменить одним щелчком мыши.

Щелкните по стрелке рядом с ближайшим свойством url или gradient в конструкторе CSS.

Примечание.

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет