Фильтруем (подходит для браузера Internet Explorer)

Понедельник, 31 Августа 2009 г. 23:29 + в цитатник

Если нет - посмотрите другой вариант фильтров тут

Сегодня я расскажу о фильтрах. Их можно писать в рамках тегов div или p. Эти фильтры используются вместе с набором аттрибутов размера текста, иначе их не видно. Вот обязательные аттрибуты, которые можно изменить при желании:
div style="FILTER: НАЗВАНИЕ ФИЛЬТРА; width: ШИРИНА ТЕКСТА НАПР.700px; height: ВЫСОТА ТЕКСТА НАПР.25px; FONT-FAMILY: ШРИФТ НАПР.georgia;TEXT-ALIGN: ПОЛОЖЕНИЕ ТЕКСТА НАПР,ПО ЦЕНТРУ center; FONT-WEIGHT: normal; FONT-SIZE: РАЗМЕР ШРИФТА НАПР.25px;">Ваш Текст и КАРТИНКА-ОБРАЗЕЦ НАПР.

.
Далее я вам покажу только смену фильтра без других аттрибутов (шрифта, выравнивания и т.д.). Сначала идут легкие фильтры:

1. flipH Поворачивает объект горизонтально

Ваш Текст

2. flipV поворачивает объект вертикально

Ваш Текст

3. gray делает объект черно-белым

Ваш Текст

4. xray() делает объект в черно-белой гамме

Ваш Текст

5. invert меняет цвета на противоположные

Ваш Текст

Следующие фильтры имеют параметры прозрачности, угла наклона тени, логического значения. ЦВЕТ ТЕНИ ПО УМОЛЧАНИЮ ДЕЛАЮ БЕЛЫЙ

6. alpha затуманивает картинку и текст
(Opacity=<Число прозрачности от 0 до 100>, FinishOpacity=<число лучше 0>, Style=<1 или 2 или 3>, StartX=<число>, StartY=<число>, FinishX=<число>, FinishY=<число>)
Возьмем прозрачность Opaciti=60
6.1

Ваш Текст Style=1

6.2

Ваш Текст Style=2

6.3

Ваш Текст Style=3

7. blur размывает буквы. Будто расфокусировка.
(Add = <логическое значение true или false или 0 или число отличное от 0>, Direction = <угол наклона света>, Strength = <интенсивность света от 0 до 225>)
7.1 Add='0', угол наклона Direction='45', слабая интенсивность света Strength='3'

Ваш Текст

7.2 Add сменим с 0 на 1

Ваш Текст

7.3 Интенсивность света увеличим практически до максимума: Strength увеличим с 3 до 220

Ваш Текст Style=3

8. shadow(Color=<цвет тени>, Direction=<направление тени от 0 до 315 градусов поворота>)
8.1

Ваш Текст Direction=100

8.2

Ваш Текст Direction=40

9. glow(Color=<цвет вокруг букв>, Strength=<интенсивность свечения от 0 до 225>).
В моем браузере что-то незаметна разница смены Direction= от 10 до 220, но рисунок в 9.2 выглядит ярче (солнечные лучики светлеют)
9.1 Direction='10'

Ваш Текст Direction=10

9.2 Direction='220'

Ваш Текст Direction=220

10. dropShadow(Color=<цвет тени>, OffX=<число пикселей тени по оси Х вправо>, OffY=<число пикселей по оси У вниз>,
Positive=<логическое значение или число>). Если значение этого свойства true (или 1), то тень cоздается от непрозрачных пикселей объекта, если false (или 0) - от прозрачных. Следите чтобы число пикселей не превышало число пикселей вашего рисунка. Например в примере число пикселей 150х145 точек.
10.1 Cоздадим тень от непрозрачных частей объекта от серединки картинки
Тень пошла от середины, т.е. от координат OffX=75, OffY=75, Positive='0'

Ваш Текст Direction=220
Ваш текст
Ваш текст
Ваш текст

ВАШ ТЕКСТ
Ваш текст

OffX=10, OffY=10
10.1.1

Ваш Текст Direction=220
Ваш текст
Ваш текст

10.2 Передвинем тень вправо вниз (Отрицательные значения соответственно передвигают ее влево вверх)
Тень пошла от координат OffX='125', OffY='140', и от прозрачных частей Positive='1'

Ваш Текст Direction=220

10.2.1 OffX=10, OffY=10

Ваш Текст Direction=220
Ваш текст
Ваш текст

11. mask(Color=<цвет>): выделяет объект как будто вы его выделили мышью. Рисунок при этом становится невидимым.

Ваш Текст Direction=40
Ваш текст
Ваш текст

12. chroma(Color = <цвет>) делает определенный цвет фона в формате RGB прозрачным, напр. chroma(Color = #0F106C)

Ваш Текст Direction=40

13. wave делает объект волнистым
(Add=< true (или 1) или false (или 0)>, Freq=<число волн>, LightStrength=<число силы волны от 0 до 100>, Phase=<число смещения волны от 0 до 100 относительно окружности где 100=360 градусов>, Strength=<интенсивность волны>)
13.1

ВАШ ТЕКСТ

13.2 При add=1 текст становится насыщеннее, зато у рисунка повышается яркость:

Ваш Текст add=1

13.3 При повышении числа волн freg буквы "колбасит", а рисунок похож по контурам на отрывную марку:

Ваш Текст add=0 freg=19

13.4 При увеличении силы волны LightStrength на рисунке мелкие детали стираются до полосочек

Ваш Текст add=0 freg=9

13.5 Интенсивность волны словно набегает на буквы и стирает их так:
strength=2 повысили до 10

Ваш Текст add=0 freg=19

Вот так, и никакого Фотошопа :)

Серия сообщений "Кодировщик":
Шрифты, кнопки и прочее оформление
Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
...
Часть 8 - Курсоры на выбор для браузеров типа Internet Explirer
Часть 9 - Пост - просто картинка!
Часть 10 - Фильтруем (подходит для браузера Internet Explorer)
Часть 11 - Как сделать открыточку с музыкой? Смотрим
Часть 12 - Для браузера типа Internet Explorer: Вот такой волшебный текст без цветного генератора!
...
Часть 30 - Фильтруем (убедитесь, что ваш браузер видит тени букв)
Часть 31 - Тень у рамки
Часть 32 - Читать закрытые записи