Gray
Этот фильтр позволяет почувствовать себя собакой. Он отбрасывает из рисунка цветовую информацию, т.е. делает его черно-белым. Синтаксис прост:
<img src=../graphics/klubnika.gif style=filter:gray>
До | После применения фильтра |
![]() | ![]() |
Все такие фильтры не вносят ни каких изменений в файл рисунка. Они только меняют способ их отображения в браузере.
Точно так же как и фильтр gray, задаются фильтры: invert (негатив), xray (рентгеновский снимок),fliph (переворот по горизонтали),flipv (переворот по вертикали). Вот примеры их использования:
invert | |
![]() | ![]() |
xray | |
![]() | ![]() |
flipv | |
![]() | ![]() |
fliph | |
![]() | ![]() |
Blur
Этот фильтр создает эффект размытия (возможно при движении). Если применить его в теге <body>, то Ваш посетитель подумает, что у него резко ухудшилось зрение. А представляете, если он еще и обкурился!
Лучше, посмотрим на пример:
<img src=../graphics/blur.gif style=filter:blur(strength=10,add=0,direction=top)>Вот результат:
Если Ву внимательно читали прошлый урок, то уже знаете что обозначают параметры этого фильтра. Для невнимательных поясняю:
Chroma
Этот фильтр позволяет сделать один из цветов рисунка прозрачным. Причем формат может быть не только GIF. Смотрим пример:
<img src=../graphics/klubnika.gif style=filter:chroma(color=black)>
Он работает не на всех рисунках и я, честно говоря, сам не знаю на каких именно. Правда, оно мне никогда и не пригождалось...
Alpha
Ну и, наконец, самое интересное. Этот фильтр позволяет задать уровень и форму прозрачности обьекта. И не важно что это: текст, рисунок, кнопка... Рассмотрим самый простой случай:
<img src=../graphics/kolizey.gif style=filter:alpha(opacity=30)>
Параметр opacity определяет степень видимости объекта (0 - 100). И если под этим рисунком оказался бы текст, то он был бы виден "сквозь рисунок". Применяя этот фильтр, можно накладывать рисунки и текст в несколько слоев, для получения необходимого эффекта.
С этим мы, вроде, разобрались. Теперь попробуем придать некую форму прозрачности. Делается это при прмощи параметра style:
<img src=../graphics/kolizey.gif style=filter:alpha(opacity=30,style=2)>
Но нам хочется еще кое-чего поменять и мы применяем параметр finishopacity, который задает максимальную (в других случаях минимальную) степень видимости, которая обязательно должно присутствовать на объекте (в нашем случае рисунке). Например, если мы зададим opacity=50 при style=1, тогда прозрачность на рисунке будет менятся в пределах 0-50. Но если мы применим параметр finishopacity со значением, например, 20, тогда прозрачность будет колебаться уже в пределах 20-50. Если finishopacity больше opacity, тогда прозрачность тоже колеблется в пределах, указанных двумя параметрами, но наоборот: напр. - 50-20. Для понятности посмотрим живой пример. Допустим, нам нужен красивый заголовок с градиентом:
<table style=width:100%;background:green;filter:alpha(opacity=100,style=1,finishopacity=20);height:5> <tr><td><b style=color:white>Крутой заголовок</b> </table>
Крутой заголовок |
В данном случае пределы прозрачности 100-20. Если поменять местами значения эти двух параметров, то получим:
Крутой заголовок |
А ведь можно и еще круче, при style=2:
Еще более крутой заголовок |
Если Вы когда-то работали с Photoshop, то заметили, что в нашем градиенте кое-чего нехватает. А именно задания координат линии, создающей градиент. В CSS и это возможно. Для определения этой линии нужно указать X,Y одного и другого конца линии при помощи атрибутов startX, startY, finishX, finishY (они работают только при style=1). Допустим, нам нужно сделать очень красивый уголок:
<table style=width:300;height:100;background:#007ca5;filter:alpha(opacity=30,style=1,startx=0,starty=0,finishx=50,finishy=50> <tr><td> </table>
Думаю, теперь эта тема себя исчерпала.
Предыдущий урок | Следующий урок