CSS-ФИЛЬТРЫ ДЛЯ INTERNET EXPLORER

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

Рубрика: Программирование

Так уж повелось со времен царя Гороха, что именно столь часто порицаемая корпорация 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>
Просто абзац.
</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 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 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 добавляем. Либо, что еще проще:

<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 — самый популярный броузер в мире. С другой стороны, такие безобидные вещи, как тень от текста или легкое сияние над буквами придают странице примечательный вид, и было бы странным не использовать их изредка — там, где это действительно нужно…

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

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

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

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