CSS-ФИЛЬТРЫ ДЛЯ INTERNET EXPLORER Версия для печати
 

Так уж повелось со времен царя Гороха, что именно столь часто порицаемая корпорация Microsoft является в некотором роде двигателем прогресса. Само собой разумеется, что броузер Internet Explorer служит тому подтверждением - именно в нем наиболее развита поддержка Cascade Style Sheets, и именно IE предоставляет в распоряжение веб-дизайнера наибольшее по сравнению с другими броузерами количество CSS-свойств. Есть и обратная сторона медали - расширения CSS, реализованные Microsoft'ом, обходят стороной другие броузеры. Впрочем, страница, которая выглядит одинаково в любом броузере - это пустая страница. Нужно решить для себя, под что "затачивать" дизайн. Если вы выберете Internet Explorer, то материал данной статьи вам пригодится. 
Современные версии Internet Explorer поддерживают ряд real-time фильтров – и графических, и текстовых. Раньше такие вещи нужно было делать в Photoshop'е или линуксовом GIMP, а теперь пользователь, не знакомый с этими продуктами, может использовать эффекты размывания изображения, затенения текста, и многое другое - о чем речь пойдет далее.
Если вы не работали раньше с CSS, то прочтите краткую "инструкцию по применению". Итак, использовать CSS-свойства можно тремя способами. Первый - описывать стили в секции HEAD HTML-документа. Вот как это выглядит на примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<style>
.ParaHeader{
font-size: larger;
color: brown;
text-align: center;}
</style> 

</head>

<body>

<p class="ParaHeader">
Просто абзац. 
</p>

</body>
</html>

Вначале мы описали новый класс, и назвали его ParaHeader (перед названием ставится точка). Этот класс задает размер шрифта равным larger, коричневый цвет, и выравнивание по центру. Затем, уже в BODY документа, мы используем описанный класс для форматирования параграфа (абзаца), присвоив тэгу <P> класс ParaHeader. Теперь текст "Просто абзац" будет отформатирован согласно заданным в классе параграфа свойствах. 
Другой способ использования CSS - задание свойств непосредственно в тэгах. Таким образом, предыдущий пример можно записать вот так:

<p style="font-size: larger; color: brown; text-align: center;">
Просто абзац. 
</p>

Отметим, что предварительно описывать класс в этом случае не нужно. И наконец, последний способ - можно описывать классы в отдельном файле (*.css), и подключать этот файл к HTML-документу. 

Пример:

В файле "colordef.css" задаем свойства документа (цвета ссылок, фона и текста):

