Я бы разделил фильтры на 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