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