Наш широко используемый инструмент создания веб-страниц Dreamweaver MX может не только создавать веб-страницы, но также использовать фильтры CSS для выполнения простых специальных эффектов к тексту или изображениям. Давайте рассмотрим несколько примеров, чтобы увидеть, как создавать текст со спецэффектами в Dreamweaver.
слово ореола
Сначала запустите Dreamweaver, вставьте таблицу 1×1 в новый документ, установите границу на 0, а затем введите текст, который необходимо изменить.
Нажмите «Дизайн → Стиль CSS» на плавающей панели справа, чтобы открыть эту плавающую панель.
Четыре кнопки в правом нижнем углу панели: добавление, создание, редактирование и удаление стилей CSS.
Примечание. В Dreamweaver фильтры CSS можно использовать только для объектов с ограничениями по площади, таких как таблицы, ячейки, изображения и т. д., но нельзя использовать непосредственно для текста, поэтому нам нужно поместить текст, который необходимо добавить, с помощью специальных эффекты в таблице заранее, а затем примените к таблице стили CSS, чтобы создать специальные эффекты для текста.
Рис. 1. Новый стиль CSS
Нажмите кнопку «Новый стиль CSS», чтобы открыть диалоговое окно, показанное на рисунке 1.
Выберите «Создать собственный стиль» для элемента «Тип», выберите «Только для этого документа» для «Определено в» и нажмите «ОК», чтобы открыть диалоговое окно определения стиля CSS (рис. 2). На панели типов мы можем это сделать. определить шрифты, размеры шрифтов, цвет и другое содержимое. В этом примере мы выбираем официальный шрифт, размер 50 пикселей и белый цвет.
Рисунок 2. Чтобы определить стили CSS для создания текстовых эффектов, наиболее важными являются настройки на панели расширений (рис. 3). Все фильтры CSS перечислены в фильтре в разделе «Визуальные эффекты». Выберите фильтр «Свечение», который можно сделать. текст имеет эффект светящихся краев. Синтаксический формат фильтра «Свечение»: Glow(Color=?, Strength=?), который имеет два параметра: Цвет определяет цвет ореола. Вы можете использовать шестнадцатеричные коды, например ffffff, или такие слова, как Red и Yellow. Обозначает; Сила представляет интенсивность света в диапазоне от 0 до 255. В этом примере мы устанавливаем цвет красный, интенсивность света 8, а затем ОК.
Рис. 3. Настройка фильтра свечения
Затем мы применим этот стиль CSS к таблице. Переместите курсор к ячейке, щелкните метку в левом нижнем углу окна документа, чтобы выбрать ячейку, а затем щелкните вновь созданный стиль на панели стилей CSS. При этом метка изменится, указывая на использование стиля CSS. был применен к клетке. Мы не видим изменений в окне документа. Нажмите клавишу F12 для предварительного просмотра в IE, и эффект появится (рис. 4).
Рис. 4. Эффект слова Halo
Как насчет этого? Он не уступает эффекту фильтра в Photoshop. Размещение нескольких слов со специальными эффектами на веб-странице сделает веб-страницу намного красивее, и мы также можем использовать клавишу PrintScreen для захвата экрана, а затем вставить и сохранить его в программе рисования, чтобы сделать из него отдельное изображение.
теневое слово
Существует два CSS-фильтра, которые могут создавать эффекты тени для текста: Drowshadow и Shadow. Эффекты, которые они создают, немного отличаются.
Шаги по созданию теневых слов в основном такие же, как и при создании слов с ореолом. Вам просто нужно повторно выбрать фильтр в стиле CSS.
Синтаксис фильтра Drowshadow следующий: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).
Среди них Color представляет цвет тени, выраженный в виде шестнадцатеричного числа; OffX и OffY соответственно представляют величину отклонения тени от положения текста в пикселях. Положительное значение — логическое значение, 1 — создание теней для всех непрозрачных объектов; elements, 0 Представляет создание видимых теней для всех прозрачных элементов.
Рис. 5. Эффект теневого слова
Например, если для фильтра установлено значение DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1), эффект будет таким, как показано на рисунке 5.
Слова-маски
Фильтр CSS также предоставляет нам функцию маски, которая может преобразовать текстовую часть в маску. Если в качестве фона используется подходящее изображение, можно создать красивый эффект пустого текста.
Вставьте таблицу 1×1 в окно документа, щелкните метку в левом нижнем углу окна документа, чтобы выделить всю таблицу, выберите подходящее изображение на фоновом изображении инспектора свойств (как показано на рисунке 6) и затем введите необходимый текст.
Рисунок 6. Вставка фонового изображения в таблицу.
Далее мы добавляем в ячейку фильтр «Маска», шаги аналогичны двум предыдущим примерам. В фильтре выберите Mask (Color=?). Этот параметр определяет цвет маски. Выбираем белый.
Примечание. Выбор цвета текста в этом примере не важен, поскольку в конечном результате текст будет пустым и цвет отображаться не будет.
Рис. 7. После установки эффекта слова-маски примените этот стиль CSS к ячейке, а затем нажмите клавишу F12, чтобы увидеть эффект (рис. 7).
Примечание. Фоновое изображение добавляется для всей таблицы, соответствующее тегу <table>, а стиль CSS добавляется к ячейке, которая является тегом <td>. Не делайте ошибку.
Динамические слова Чтобы создать динамические слова, нам нужно использовать фильтр «Размытие», который используется для создания эффекта размытия. Его синтаксический формат — Blur(Add=?, Direction=?, Strength=?). Параметр Add представляет собой логическое значение. Вообще говоря, когда фильтр используется для изображений, он принимает значение 0, а когда он используется для текста, он принимает 1. Направление представляет направление размытия, а единица измерения — угол; значение движения размытия, единица измерения — пиксели. Например, если мы определим Blur(Add=1, Direction=90, Strength=150), вы увидите эффект, показанный на рисунке 8 в предварительном просмотре.
Рис. 8. Динамический эффект слов «Друзья» Фактически, многие фильтры CSS также можно использовать для изменения изображений. Например, фильтр «Размытие» может создавать эффект размытия изображений. Если мы умеем применять эти фильтры, иногда мы можем создавать довольно хорошие эффекты изображения без профессионального программного обеспечения для обработки изображений.
