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 – найпопулярніший броузер в світі. З іншого боку, такі безневинні речі, як тінь від тексту або легке сяйво над буквами надають сторінці примітний вид, і було б дивним не використовувати їх зрідка – там, де це дійсно потрібно …

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*