Шесть лет назад Йохан Хьюберс построил полномасштабную копию Ноева ковчега. Нидерландский плотник...
Сохранение дневника LiveInternet на компьютер с картинками. - (16)Сохранение дневника на компьютер с помощью функции экспорта (export) на Liveinternet –...
Как удалить пользователя из Списка друзей. - (33)Как удалить пользователя из Списка друзей Бывает так, что друг оказался не друг. Со...
"Авиадартс" в Крыму: дух захватывает! - (4)В Крыму — азартные авиационные игры Военно-космических сил России. Появление в небе над полуостро...
Крымская Весна Феодосия 2016 - (10)
Фильтруем.Коды. |
Сегодня я расскажу о фильтрах. Их можно писать в рамках тегов 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] [Новые] |