Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » CSS

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

Автор: Петр Семилетов · Добавлена: 2003-11-05
Просмотров: 9038 · Рейтинг: 4.0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Есть ли у вас свой сайт?
Всего ответов: 140572
Наша кнопка
WoWeb.ru - портал для веб-мастера