Я бы разделил фильтры на 3 группы:

- Обычные IE фильтры, думаю с ними многие знакомы.
Пример:

Код

#prozra4nii {     FILTER: alpha(opacity=25) } /* Элемент с ID="prozra4nii" станет прозрачным на 75% */

- Более новые и сложные ActiveX. Их плюсом можно считать их разнообразие. Но они работают только в IE5.5+
Пример:

Код

#prozra4nii {     FILTER: progid:DXImageTranform.Microsoft.Alpha(opacity=25) } /* Элемент с ID="prozra4nii" станет прозрачным на 75% */

- NN6+ & Mozilla
Пример:

Код

#prozra4nii {     -moz-opacity:25%) } /* Элемент с ID="prozra4nii" станет прозрачным на 75% */

Заметка: прозрачность можно задавать не только на прямую, указав ее уровень (0-100, где 100 - полная прозрачность).
Существуют доп. стили прозрачности, такие как градиентная прозрачность. Настройки градиента:
- 0 однородный (по умолчанию)
- 1 линейный
- 2 круговой
- 3 прямоугольный
Прозрачность в конце градиента устанавливается с помощью св-ва finishopacity:

Код

#prozra4nii {     FILTER: alpha(opacity=25, finishopacity=75, style=1) }

Так же есть другие доп. параметры (такие как start[X|Y], finish[X|Y]), задающие координаты начала и конца градиента...



Если нужно назначать фильтры при помощь JS - один из многих путей для этого следующий:

Код

document.getElementById("text").style.filter = "alpha(opacity=69)"; // или так: document.getElementById("text").filters["DXImageTransform.Microsoft.Alpha"].Opacity=69;

Замечание: для изменения/назвачения фильтров таким способом обязательно в аттрибуте style элемента должен быть объявлен данный фильтр!

В Mozilla JS управление прозрачностью осуществляется через св-во style.MozOpacity (в Mozilla нет поддержки градиента)

Управление различными св-вами фильтров происходит так:

Код

document.getElementById("text").filters["Alpha"].opacity = 50;

Rollover смена картинок с предварительной загрузкой и эффектом перехода (2 варианта: IE и ActiveX)
1) Internet Explorer version

2) ActiveX version

В кодах сценариев уже есть комментарии, немного расскажу алгоритм их работы:
Используемые там метода play() и apply() - методы для работы с фильтрами. Они действуют в пределах одной странице, поэтому их применяют для создания эффектов перехода изображений. Если же Вам необходимо сделать тоже самое между страницами - фильтры помещаются в meta теги:

Код

<META http-equiv="Page-Enter" content="progid:DXImageTranform.Microsoft.Fade(duration=4.5)"> <META http-equiv="Page-Exit" content="progid:DXImageTranform.Microsoft.Fade(duration=4.5)">

Вернемся к методам play() и apply(). Второй фиксирует вид елемента, к фильтру которого обращается сценарий. Это дает возможность изменить настройки пока элемент вне поле зрения. После этого первый метод осуществляет переход между старым (заторможенным) состояние и только что сгенерированным.

Замечание: Использовались аватары Sardar и Elfet ©

Данный эффект сделан с помощью фильтра Fade. О типах фильтров я расскажу чуть позже :-)

Это сообщение отредактировал(а) Aliance - 29.3.2005, 22:55

Вот тут очень хороший справочник по фильтрам:
Читать

А тут отличный тренажер, с которым Вы сможите увидеть, как работать с фильтрами:
Смотреть

Это все классно!
А что есть еще для Mozilla JS?
Какие там еще есть фильтры - и есть ли где нить дока с их описанием?

Цитата(elennaro @ 29.4.2005, 15:34)

А что есть еще для Mozilla JS?

Цитата(elennaro @ 29.4.2005, 15:34)

Какие там еще есть фильтры - и есть ли где нить дока с их описанием?

