Используем встроенные фильтры IE. Часть 2

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Уроки html

В этой части я опишу ещё 10 фильтров. Вот они:

  1. … — смотрите в первой части
  2. Glow — свечение около объекта
  3. Invert — инвертирование цветов объекта
  4. Mask — инвертирование прозрачности
  5. Shadow — отбрасывание тени
  6. Xray — отображает элементы в чёрно-белом виде
  7. Wave — волновое искажение объекта
  8. BasicImage — комбинация предыдущих фильтров
  9. Emboss — рельефность
  10. Engrave — рельефность №2
  11. AlphaImageLoader — фоновая картинка

  8) Glow — свечение около объекта.

Ваш текст. Ваш текст. FILTER: glow(color=ffff00, strength=10)
color Цвет свечения.
strength Сила свечения.
Этот фильтр хорошо работает на тексте, но на изображениях может работать только с прозрачными областями. Для того, чтобы свечение исходило из границ рисунка, нужно увеличить длину и ширину слоя, а также добавить параметры padding-left, padding-top, padding-bottom, padding-right со значениями равными, к примеру, 10

 9) Invert — инвертирование цветов объекта.

Ваш текст. Ваш текст. FILTER: Invert()
Замена всех цветов на обратные. Одинаково хорошо работает и с текстом и с изображениями.

 10) Mask — инвертирование прозрачности.

Ваш текст. Ваш текст. FILTER: Mask(color=navy)
Все прозрачные пиксели изображения становятся того цвета, который вы задали в color. А непрозрачные пиксели становятся прозрачными.Заметьте! Во многих статьях говориться, что фильтр Mask выделяет объект, как если бы вы его выделили мышью. Но это неправильно. Текст становиться цвета фона, то есть прозрачным. Попробуйте выделить текст под исходным изображением и сравните с результатом работы фильтра.

 11) Shadow — отбрасывание тени.

Ваш текст. Ваш текст. FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=45, color=#0000ff, strength=12)
color Цвет тени.
direction Направление тени, заданное в градусах.
strength Сила отбрасывания тени.
Обратите внимание. Фильтр Shadow и фильтр DropShadow, описанный в первой части под номером 4, это не одно и тоже! Shadow многократно дублирует объект, а DropShadow только один раз.

 12) Xray — отображает элементы в чёрно-белом виде.

Ваш текст. Ваш текст. FILTER: Xray()
У изображения меняется глубина цвета, и оно становится чёрно-белым.

13) Wave — волновое искажение объекта.

Ваш текст. Ваш текст. FILTER:progid:DXImageTransform.Microsoft.Wave(freq=2, LightStrength=20, Phase=10, Strength=5)
freq Количество волн (пиков).
LightStrength Величина подсветки. Чем больше, тем тень сильнее.
Phase Начальная фаза волн. Находится в интервале от 0 до 100.
Strength Сила волны (величина искажения объекта).

14) BasicImage — комбинация предыдущих фильтров.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0, Mirror=1, Invert=1, XRay=1, Grayscale=1, Opacity=0.25);
Rotation Угол поворота объекта. Значения:
0 0 градусов
1 90 градусов
2 180 градусов
3 270 градусов
Mirror Отражение относительно вертикальной оси. Если 1, то включено, если 0, то выключено.
Invert Отображение в обратных цветах. Если 1, то включено, если 0, то выключено.
XRay Чёрно-белое изображение с изменением глубины цвета. Если 1, то включено, если 0, то выключено.
Grayscale Отображение в серых тонах. Если 1, то включено, если 0, то выключено.
Opacity Прозрачность. Заметьте, она изменяется не от 0 до 100, а от 0 до 1. То есть она задаётся десятичной дробью. Вместо запятой ставьте точку!

15) Emboss — рельефность.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.Emboss()

16) Engrave  — рельефность №2.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.Engrave()

17) AlphaImageLoader  — фоновая картинка.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.webcorp.ru/graphic/logo1.gif,  sizingmethod=scale)
src Путь к изображению, которое будет «подложено» под объект.
sizingmethod Метод трансформации подложенного изображения.
scale Изображение сжимается до размеров области элемента. Смотри рисунок слева.
crop Подрезка изображения. Если вся картинка не помещается в отведённую ей область, то лишние части вырезаются.
image Изображение показывается всё, расширяя отведённую область.
Хочу обратить внимание на этот фильтр. Его можно использовать в качестве защиты картинок. К примеру, попробуйте сохранить изображение внизу на диске. Для этого как обычно нажимайте правую кнопку мыши и выбирайте: Сохранить рисунок как… (Save image as).

Если вы всё это проделаете, то, к своему удивлению, обнаружите у себя на диске не логотип этого сайта, а прозрачную картинку. Теперь объясняю как это сделать. Просто делаете прозрачный гиф размером с защищаемую картинку (в данном случае 150*150). После вставляете его на страницу в то место, где должно быть защищаемое изображение и применяете к нему фильтр AlphaImageLoader. Как вы уже догадались, в src должен быть указан путь к защищаемому изображению.

P.S. Это «защита от дураков». Защищаемое изображение можно достать несколькими путями:
1) Временные файлы интернета. Оттуда вообще можно достать всё что хочешь.
2) Посмотреть исходный код и найти путь к защищаемому изображению. После чего загрузить его в браузер или в какую-нибудь программу закачки. А из браузера уже по-обычному сохранить.
3) Пользоваться почти любым браузером кроме IE. Вы не забыли, что фильтры поддерживает только Internet Explorer. Пользователи Opera вообще увидят только прозрачный гиф

Источник: webcorp.ru

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

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты