VPF::Применение фильтров - Форум программистов

mr.Anderson

Дата 13.11.2006, 15:39 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Нарыл вот такую инфу:

Цитата

# filter Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а также групп элементов, заключенных в тэги DIV. Фильтр задается точно так, как задается любое свойство элемента при помощи стиля.
Пример:
{filter: имя(параметры)}

    * Фильтр ALPHA Фильтр alpha задает уровень прозрачности элемента.
      Синтаксис: {filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}
      Opacity - уровень прозрачности от 0 до 100; finishopacity - конечный уровень прозрачности от 0 до 100, параметр ограничивает использование прозрачности до заданного значения; style - форма прозрачной области: 0 - универсал, 1 - линия,2 - круг,3 - прямоугольник; startx - начало прозрачной области применяется только со style=1, задается в процентах; starty - начало прозрачной области применяется только с style=1, задается в процентах; finishx - конец прозрачной области применяется только с style=1, задается в процентах; finishy - конец прозрачной области применяется только с style=1, задается в процентах.

   * Фильтр BLUR Фильтр blur задает элементу эффект размытости при движении.
      Синтаксис: {filter:Blur(Add="1",Direction="270",Strength="15")}
      Используется с параметрами: add - либо 0-false, либо 1-true direction - задает направление размытия в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов. 0 - Top 45 - Top right 90 - Right 135 - Bottom right 180 - Bottom 225 - Bottom left 270 - Default left 315 - Top left strength - величина смещения.

    * Фильтр CHROMA Фильтр chroma задает прозрачность для одного цвета.
      Синтаксис: {filter:Chroma(Color ="#fdfd03")}
      Использует параметр color - ввиде "#rrggbb"

    * Фильтр DROPSHADOW Фильтр dropshadow отбрасывает тень от объекта.
      Синтаксис: {filter:DropShadow(Color="#6699CC",OffX="3",OffY="3",Positive="1")}
      Использует параметры: color - задает цвет тени ввиде "#rrggbb" offx - задает смещение тени по оси X offy - задает смещение тени по оси Y positive - либо 0-верхний слой виден частично, либо 1- верхний слой виден весь.

    * Фильтр FLIPV Фильтр flipv вертикально переворачивает объект:
      Синтаксис: {filter:FlipV;}

    * Фильтр FLIPH Фильтр fliph горизонтально переворачивает объект:
      Синтаксис: {filter:FlipH;}

    * Фильтр GLOW Фильтр glow задает ореол вокруг объекта:
      Синтаксис: {filter:Glow(Strength=3, Color="#0000ff")}
      Использует параметры: color - задает цвет сияния ввиде "#rrggbb" strength - задает интенсивность сияния от 0 до 100

    * Фильтр GRAY Фильтр gray преобразует объект в черно-белые цвета.
      Синтаксис: {filter:Gray;}

    * Фильтр INVERT Фильтр invert инвертирует оттенки, цвета и яркость объекта.
      Синтаксис: {filter:Invert;}

    * Фильтр MASK Фильтр mask задает выделение объекта цветом.
      Синтаксис: {filter:Mask(Color="#0000ff")}
      Использует параметр color - ввиде "#rrggbb"

    * Фильтр SHADOW Фильтр shadow отбрасывает тень от объекта.
      Синтаксис: {filter:Shadow(Color="#000000", Direction="150")} Используется с параметрами: direction - задает направление тени в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов. 0 - Top 45 - Top right 90 - Right 135 - Bottom right 180 - Bottom 225 - Default bottom left 270 - Left 315 - Top left color - ввиде "#rrggbb"

    * Фильтр WAVE Фильтр wave задает волнообразное отображение объекта.
      Синтаксис: {filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}
      Использует параметры: add - либо 0-false, либо 1-true freq - задает количество волн phase - задает фазу волны lightstrength - задает изменение интенсивности освещенности на пиках волн strength - задает интенсивность волны

    * Фильтр XRAY Фильтр xray показывает контур объекта, как если бы это был рентгеновский снимок.
      Синтаксис: {filter:Xray;}

Но попробовал написать вот так:

Код


<style type='text/css'>

.myclass { filter:Glow(Strength="3", Color="red") }

</style>

<span class='myclass'>MyClass</span>
<p class='myclass'>MyAnotherClass<p>

Но ничего не произошло, текст остался текстом... Как работать с фильтрами? Вещица-то полезная.

--------------------

SelenIT

Дата 13.11.2006, 15:54 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

sim7, похоже, что фильтры работают только для тех элементов, для которых свойство hasLayout является true. Простейший способ его "включить", не трогая более ничего - дописать в стили "zoom: 1".

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

mr.Anderson

Дата 13.11.2006, 15:57 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Так?

Код


<style type='text/css'>

.myclass { filter:Glow(Strength="3", Color="red"); zoom: 1 }

</style>

<span class='myclass'>MyClass</span>
<p class='myclass'>MyAnotherClass<p>

тож не пашет.

--------------------

SelenIT

Дата 13.11.2006, 15:59 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

странно, скопипастил-запустил - у меня пашет smile

sim7, стоп, секундочку - какой браузер? Фильтры (равно как и zoom, по-моему) - по определению IE-only...

Это сообщение отредактировал(а) SelenIT - 13.11.2006, 16:02

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

mr.Anderson

Дата 13.11.2006, 16:09 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Вот блин.
Попробовал еще text-shadow - тож не пашет в Мозилле. Мда.

--------------------

SelenIT

Дата 13.11.2006, 16:16 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Никакие фильтры в Мозилле (да и в Опере), к сожалению, не пашут (насколько мне известно). Для некторых из них есть работающие аналоги в CSS3 (например, opacity для alpha), и, возможно, в SVG/canvas (всякие вращения и т.п. - правда, сам я глубоко в этих вещах не разбирался)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Andres2703

Дата 14.11.2006, 00:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 9.9.2006
Где: Иваново

Репутация: нет
Всего: нет

я видел сайты, работающие с фильтрами на Фоксе.. правда в коде не разобрался - слишком грузный был) но факт.

SelenIT

Дата 14.11.2006, 00:38 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Andres2703, как ни странно - верю, могут быть как минимум 2 варианта:

расширение IETabs, позволяющее запускать IE-шный движок внутри фоксовых табов (сам юзаю;)
эмуляция на JS (например, тут - пример эмуляции градиентной заливки).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Burrr

Дата 14.11.2006, 11:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 5
Всего: 20

Как и писал SelenIT, в Лисе есть аналог alpha. Вот пример стиля, работающего в ИЕ и Гекко:

Код

filter:alpha(opacity=40);-moz-opacity:.40;opacity:.40;

В Опере стили не поддерживаются вообще (хотя не знаю как в 9-й).

--------------------

JavaScript на fastcoder, sqlinfo.ru

Nicholas_S

Дата 14.11.2006, 13:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 19

Изначально, поддержка фильтров поддерживалась только начиная с IE5, затем в версии 5.5 добавились новые фильтры (за индексом 24+, хотя некоторые из них работают достаточно глюкаво, например, на Win2000). И хотя Опера не поддерживает подобные фичи, Mozill'овский движок поддерживает прозрачность уже с версии Netscape 6, и далее сам браузер Mozilla, NS 7-8, Firefox.

Это сообщение отредактировал(а) Nicholas_S - 14.11.2006, 13:22

--------------------

...все в мире относительно

SelenIT

Дата 14.11.2006, 13:34 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Опера 9, afaik, поддерживает opacity (которая без проприетарных приставок -moz- и -khtml-). Только, мне кажется, не надо путать фильтры (чисто MS-овскую фичу) и просто нововведения CSS3...

Это сообщение отредактировал(а) SelenIT - 14.11.2006, 13:34

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

R.M.

Дата 15.11.2006, 11:28 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Фильтры для Gecko начинаются с -moz

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Andres2703

Дата 17.11.2006, 00:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 9.9.2006
Где: Иваново

Репутация: нет
Всего: нет

SelenIT, если смотреть в IETab это уже не мозилла, я же не идиот)

SelenIT

Дата 17.11.2006, 00:18 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Andres2703, а что именно за фильтры хоть были?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Andres2703

Дата 18.11.2006, 18:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 9.9.2006
Где: Иваново

Репутация: нет
Всего: нет

а помоему градиент какой-то фоном

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »