Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Графика и фильтры

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию тринадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске рассмотрим использование графики с помощью CSS.


Содержание выпуска:
Графика.

Цвет фона или фоновое изображение можно задать с помощью свойств тега BODY. Однако, согласно современной идеологии стандартов HTML, необходимо избегать явного задания свойств тега BODY. Вместо этого необходимо использовать средства CSS. Приведем фрагмент стилевого файла:

body {
background-color: #FFF;
background-image: url("bg.gif");
background-attachment: scroll;
color: #000;
}

Свойство background-color задает цвет фона, свойство background-image определяет фоновое изображение, background-attachment задает способ прокрутки фонового изображение (значения scroll - прокрутка вместе с текстом, fixed - фоновое изображение фиксировано). В последней строчке свойство color определяет цвет символов по умолчанию. Конечно же, применять эти свойства стиля можно практически к любому объекту.

Фильтры

Достаточно богатым инструментом для работы с графикой представляют собой фильтры. Приведем пример подключения фильтров с использованием таблиц стилей.

Фильтры могут применяться не ко всем элементам HTML. К следующим элементам фильтры могут применяться всегда: BODY, BUTTON, IMG, INPUT, MARWUEE, TABLE, TD, TEXTAREA, TH. Фильтры можно применять к следующим тегам, только если заданы свойства ширины WIDTH и высоты HEIGHT или при абсолютном позиционировании элемента: DIV, SPAN. Фильтры нельзя применят к элементам: JAVA, IFRAME, SELECT, OPTION, P, EM, STRONG, H1, ..., H6,

Класс соответствующий определенному фильтру задается в виде:

.ClassName{filter:FilterName(Parameter1='Value', Parameter2='Value');}

Здесь ClassName - имя класса, FilterName - имя фильтра, Parameter='Value' - пары параметр=значение, настраивающие действие фильтра. У различных фильтров может быть разное число параметров, или не быть ни одного. Несколько параметров задаются через запятую. При применении нескольких фильтров к одному объекту список фильтров задается через пробел.

Список всех доступных фильтров приведен ниже:

    Текстовые фильтры
  • Размытие текста (Blur)
  • Тень (DropShadow)
  • Горизонтальный поворот объекта (FlipH)
  • Вертикальный поворот объекта (FlipV)
  • Сияние (Glow)
  • Маска (Mask)
  • Тень (Shadow)
  • Волнистый текст (Wave)
    Графические фильтры
  • Прозрачность (Alpha)
  • Размытость (Blur)
  • Горизонтальный поворот объекта (FlipH)
  • Вертикальный поворот объекта (FlipV)
  • Инверсия (Invert)
  • Тона серого (Gray)
  • Прозрачность для одного цвета (Chroma)
  • Негативное изображение (Xray)
  • Волнистый текст (Wave)
  • Анимированное появление изображения (RevealTrans)

Фильтры могут применяться не ко всем элементам HTML. Ко следующим элементам фильтры могут применяться всегда: BODY, BUTTON, IMG, INPUT, MARWUEE, TABLE, TD, TEXTAREA, TH. Фильтры можно применять к следующим тегам, только если заданы свойства ширины WIDTH и высоты HEIGHT или при абсолютном позиционировании элемента: DIV, SPAN. Фильтры нельзя применят к элементам: JAVA, IFRAME, SELECT, OPTION, P, EM, STRONG, H1, ..., H6,

Класс соответствующий определенному фильтру задается в виде:

.ClassName{filter:FilterName(Parameter1='Value', Parameter2='Value');}

Здесь ClassName - имя класса, FilterName - имя фильтра, Parameter='Value' - пары параметр=значение, настраивающие действие фильтра. У различных фильтров может быть разное число параметров, или не быть ни одного. Несколько параметров задаются через запятую. При применении нескольких фильтров к одному объекту список фильтров задается через пробел.

Список всех доступных фильтров приведен ниже:

    Текстовые фильтры
  • Размытие текста (Blur)
  • Тень (DropShadow)
  • Горизонтальный поворот объекта (FlipH)
  • Вертикальный поворот объекта (FlipV)
  • Сияние (Glow)
  • Маска (Mask)
  • Тень (Shadow)
  • Волнистый текст (Wave)
    Графические фильтры
  • Прозрачность (Alpha)
  • Размытость (Blur)
  • Горизонтальный поворот объекта (FlipH)
  • Вертикальный поворот объекта (FlipV)
  • Инверсия (Invert)
  • Тона серого (Gray)
  • Прозрачность для одного цвета (Chroma)
  • Негативное изображение (Xray)
  • Волнистый текст (Wave)
  • Анимированное появление изображения (RevealTrans)

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

Анонс следующего выпуска

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

Новости сайта/полезные ссылки

Добавлен новый раздел: Фильтры и SSI - server side includes - динамические сайты на стороне сервера.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Plug&Pray
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0084 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net