A:link { color: #FFFFFF }
A:visited { color: #C0C0C0 }
A:active {text-decoration: none; color: "#ffcc00"}
A:hover {text-decoration: none; color: "#ccffff"}
body {background: #722C70; color: #FFFFFF}

Далее, в test.htm в секции HEAD подключим CSS-документ:

<link rel="stylesheet" type="text/css" href="colordef.css">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="colordef.css">

<title>test</title>

<a href="http://www.altavista.com">Altavista</a><br>
<a href="http://www.rambler.ru">Rambler</a>

</body>
</html>

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

.имя_класса {filter: имя_фильтра(параметры фильтра)}

А затем, уже в BODY, присвоим класс контейнеру DIV, в который заключим подвергаемые эффекту данные. Вот как можно, например, затенить текст:

В HEAD:

<style>
.shad{filter: shadow(Color="#000000", Direction="3")}
</style>

В BODY:

<div class="shad" style="width:100%; height:8%; font:30pt" align="center">
ТЕКСТ С ТЕНЬЮ
</div>

Получаем то, что изображено на рис.1


Рисунок 1

Синтаксис же этого фильтра таков:

Shadow (color=значение, direction=значение;), 
где color - цвет тени, а direction - ее направление, выраженное в градусах. Эффекта тени можно добиться и при помощи эффекта с несколько иным синтаксисом: 
DropShadow(color=значение, OffX=значение, OffY=значение, positive=значение), 
где color - цвет тени, OffX - ее смещение от текста относительно оси X, OffY - то же, но для Y-оси, и positive указывает на направления смещения - вверх или вниз (0 или 1).

Другой хороший фильтр - Glow, то бишь "сияние" - рисует цветной ореол по контуру текста. Синтаксис:
glow(strength=значение, color=значение;) - здесь strength задает интенсивность сияния, а цвет - его значение. Пример (рис. 2):

В HEAD:

<style>
.glow{filter: glow(Strength=50, color="white";)}
</style> 

В BODY:

<div class="glow" style="width:100%; height:8%; font:30pt" align="center">
СТАЛЬНОЙ РАССВЕТ
</div>


Рисунок 2

Как видите, получается весьма стильно выглядящая "шапка" страницы, и это совершенно без применения графики! Однако, в отличном от IE броузере эту красоту никто не увидит... Далее в тексте я буду приводить только синтаксис фильтров, чтобы не повторять очевидное.
Еще два фильтра, FlipH и FlipV, переворачивают текст (рис. 3), при этом первый поворачивает символы в строке, "отзеркаливая" текст, а FlipV - переворачивает по вертикали с ног на голову, не меняя порядок. Синтаксис: FlipH или FlipV (пример описания класса: .FlipH{filter:FlipH;})


Рисунок 3


Фильтр Mask (рис. 4) отображает текст так, будто бы он выделен мышью. Формат: Mask(Color="значение"); В Color вы задаете цвет, который будет окружать текст. Оставляя в стороне незначительные остальные текстовые эффекты, обратимся к графическим. Использовать их надо так - описываем в HEAD класс, а затем в тэге IMG добавляем class="имя_класса". Либо, что еще проще:

<img src="имя_файла style="filter:имя фильтра(параметры)">


Рисунок 4

Вначале в качестве образца приведу изображение с моего сайта (рис. 5) - как оно выглядит в оригинале.


Рисунок 5

Теперь применим к нему эффект Alpha, который затуманит изображение (рис. 6). 


Рисунок 6

Синтаксис таков:
Alpha(Opacity=значение, FinishOpacity=значение, Style=значение, StartX=значение, StartY=значение, FinishX=значение, FinishY=значение). 
Здесь Opacity - начальная степень матовости, затуманенности в пределах от 0 до 100. Чем меньше значение, тем больше проявляется действие эффекта. FinishOpacity - конечная opacity. Эти два параметра задают градиентные компоненты эффекта. 
Опции StartX/Y, FinishX/Y - устанавливают границы действия эффекта. Точнее, если взять, к примеру, ось X, то до пиксела StartX используется начальная Opacity, затем между StartX и FinishX идет градиент, а после FinishX - Finish Opacity.
Последний параметр - Style - задает стиль эффекта. Возможные значения: 0 - простое изменение opacity, 1 - линеарный градиент, 2 - овальный, 3 - прямоугольный.

Фильтр Blur - размазывание (рис. 7).



Рисунок 7

Синтаксис таков: 
Blur(add=значение, direction=значение, strength=значение). 
Direction - значение в градусах, выражающее угол размазывания пикселов. Strength - сила размазывания. Add - опция, которая может принимать два значения: 0 и 1. 0 - обычное размытие, 1 - так называемый motion blur, т.е. создание следа движения. 
Invert - один из самых эффектных фильтров, инвертирует цвета изображения (рис. 8).


Рисунок 8

Синтаксис прост: Invert, и все. Пример: 
<img src="рис_5.jpg" style="filter:Invert">. 
Похожий эффект производит фильтр XRay, или рентген. А Grey конвертирует изображение в градации серого цвета. Оба фильтра, как и Invert, параметров не имеют. 
Вот такие они, эффекты от Internet Explorer. Построив весь дизайн на них, можете махнуть рукой на пользователей Netscape или Opera, и утешать себя мыслью, что все-таки IE - самый популярный броузер в мире. С другой стороны, такие безобидные вещи, как тень от текста или легкое сияние над буквами придают странице примечательный вид, и было бы странным не использовать их изредка - там, где это действительно нужно… 

 
Автор: Петр Семилетов
 
Оригинал статьи: http://www.woweb.ru/publ/64-1-0-380
 
Рейтинг@Mail.ru
© Студия WEB-дизайна PM-Studio, 2005. Все права защищены.