HTML-фильтры часть 1
Фильтры языка HTML это вещь достаточно экзотическая, очень немногие знают об их существовании, а те, кто знает всё равно не обращают на них внимания. А дело всё в том, что может фильтры, это конечно, и красиво, но уж слишком сложно применить их с пользой на практике.
Тем не менее, пробежавшись по собственному архиву работ, я нашёл несколько самых интересных фильтров и решил рассказать о них вам, уважаемые читатели. А вопрос об их применении оставляю полностью на ваше усмотрение.
Для каждого фильтра имеется пример, который сделан на странице, открывающийся в новом окне.
Фильтр Alpha
С его помощью можно задать уровень прозрачности элемента, для которого Вы его назначаете. Пример использования здесь (откроется в новом окне), код примера:
<HTML>
<BODY background="graphic/559.jpg" >
<IMG height=480 alt="Полупрозрачное изображение"
src="graphic/1024.jpg" width=640 border=0
style="filter:Alpha(opacity=50, finishOpacity=4, style=0,
startX=50, startY=50, finishX=90, finishY=90)">
</BODY>
</HTML>
Что есть что в этом коде?
opacity=50 это главная цифра, само значение прозрачности, которое варьируется от 0 до 100. Ноль - это полностью прозрачное изображение, проще говоря, оно будет неидимым. 100 - обычное изображение без каких-либо отклонений.
finishOpacity=4 это так называемый, конечный уровень прозрачности, в данном примере ни на что не влияет потому, что градиент задан равномерный.
style=0 стиль градиента, возможны четыре варианта: равномерный (0), линейный по горизонтали (1), радиальный, т.е. круговой (2) и прямоугольный (3). В последних двух случаях (радиальный и прямоугольный) opacity задаётся прозрачность центра, а finishOpacity прозрачность краёв.
startX, startY, finishX, finishY - это координаты области элемента, где задаётся его прозрачность, в данном случае значения не имеют.
Фильтр Glow
С помощью этого фильтра можно реализовать эффект свечения текста. Такого эффекта можно добиться, в основном, с помощью графических редакторов. Для начала предлагаю открыть странницу с примером нажав сюда, а затем взглянуть и на его код:
<HTML>
<BODY>
<SPAN style="font: 30pt tahoma; color: chartreuse; position: absolute; top: 0;
filter:Glow(Color=red, Strenght=7)">
Свечение вокруг обьекта
</BODY>
</HTML>
Рассмотрим вышеприведённый код:
30pt размер шрифта
tahoma стиль написания
color: chartreuse цвет текста
top: 0 отступ в пикселях от верхнего края страницы
Color=red цвет ореола вокруг текста
Strenght=7 величина ореола (свечения) в пикселях
Вот мы и познакомились с фильтрами, в следующей статье будет рассмотрена ещё парочка.