• Авторизация
Дневник Nika_C Лента друзей - Дневник - Полная версия


Без заголовка 02-09-2009 14:01 к комментариям - к полной версии - понравилось!

Это цитата сообщения ka82 Оригинальное сообщение

Фильтруем



Сегодня я расскажу о фильтрах. Их можно писать в рамках тегов 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 [показать]




Вот так, и никакого Фотошопа :)
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Без заголовка | Nika_C - Дневник Nika_C | Лента друзей Nika_C / Полная версия Добавить в друзья Страницы: раньше»