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

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

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

Наверное, многие из вас подумали, что в этой статье речь будет идти о фильтрах Photoshop. Нет, про Photoshop мы ещё поговорим, а здесь будут рассмотрены встроенные фильтры браузера Internet Explorer. Они определяют то, как объекты (рисунки, текст, слои, формы…) будут выглядеть на экране.  К сожалению,  другие браузеры либо вообще не поддерживают их, либо понимают неправильно. Но это не повод отказываться от такого мощного средства изменения любых объектов на web странице.

1) Использование фильтров
2) Фильтры:

  1. Alpha — прозрачность
  2. Blur — размытие
  3. Chroma — прозрачность заданного цвета изображения
  4. DropShadow — добавление тени к объекту
  5. FlipH — отражение объекта относительно горизонтальной оси
  6. FlipV — отражение объекта относительно вертикальной оси
  7. Gray — обесцвечивание объектов

Способ задания фильтров:
Многие думают, и во многих статьях написано, что визуальных фильтров только 14. Но это не так. Фильтров больше 14! Ещё правда есть фильтры перехода, но это отдельная тема. Для того, чтобы применить фильтр к объекту, надо использовать css. Вот основная конструкция:

Filter: имя фильтра(параметры фильтра)

Как это применить? Для тех, кто знаком с css это не составит труда, а для остальных сделаю пояснения. Есть два пути:

1)Для начала вам нужно поместить между <head> и </head> вот такую конструкцию.

<style>
<!—
.
alpha{width:150 ; FILTER: alpha(style=1, opacity=0, finishOpacity=100, startX=30, finishX=100, startY=30, finishY=100)}
—>
</style>

.alpha
Это просто имя для класса.  Это может быть любая комбинация из цифр или латинских букв. Обратите внимание, перед именем всегда должна стоять точка.

width:150
Ширина. Если вы применяете фильтр к изображению, то вам не нужно указывать этот параметр. Но если вы применяете фильтр к тексту, то это значение должно быть обязательно, иначе фильтр работать не будет.
P.S. Вообще, для текста должен быть обязательно указан один из трёх параметров (position: absolute, width:величина или height:величина). Не имеет значения какой.

FILTER: alpha(style=1, opacity=0, finishOpacity=100, startX=30, finishX=100, startY=30, finishY=100)
Это как раз и есть сам фильтр. alpha — это его имя. В скобках указаны его значения. Забегая вперёд, скажу, что это фильтр делает элемент прозрачным (в зависимости от значений, прозрачность и стиль её применения меняются).

После того, как вы задали такую конструкцию, вы можете применить фильтр к чему угодно, а конкретнее —   почти к любому тегу, написав в его параметрах вот такую строчку: class=»alpha». Где alpha - имя класса, которое вы сами указывали сверху. Покажу это на конкретных примерах.

Оригинал С фильтром html — код.

<img border=»0″ src=»http://www.webcorp.ru/graphic/logo1.gif» align=»middle» class=»alpha»>
А это ваш текст, к которому применён фильтр alpha, делающий любые объекты прозрачными. А это ваш текст, к которому применён фильтр alpha, делающий любые объекты прозрачными. <font color=»#000080″ class=»alpha»>А это ваш текст, к которому применён фильтр alpha, делающий любые объекты прозрачными.</font>
<textarea rows=»4″ cols=»22″ class=»alpha»>А это текстовое поле. Попробуйте что-нибудь сюда написать.</textarea>

Как видите, первый путь состоит в указании стиля класса между тегами <style> и </style>. После чего вы можете присваивать этот класс любому другому тегу за исключением: апплетов, Java, iframe, select, option, p, em, strong и всех заголовков H1, H2 и т.д. Это путь весьма выгоден по нескольким причинам:

  1. Вы можете хранить описание стилей в отдельном файле. Для этого достаточно создать текстовый файл и скопировать туда все стили. А на страницу поместить такую строчку <LINK REL=STYLESHEET TYPE=»text/css» HREF=»путь к текстовому файлу со стилями»>
  2. Вам не нужно каждый раз для каждого тега писать стиль. Достаточно указать класс и всё!
  3. Вы не обязаны останавливаться на классах. Конструкция Filter: имя фильтра(параметры фильтра) может быть применена и к слоям (Div) и к тегу <span> и к остальным тегам…

Я достаточно подробно остановился на первом пути, потому что считаю его наиболее рациональным. Но есть и второй путь — каждый раз каждому нужному тега присваивать фильтр вместо класса. Вот как это делается.

<тег параметры тега  style=»Filter: имя фильтра(параметры фильтра)«></тег>

Не буду повторяться и покажу это только на одном примере.
<img border=»0″ src=»http://www.webcorp.ru/graphic/logo1.gif» align=»middle» style=»FILTER: alpha(style=1, opacity=0, finishOpacity=100, startX=30, finishX=100, startY=30, finishY=100)»>

 


Фильтры

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

Ваш текст.

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

 1) Alpha — добавление прозрачности

Ваш текст. Ваш текст. FILTER: alpha(style=1, opacity=0, finishOpacity=100, startX=30, finishX=100, startY=30, finishY=100)
style Определяет «тип прозрачности».
0 — равномерная прозрачность
1 — линейный градиент
2 — радиальный (круговой) градиент
3 — прямоугольный градиент
opacity Определяет степень прозрачности.
0 — элемент не виден. Полностью прозрачен.
100 — элемент виден. Полностью непрозрачен.
finishOpacity Определяет конечную степень прозрачности в том случае, если используется прозрачная градиентная заливка (стиль: 1,2,3).
finishX
finishY
Конечные координаты прозрачной заливки. Числа задаются в процентах (без значка %) от размеров рисунка.
startX
startY
Начальные координаты прозрачной заливки. Числа задаются в процентах (без значка %) от размеров рисунка.

2) Blur — размытие элемента

Ваш текст. Ваш текст. FILTER: Blur(Add=1, Direction=180, Strength=40)
Add Если Add=0, то будет показан только результат работы фильтра — размытое изображение.
Если Add=1, то размытое изображение будет наложено на оригинал, создавая тем самым такой же эффект, как и фильтр Photoshop «Размытие в движении».
Direction Угол размытия в градусах.
Strength Степень размытия.

3) Chroma — прозрачность заданного цвета изображения.

Ваш текст. Ваш текст. FILTER: Chroma(Color=719DF0)
Color Заданный цвет изображения становиться прозрачным. Цвета задают в hex-виде или, используя цветовую таблицу, латинским названием (red, green. navy…).

4) DropShadow — добавление тени к объекту.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.dropShadow(Color=0000FF, offX=5, offY=5, positive=true)
Color Цвет тени.
offX Смещение тени по горизонтальной оси. Если провести аналогию с Photoshop, то это «дистанция».
offY Смещение тени по вертикальной оси
positive Если стоит true или 1, то тень будет выглядеть как на рисунке слева. Если стоит false или 0, то фон будет залит цветом, который вы зададите в Color, а сама тень будет прозрачной.

5) FlipH — отражение объекта относительно горизонтальной оси.

Ваш текст. Ваш текст. FILTER: flipH()
Фильтр отражает объект относительно горизонтальной оси. Хотя у фильтра и нет параметров, скобки всё равно нужны.

6) FlipV — отражение объекта относительно вертикальной оси.

Ваш текст. Ваш текст. FILTER: flipV()
Фильтр отражает объект относительно вертикальной оси. Хотя у фильтра и нет параметров, скобки всё равно нужны.

7) Gray — обесцвечивание объектов.

Ваш текст. Ваш текст. FILTER: Gray()
Фильтр показывает объект в градациях серого цвета. Не забывайте про скобки.

Продолжение следует…

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

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

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

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