Изучите этот раздел, чтобы узнать, как использовать панель 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, убедитесь, что выбираете необходимые префиксы поставщиков в Настройках.Поскольку по умолчанию при использовании или изменении градиентов Dreamweaver обновляет код только для Webkit и интерактивного просмотра Dreamweaver. Таким образом, содержащийся в коде синтаксис, который подходит для других браузеров, не обновляется.
Замена фоновых изображений на градиенты
Порядок фоновых изображений и градиентов (в котором они расположены в коде) можно изменить одним щелчком мыши.
Нажмите стрелку рядом с URL или свойством Градиент в CSS Designer.
Dreamweaver содержит базовую реализацию функции смены фона.При наличии нескольких значений или изображений замена может привести к неожиданным результатам. Предположим, что для фона было применено одно изображение, потом второе изображение, а затем градиент. Использование функции замены приведет к выстраиванию этих элементов в следующем порядке: градиент, второе изображение, первое изображение.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
