HTML-фильтры часть 1

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Уроки html

Фильтры языка 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 величина ореола (свечения) в пикселях

Вот мы и познакомились с фильтрами, в следующей статье будет рассмотрена ещё парочка.

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты