Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 19. Фильтры применяемые к тексту в HTML.

Автор: Андрей Краснокутский

Дата: 2009-08-26

Как изменить текст на сайте с помощью фильтров.

Как изменить внешний вид текста в HTML (размер, цвет, "жирность" и т.д.) Вы уже знаете, если не помните просмотрите еще раз уроки с 3-го по 6-й.

Но еще HTML поддерживает работу с Фильтрами. Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры, некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: "Доброго времени суток !!!" Давайте попробуем поизвращать эту фразу :-) , применяя к ней различные фильтры.

 

Фильтр Mask.

Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.

Синтаксис фильтра: STYLE="filter:Mask(Color='Color')

Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Листинг 19.1.

<p STYLE="filter:Mask(Color='Red'); width: 15%; height: 28; font-size: 16pt; font-weight: bold; text-align: center;"> Пример </p>

Вот как это смотрится web-странице:

Кроме Фильтра в коде листинга присутствуют элементы форматировния текста - стиль (style) , можете их убрать вообще или изменить на своё усмотрение.

 

Фильтр Shadow.

Создает тень текста.

Синтаксис фильтра: STYLE="filter:Shadow(Color='Color', Direction='Direction')"

Color - цвет тени.
Direction - направление тени (от 0 до 315).

Листинг 19.2.

<P STYLE="filter:Shadow(Color='#000000', Direction='50'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
STYLE="filter:DropShadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')"

Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Листинг 19.3.

<P STYLE="filter:DropShadow(Color='#7FFF00',OffX='3',OffY='3',Positive='1'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Green;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр FlipH.

Переворачивает текст горизонтально.

Синтаксис фильтра: STYLE="filter:FlipH"

Листинг 19.4.

<P STYLE="filter:FlipH; width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: STYLE="filter:FlipV"

Листинг 19.5.

<P STYLE="filter:FlipV; width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр Glow.

Создает эффект сияния.

Синтаксис фильтра: STYLE="filter:Glow(Strength='Strength', Color='Color')"

Strength - сила, с которой текст засияет (0-100)
Color - цвет, которым текст засияет.

Листинг 19.6.

<P STYLE="filter:Glow(Strength='3', Color='#00FF00'); width: 40%; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: DarkGreen;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра:STYLE="filter: Wave( Freq='Freq', Add='Add', LightStrength='LightStrength', Phase='Phase', Strength='Strength')"

Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Листинг 19.7.

<P STYLE="filter:Wave(Freq='5', Add='0', LightStrength='1', Phase='2', Strength='2'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Green;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

 

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Листинг 19.8.

<P STYLE="filter:Blur(Add='1',Direction='30',Strength='10'); width: 40%; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Blue;"> Доброго времени суток !!! </P>

Вот как это смотрится web-странице:

Обратитие внимание: цвет размытия не задается, фильтр задает его сам; в данном примере определен только цвет текста.

 

Применяя фильтры к различным участкам текста, можно добиться очень интересных эффектов.

Внимание! Еще раз напоминаю - не все браузеры поддерживают корректрную работу фильтров, поэтому проверяйте как выглядит "Ваша дизайнерская задумка" .

На сегодня это все. Удачи Вам.

 

Читайте так же:

Почтовая рассылка Главный инструмент Интернет Бизнесмена

Форматы выпусков Почтовой рассылки.

Обучающие Видео Уроки. Скачать бесплатно.

Как я шёл к созданию своего сайта http://www.PC-Cantri.ru

Как создать бизнес и заработать на SMS сообщениях?

Как быстро создать свои собственные информационные товары?

Рекомендации по созданию сайта. С чего начать?

 

Просмотров: 9075


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): МММ
Дата: 2009-11-30

В листинге 19.1 вместо "привет" нужно было написать "доброго времения суток" или наоборот.....хотя и так все доступно и понятно =)

Комментарии добавил(а): Dschinghis
Дата: 2011-05-24

Жаль, что только под IE это робит)))

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT