CSS - применение фильтра Alpha, заливка градиентом

STYLE="filter:Alpha(Opacity=50, FinishOpacity=80, Style=1, StartX=X, StartY=Y, FinishX=X, FinishY=Y)"
Style - Число 0(общее), 1(плавн. переход ) 2(круг ) 3(прямоугольник )

Это описание фильтра с одной из страничек справочной. На днях немного "поразвлекался", такие мысли появились, "фильтровые". :))) Мы, всеж, в Росии живем, и не все в Москве, так что актуальность размеров страничек никто не отменял. Возникло несколько вариантов применения фильтра.

Так как большинство россиян пользуются Эксплорером, вполне можно в некоторых ситуациях сэкономить, например, на кнопках. Многие веб мастера используют изменяющиеся под мышкой кнопки - мы имеем с этого два комплекта графических файлов и проблемы с предварительной загрузкой. Можно сделать так: описать два класса для кнопок с разными параметрами нашего фильтра и просто менять класс при наведении мышки.

.mkn { filter:Alpha(Opacity=100, FinishOpacity=40, Style=1, StartX=30, StartY=Y, FinishX=X, FinishY=Y); }
.mknn{ filter:Alpha(Opacity=100, FinishOpacity=100, Style=1, StartX=X, StartY=Y, FinishX=X, FinishY=Y); }

ONMOUSEOVER="this.className = 'mknn';"
ONMOUSEOUT="this.className = 'mkn';"
В данном случае мы имеем частично прозрачные кнопки, которые становятся видимыми полностью при наведении мышки. Нет добавочных графических файлов, моментальное действие, довольно эффектно проглядывающий фон под кнопками. Попробуйте сами. Конечно, это не роскошные флаш-кнопки, но при необходимости немного сэкономить...
Вариант второй. Тот же эффект можно применить и к простой таблице или даже ячейке. Тут возникает интересный эффект - при разных цветах ячейки и фона под ней получается нечто вроде градиентной заливки.
Вариант третий. При применении данного эффекта к ячейке можно получить вполне приличную градиентную заливку. Без изменения класса, просто назначаем ячейке класс с описанием фильтра Альфа. Один минус - эффектно все это смотрится только на 32битовом мониторе.

Теперь поподробнее о фильтре.
Opacity=100 - начальная прозрачность.
FinishOpacity=40 - прозрачность в конце.
Назначив одинаковую прозрачность для обоих параметров мы получаем равномерную прозрачность, выставив их разными мы получаем плавное увеличение или уменьшение прозрачности.
StartX=30 - участок начальной прозрачности в процентах по горизонтали
FinishX=X - участок конечной прозрачности в процентах по горизонтали
Тоже самое и для вертикали - по Y.
Нам ничего не мешает создать комбинацию параметров для градиента по диагонали в любом направлении и под любым углом.

Еще статьи на тему: Веб дизайн

<<Предыдущая сатья | Следующая сатья>>

S-PRO студия веб дизайна