В мире новостей



DHTML - фильтры

dHTML
Большинство нижеприведенных примеров
смогут работать только в  IE 4.x  и выше.

Текст

Графика

   Mask - Выделяет текст
   Shadow - Супер тень
   FlipH - Переворачивает текст
   FlipV - Переворачивает текст
   Glow - Сияющий текст
   Wave - Волнистый текст
   DropShadow - Още один вид тени

   Alpha - Осветляет рисунок
   Blur - Размазывает картинку
   Invert - УХ!
   Gray - Рисунок делает черно-белым
   Chroma - Опред. цвет дел. прозрачн.
   XRay - Светло-черно-белый цвет
   RevealTrans - Рисунок проявляется

Фильтры применяемые к тексту

Фильтр Mask

Фильтр Mask выделяет объект,как будто бы вы выделили его мышью.
Синтаксис:
STYLE="filter:Mask(Color=color)" color - цвет выделения(#ff0000)
Пример:

<style type="text/css">
.MaskFilter{filter:Mask(Color=ff0000)}
</style>
<div class="MaskFilter" STYLE="width:360;height:30;font:bold 16pt;> Самый выделенный текст</div>

Выделенный текст


Фильтр Shadow

Фильтр Shadow делает объекту тень
Синтаксис:
filter:Shadow(Color=color, Direction=direction) color - цвет тени.
Direction - (от 0 до 315)направление тени.

<style>
.pr2{filter:Shadow(Color="#000000", Direction="150")}
</style>
<div class="pr2" style="width:200;height:30;font:16pt;color:red;">Теневой текст</div>

Теневой текст

Фильтр FlipH

Фильтр FlipH переворачивает объект горизонтально.
Синтаксис:
STYLE="filter:FlipH"
Пример:

<style type="text/css">
.pr3{filter:FlipH;}
</style>
<div class="pr3" style="width:200;height:30;font:16pt;color:red;">Перевёрнутый текст</div>

 

Перевёрнутый текст

Фильтр FlipV

Фильтр FlipV переворачивает объект вертикально.

Фильтр Glow

С помощью фильтра Glow ваш обект засияет.
Синтаксис:
STYLE="filter:Glow(Strength=strength, Color=color;)" color - цвет которым засияет текст.
strength - сила с которой он засияет(0-100)

Пример: <style type="text/css"> .pr4{filter:Glow(Strength=3, Color="#ff0000")} </style> <div class="pr4" style="width:200;height:20;font:bold 16pt;color:gold"> Сияющий текст

 Сияющий текст


Фильтр Wave

Фильтр Wave делает объект волнистым.
Синтаксис: filter: Wave( Freq=freq, Add=add, LightStrength=strength, Phase=phase, Strength=strength) Freq - число волн
Add - незнаю :(
LightStrength - сила волны
Phase - угол волны
Strength - интенсивность волны
Пример:

<style>
.pr5{filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}
</style>
<div class="pr5" style="width:400;height:30;font:26pt;color:red;">Волнистый текст</div>


Вот что получилось:

Волнистый текст

Фильтр DropShadow

Фильтр DropShadow делает тень к тексту.
Синтаксис:

STYLE="filter:DropShadow(Color=color, OffX=Offx, OffY=Offx, Positive=positive)" Color - Цвет тени(#ff0000)
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Значение или 0, или 1.

Пример:

Оттенистый текст

Фильтры применяемые с графикой

Возьмем любую картинку
flower
А теперь применим к нему фильтры:

Фильтр Alpha

Фильтр Alpha осветляет объект.
Синтаксис: STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=X, StartY=Y, FinishX=X, FinishY=Y)"

Opacity - степень осветления(0-100. 0 светло, 100 темно).
FinishOpacity - конечная степень осветления(0-100. 0 светло, 100 темно).
Style - Число 0(???), 1(линия) 2(круг) 3(прямоугольник)
Пример:

<style>
.gr{filter:Alpha(Opacity="90",FinishOpacity="45",Style="3")}
</style>
<img class="gr1" src="/a2.gif">

Что у нас получилось:

Фильтр Blur

Фильтр Blur размывает рисунок в определенную сторону. Синтаксис:
STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" Add - Или 0, или 1.
Direction - От 0 до 315 - в какую сторону произойдет размытие.
Strength - Смещение
Пример:

<style>
<.gr2{filter:Blur(Add="1",Direction="310",Strength="10")}
</style>
<img class="gr2" src="/a2.gif">

Что получилось:

Размытый текст

Фильтр Invert

Синтаксис:
STYLE="filter:Invert"
Пример:

<style>
.gr3{filter:Invert}
</style>
<img class="gr3" src="/a2.gif">

Что получилось:

Фильтр Gray

Фильтр Gray делает рисунок черно-белым
Синтаксис:
STYLE="filter:Gray"

Пример:

<style>
.gr4{filter:Gray}
</style>
<img class="gr4" src="/a2.gif">

Фильтр Chroma

Фильтр Chroma определенный цвет прозрачным.
Синтаксис: STYLE="filter:Chroma(Color = color)"

Color - цвет(#ff0000)
Пример:

<style>
.gr5{filter:Chroma(Color ="#d1914e")}
</style>
<img class="gr5" src="/a2.gif">

 

Фильтр Xray

Синтаксис:
STYLE="filter:Xray" Пример:

<style>
.gr6{filter:Xray}
</style>
<img class="gr6" src="/a2.gif">

Что у нас получилось:

 

Руководство по оптимизации сайта под поисковые системы: не так страшен черт…

Эта статьяобращена как к новичкам, так и к опытным оптимизаторам и SEO -консультантам. Статья родилась в противоположность утверждениям, что поисковая оптимизация сайта- сложная процедура и якобы требует просто феерически глубоких знаний ометодах раскрутки. На самом деле, получение результатов от SEO - долгий процесс, но методы поисковой оптимизации достаточно просты. Ниже я попытался...

Читать полностью

Оптимизация сайтов под поисковые системы

"Найдётся всё!" - говорит Yandex , обнадёживая тем самым пользователей. Но кто обнадёжит владельцев сайтов, которые хотят, чтобы "нашёлся" именно их Интернет-ресурс?

Итак, попробуем разобраться, что же такое поисковая оптимизация сайтов и что она может дать с точки зрения потребностей каждого конкретного владельца сайта.


Читать полностью

Что такое поисковая система Яндекс

Прежде чем пускаться в алгоритмические дебри, давайте вспомним, а как вообще устроена поисковая система.


Читать полностью

Продвижение сайта и уникальность контента

Вы, наверное, не раз попадали на разные сайты с совершенно одинаковым содержанием. А тем временем Яндекс продолжает настаивать на уникальности контента и призывать к этому владельцев сайтов и веб-мастеров.

Уникальный контент способен сделать результаты поиска более объективными и более разнообразными по содержанию. Тут возникает вопрос: кто же наиболее заинтересован в оригинальности содержания:...


Читать полностью
Группа "Креативные Веб Проекты" 107140 Россия, Москва, Гусятников переулок д.7