Они совпадают с ИЕвскими. Напишу как будет время...
Кстати недавно на quirksmode по-моему читал, что новая мозилла для удобства убрала "свои" фильтры и теперь поддерживает их как и ИЕ...

М	Прощу меня велекодушно простить, времени совсем нет чтобы добить статью :( Как только - так сразу...

Спасибо! Буду эксперементировать...
С детства старался писать скрипты под все более менее известные броузеры начиная с IE4-NN4, но с фильтрами не получается. Щаз забью и буду писать под IE (Интересно, это этично...). А в принципе надо ориентироваться на людей у которых старые броузеры, или это их проблемы (типа могут обновить свой броузер =)?

Это сообщение отредактировал(а) elennaro - 30.4.2005, 09:13

Цитата(elennaro @ 30.4.2005, 09:37)

А в принципе надо ориентироваться на людей у которых старые броузеры, или это их проблемы (типа могут обновить свой броузер =)?

http://forum.vingrad.ru/index.php?showtopic=45669

М	не стоит разводить флуд тут! Пуская до конца дня повисит посты - потом перенесу...

Код

#prozra4nii {     -moz-opacity:25%) } /* Элемент с ID="prozra4nii" станет прозрачным на 75% */

Как изменить прозрачность такого фильтра через JS?

Код

document.getElementById("text").filters["-moz-opacity"].Opacity=69;

не работает. И вообще, такое возможно в ФФ и НН?

Нет, в лисе и других "фильтры" это CSS стили, следовательно меняем через style.
Полезно почитать: http://forum.vingrad.ru/index.php?showtopi...ndpost&p=486582

Aliance, спасибо за ссылки и примеры, но хочется уточнить: верно ли я понимаю, что здесь слово "фильтры" трактуется в широком смысле, примерно как "визуальные спецэффекты"?

Мне кажется, что называть проприетарные CSS-свойства типа "-moz-opacity" и "-moz-border-radius" фильтрами не совсем верно. Все-таки как таковой filter (равно как expression и behavior) - это сугубо Microsoft-овские надстройки над CSS, для работы с ними предусмотрены специальные методы (разумеется, IE-only), а единственный стандарт для них - MSDN.

Мозилловские же расширения в большинстве своем являются "обкаткой" обычных CSS-свойств, которые затем (когда эксперты W3C приходят к единому взгляду на них) входят в стандарт CSS следующего поколения (на сегодняшний день это CSS3).

Если же валить их в одну кучу, может быть путаница (или она уже началась?). Тем более, что иногда "CSS-фильтрами" и вовсе называют CSS-хаки, с помощью которых разделяют стили для разных браузеров...

Если я заблуждаюсь - пожалуйста, поправьте меня и удалите этот пост. И прошу извинить меня за невиданную наглость - поправлять модератора в прикрепленном топике...

Это сообщение отредактировал(а) SelenIT - 15.11.2006, 03:06

Ты прав, но т.к. данный топик существует в разедле для новичков, то конечной целью являеться получение результата в большей степени, чем терминологии (хотя это по сути не совсем верно). Скажем так: стили это нечто общее, а CSS-свойства типа "-moz-opacity" и "-moz-border-radius" - это альтернатива некоторых фильтров IE для Mozilla. Так, наверное, будет более точно.

но в firefox картинка всё равно не прозрачная

lasalexx, только ИЕ работает с процентами, весь остальной мир (включая стандартный opacity) с числами от 0-1.

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

Потому что мозилла не поддерживает фильтры вообще. Не прозрачность (opacity) это CSS3 стиль по моему, яркий пример того, как стандарт приходит когда уже все его тем или иным путём реализовали 

Список всех расширений CSS для лисы можно найти здесь.

Пытаюсь сделать тень для окошка (только для IE).
попробовал воспользоваться следующим фильтром. 

Хотел сделать 2 прямоугольника: первый - тень снизу, второй - справа, и 3 квадрата - закругления.
Используя этот фильтр получилось сделать полупрозрачный градиент слева направо и наоборот.
Сделать градиент сверху вниз не получается. :(
Так же не получилось сделать круговой градиент с центром на одном из углов квадрата.   

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

Приведите пожалуйста пример создания градиента с изменением цвета сверху вниз и пример с использованием координат для задания начальной и конечно точки градиента.


Приведенный выше код никакого результата не дает. Пробовал писать координаты через "," и указывать их в пикселях... ничего. (start[345px, 8px], finish[345px, 16px]) - такая запись координат тоже ничего не дала) :(

Это сообщение отредактировал(а) Loengreen - 21.7.2007, 03:12

Хорошие примеры есть Здесь!

мне очень помогли!

alpha
Фильтр Alpha устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента 

Синтаксис:


Параметры 

Opacity
Значение прозрачности от 0 до 100. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно 
FinishOpacity
Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style. От 0 до 100. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно 
Style
0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент 
StartX
Начальные координаты градиента по горизонтали 
StartY
Начальные координаты градиента по вертикали 
FinishX
Конечные координаты градиента по горизонтали 
FinishY
Конечные координаты градиента по вертикали 
------------------------------------------------------------------------------------------------------------
blur
Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра 

Синтаксис:

Параметры 

Add
Объект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец 
Direction
Направление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов) 
Strength
Степень размытия 
-----------------------------------------------------------------------------------------------------------
chroma
Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Фильтр хорошо применять к изображениям, созданным в формате gif либо png. Для jpeg он обычно не дает хороших результатов, так как для данного формата трудно определить границы заливки отдельных цветов 

Синтаксис:

-----------------------------------------------------------------------------------------------------------
DropShadow
Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень 

Синтаксис:

-----------------------------------------------------------------------------------------------------------
flipH
Фильтр FlipH переворачивает объект горизонтально 

Синтаксис:

-----------------------------------------------------------------------------------------------------------
flipV
Фильтр FlipV переворачивает объект вертикально 

Синтаксис:
 
-----------------------------------------------------------------------------------------------------------
glow
Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта 

Синтаксис:

Параметры


Stregth
Сила свечения в диапазоне 0-100 
Color
Цвет свечения 
-----------------------------------------------------------------------------------------------------------
Gray
Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах 

Синтаксис:


-----------------------------------------------------------------------------------------------------------
Invert
Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные 

Синтаксис:


-----------------------------------------------------------------------------------------------------------
Mask
Фильтр Mask отображает текст так, как будто он выделен мышью 

Синтаксис:


Параметры 

Color
Цвет, окружающий текст 
-----------------------------------------------------------------------------------------------------------
DropShadow
Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень 

Синтаксис:


Параметры 

Color
Цвет тени 
OffX
Смещеение тени относительно текста по оси X 
OffY
Смещеение тени относительно текста по оси Y 
positive
Характер освещения (0 или 1) 
-----------------------------------------------------------------------------------------------------------
Wave
Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси 

Синтаксис:


Параметры 

add
Булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0 
freq
Количество волн 
lightStrength
величина подсветки 
phase
начальная фаза. По умолчанию - 0, изменяется от 0 до 100 
strength
величина смещения 
-----------------------------------------------------------------------------------------------------------
xray
Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке 

Синтаксис:



Это сообщение отредактировал(а) almostlost - 29.12.2007, 11:42

almostlost, откуда такие "древние" и неточные данные?
На смену названиям фильтров, реализованным в IE 4, уже давным-давно пришли те, что были реализованы в IE 5.5 (2000 год!). А об этом - ни слова. Более того, за отличием в синтаксисе кроются еще и отличия в реализации визуального представления (все подробности есть на сайте разработчиков).
Насчет неточностей. Первое, что бросилось в глаза - это описание фильтра mask (теперь это название записывается так: "progid:DXImageTransform.Microsoft.MaskFilter"). Точное описание будет звучать примерно следующим образом: "Отображает прозрачный цвет объекта цветом, указанным в первом параметре, а непрозрачный цвет делает прозрачным".

спасибо!) долго искал)