Тема «Приподнятые объекты»

Knach.com » Темы Web-страниц » Тема «Приподнятые объекты»

Список элементов темы «Приподнятые объекты»:

 Элементы темы Приподнятые объекты

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

Начнём с заголовка страницы. Диалог настройки скрипта с параметрами по умолчанию:

Заголовок темы Приподнятые объекты с параметрами по умолчанию

результат работы:

Результат формирования заголовка

Здесь по умолчанию используется шаблон с фактурой светлого дерева (шаблон называется Wood) и чёрный фон заголовка. Если оставить его без изменений, то всю Web-страницу придётся также делать на чёрном фоне, что может затруднить шрифтовое оформление и восприятие страницы (хотя на вкус и цвет, как известно, товарищей нет).

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

Итак, изменяем текст, устанавливаем размер шрифта в 48 точек, выбираем гарнитуру по вкусу и устанавливаем шаблон под названием «Big Blue», а также включаем режим «Прозрачный фон»:

Изменённые параметры заголовка для темы Приподнятые объекты

В результате получается текст на прозрачном фоне. Для использования на Web-странице с сохранением прозрачности нужно экспортировать изображение в формат GIF или PNG, однако, как уже говорилось выше, не все браузеры пока ещё корректно обрабатывают PNG-изображения. Поэтому экспортируем картинку в GIF, при этом согласившись на преобразование изображения в индексированное. Однако, как легко убедиться, результат оказывается неприемлемым из-за «шершавости» получившегося текста, что связано с резкостью цветовых переходов при индексировании цветовой гаммы изображения.

Хороший результат можно получить, скопировав получившийся текст на белый фон и экспортировав результат в формат JPEG:

Итоговый заголовок для темы Приподнятые объекты

«Выпуклость» в итоге практически незаметна, однако у текста получились довольно интересные тёмно-сине-чёрные переходы.

Следующий элемент рассматриваемой темы — кнопка. Параметры скрипта по умолчанию:

Параметры по умолчанию для кнопки темы Приподнятые объекты

Шаблон используется тот же, что и для заголовка (Wood), а цвет текста — чёрный (HTML-код 000000).

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

Результат работы скрипта с параметрами по умолчанию:

Кнопка для темы Приподнятые объекты с параметрами по умолчанию

Теперь изменим текст и гарнитуру шрифта, установим размер шрифта в 14 точек, цвет шрифта — белый, а шаблон, как и для заголовка, — Big Blue:

Изменение параметров кнопки темы Приподнятые объекты

Результат в окне изображения:

Кнопка с изменёнными параметрами

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

Элемент изображения

Аргументы скрипта

Линейка:

Длина: 300

высота: 5

шаблон: Big Blue

Маркер::

Диаметр: 10

шаблон: Big Blue

прозрачный фон

Стрелка:

Размер: 32

направление: вправо

шаблон: Big Blue

при использовании шаблона «Big Blue» и результаты посмотрим уже на Web-странице.

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

Все элементы получившейся Web-страницы:

Элементы темы Приподнятые объекты на Web-странице

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

Тема Приподнятые объекты со светлым шаблоном

  • Тема "Классический"
  • Тема "Чужое свечение"
  • Комментариев пока нет. Будете первым?

    Оставить комментарий

    XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>