Текстовые эффекты

Отображение текста

Различных техник, использование которых позволяет браузерам по-разному отображать текст, много.
Покажу лишь то, что интересует самого - заставить текст меняться БЕЗ использования каких-либо сложных скриптов.   HTML + CSS только!
И, как делаю обычно, сначала показываю самое простое, а дальше - интереснее!

Всплывающая подсказка

Для начала покажу простейший способ: использование атрибута "title" для тэга <abbr>. Наведите курсор мыши на аббревиатуру "США" в тестовой фразе.

Страна США расположена на континенте Северная Америка.

Выделение текста

Если нужно выделить какой-либо отрезок текста, это легко можно сделать с помощью специальных тэгов выделения: тэга <big> (большой), и тэга <b> (жирный). Примеры показал ниже.

Это простое предложение ещё без использования специальных тэгов.

В этом абзаце часть слов текста выделил тэгом жирности, что сразу заметно.

И в этом предложении тоже хорошо видно использование специального тэга.

В этом же предложении добавил ещё и тэг жирности для большего выделения.

Ну а здесь я использовал целых три подряд идущих специальных тэга <big>.

А сейчас, кроме трёх подряд идущих тэгов <big>, ещё <b> применил.

* * *

Выделить нужный фрагмент текста можно не только увеличением и жирностью, но и противоположным действием - уменьшением. Это позволяет сделать другой форматирующий тэг - <small> (маленький). Вот пример его действия.

Это предложение ещё без использования упомянутого тэга.

Ну, а в этом предложении уже хорошо видно использование специального тэга.

И точно так же, как с увеличением, можно "обернуть" нужный участок в несколько тэгов <small>, тогда уменьшение будет ещё сильнее, но гораздо проще достигнуть желаемого текстового эффекта через таблицу стилей.

К примеру, так:

Стиль этого предложения задан через таблицу CSS.

Оформление текста

Гораздо более интересные эффекты для оформления текста даёт использование тэга HTML <font>. Он позволяет менять три параметра: размер, цвет и гарнитуру шрифта с помощью трёх своих атрибутов.

Примеры использования атрибутов тэга
▼

Этому предложению дал голубой цвет, указав <font color="blue">

Здесь поменял шрифт Verdana на courier, прописав <font face="courier">

В этом примере использовал в данном тэге атрибут размера <font size="1">

А здесь <font size="7">

В этом же примере все три атрибута работают вместе, т.е. <font size="5"  color="red"  face="courier">

* * *

*Prim.  Атрибут "size" даёт возможность изменять размеры текста от 1 до 7, что действует так: 1 - самый маленький; 2, 3, 4, 5, 6 - больше, а 7 - самый большой.
И никакие другие цифры, кроме указанного диапазона (дробные в том числе), работать не будут!  Точнее - будут, но реагировать браузеры будут только на те значения, что заданы в показанном диапазоне. Они "сбрасывают" их до ближайшего правильного значения. Смотрите сами.

В этом примере я специально прописал некорректное значение атрибуту - size="0"

Хорошо видно, что текст уменьшился, но размер его стал точно таким же, как если бы я установил атрибуту размера значение 1.  И то же самое произойдёт, если прописать любое значение больше 7.  Да, хоть 1000!  Увеличится, НО(!) не больше, чем это происходит при установке корректного значения, т.е. самой цифры 7.

Однако!

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

Вот пример использования атрибута с отрицательным значением, т.е. size="-7"

Думаю, видно, что тестовое предложение с отрицательным максимальным значением стало точно таким же, как если б в атрибуте размера поставить 1.

Подобный "фокус" (смена знака у значений) часто используется при создании различных анимационных текстовых эффектов.

И последнее.

В одном из справочников по HTML и CSS, кстати сказать, довольно хорошем, я читал, что "по умолчанию" атрибут "size" со значением 1 задаёт тексту размер всего в 3px. Так вот это - полная Ерунда!

Вот он, ниже - текст размером в 3px!
▼

В этом примере использовал CSS, указав font-size: "3px".

Текст такого крохотного размера вряд ли кто когда-нибудь встречал на сайтах ... ... .

Видимость текста

Теперь ещё интересное. Если нужно изменить видимость какого-либо текста, такое можно сделать, использовав свойство CSS "opacity". Сравните обычную строку с тестовой.

Это обычная строка с фоновым выделением.

В этой установил названному свойству значение 0.5

О регулировке видимости разных элементов, а не только текста, показал и много написал в разделе "Прозрачность элементов" (откроется в новом окне).

Текст с тенью

Не менее интересная возможность изменять видимость текста на сайте, использовав свойство CSS "text-shadow", что переводится как "текстовая тень".

А раз уж речь пошла о возможности создания (с помощью CSS) тени для текстов на веб-страницах, что нередко можно увидеть в дизайне сайтов, то стоит показать, что ещё можно сделать с этой самой тенью.

Объёмный текст

Вот такой интересный текстовой эффект "объёма" получается, если немного усложнить предыдущий образец с тенью.

Пример объёмного текста

Ну, а если добавить к коду данного примера ещё и правило "color: green", скажем, то сам текст и его выпадающая тень станут зелёными. Короче, какой цвет добавим, таким всё и станет. Сейчас это правило отсутствует вообще.

Возможность выбора текста

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

Для изменения вида этого тестового абзаца нажимайте переключатели.

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

И ещё нужно помнить: давать для выбора на сайте шрифты из "безопасных шрифтовых стеков CSS".

Что это такое?  Смотрите:

Если же Вы решите использовать какие-то оригинальные шрифты для организации возможности выбора, которых, скорее всего, нет на компьютере пользователя, их нужно будет специально подключать к сайту.  Как?   Об этом узнаете здесь:

Разноцветные буквы и текст

В данном примере Вы видите создание оригинального текста с помощью большого количества тэгов font и его атрибутов: color и size.

П р и м е р   р а з н о г о   ц в е т а   б у к в   и   с л о в !

Этот пример выводится статически.
А самое интересное - автоматическую смену цвета и размера, входящих в текст букв и слов, можете увидеть здесь: "Генератор цветных текстов" (откроется в новом окне).

Рисование в HTML

И не менее интересную возможность для оформления любого текста даёт использование специального тэга HTML "canvas" (холст). Пример перед Вами.

ТЕКСТ

Подробности об этих тэгах найдёте здесь: "Рисование в HTML" (откроется в новом окне).

Амперсанды

Очень интересную возможность даёт использование амперсандов в HTML-коде страницы для её красочного оформления.

Ради интереса, вывел с их помощью на экран символы карточных мастей, а вообще, этот способ постоянно используется для вёрстки веб-страниц, имеющих большое количество технических, литературных, короче, каких-то специальных символов в тексте.

Выведено через амперсанды: ♥ ♦ ♣ ♠

Подробно, с примерами написания различных амперсандов, и с их отображением, можете посмотреть в разделе "Амперсанды" (откроется в новом окне).

Думаю, нет нужды писать, где это можно использовать. Везде!!!
На любом сайте легко найти применение такому оригинальному написанию букв, в любой рекламе и рассылках.

Веб-шрифты

Подключение к страницам сайта нестандартных шрифтов - самый частый случай использования CSS при разработке оригинального дизайна.

Посмотреть примеры подключения разных типов веб-шрифтов, и подробно узнать, как это делалось, можно на странице "Веб-шрифты" (откроется в новом окне).

Бордюр между абзацами

Интересную возможность даёт CSS для необычного оформления страницы. Достаточно всего лишь "повесить" какой-нибудь рисунок на фон абзаца. Результат - следующий абзац превратился в бордюр.

Ничего не писал внутри тела абзаца, а просто указал неразрывный пробел, но можно и так:

ВНИМАНИЕ!!!

Либо ещё и рамку прописать абзацу:

ВНИМАНИЕ!!!

Короче, различных способов приукрасить веб-страницу множество.

P.S.   Это я "прицепил" первые попавшиеся на глаза (что были на сервере) картинки, чтоб показать сам принцип такого метода. Специально задавшись целью украсить текст, легко можно придумать огромное количество вариантов.

Бегущая строка

Хорошо использовать эту форму подачи информации для выделения её. Безусловно, обращает на себя внимание на фоне неподвижных строк текста.

Можно задать им любой размер, цвет и скорость движения, его направление. Делается это элементарно: прописываем всего одну строчку в коде HTML. И всё! Готово.

Не стал заставлять браузер "гонять" текст сверху вниз. Экранного места много нужно, но всё же ещё два примера действия тэга <marquee> для создания интересных текстовых эффектов показать стоит.

Это текст, двигающийся в разных направлениях по выделенному ему полю.

Атрибуту behavior дал значение "alternate".
Пример текста обёрнул в 2 тэга <marquee> с одинаковыми значениями этих атрибутов.

А если во 2-ом тэге <marquee> этому атрибуту дать значение "bounce", то получается тоже очень интересно!

Скорость "бега" строк текста, т.е. скорость его движения во всех показанных выше примерах можно менять с помощью атрибута scrollamount.
Скорость, если её не указать конкретно, "по умолчанию" имеет значение "6", какую имеют все примеры, кроме тех, что в рамках из точек. Там я установил её значение в "2".

Мерцающий текст

Отличный эффект получался, если к коду HTML немного CSS добавить.
Текст начинал мигать, что так же очень здорово выделяло его от обычного, позволяя делать разные "рекламные штучки".

НО!

Видеть это могли только те, кто пришёл со старыми браузерами Firefox, Opera, а вот мой когда-то любимый Internet Explorer 8 "подмигивать" нам не желал.

Привет!

Примечание!  К тому же.
Проводя ежегодную ревизию всех страниц своего сайта, заметил, что новые версии Firefox и Opera тоже перестали поддерживать такое очень интересное правило CSS, как text-decoration: blink.
Ну ... ... ... оставил его в коде в качестве "раритета". Приятно вспомнить!

ОДНАКО!

С помощью более новых правил CSS заставить текст мерцать вполне возможно, причём, несколькими способами. И один из них (самый простой) Вы видите ниже.

Пример мерцающего текста.

Сделал данный простой пример мерцания текста, использовав два имеющихся в CSS свойства: "animation" и "opacity" (об opacity - видимости текста - писал выше).  смотреть:

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

Здесь показываю ещё один очень интересный текстовой эффект, который позволяет реализовать CSS.

*Светящийся текст CSS*

Скорость свечения легко регулируется в CSS-коде, а задний фон, т.е. "background", можно вообще не указывать, а можно поставить ему значение "none" (отсутствует), если в дальнейшем планируется использовать такой эффект в качестве рекламного текста на каком-нибудь фоне.
Великолепно работает и так, и этак. Проверял!

Переливающийся текст

Данный пример плавного перелива цветов текста сделан тоже исключительно с помощью только лишь CSS.   Без всяких скриптов!

Правда, следует отметить, что CSS-код показанного примера довольно длинный, поэтому, считаю, что подобный эффект гораздо проще можно реализовать средствами не CSS, а с помощью фотошоп.
К слову, посмотрите по данным ниже ссылкам раздел "Работа с текстом", пример №21. смотреть:

Пример, который Вы там увидите, если зайдёте по упомянутой ссылке, думаю, ничуть не хуже представленного здесь. А даже лучше!  Чем?!
Да хотя бы тем, что код вывода GIF-рисунка в сотни раз(!) меньше кода CSS, нужного для работы примера здесь.

И ко всему прочему!

Важно!  Местный пример, конечно, занятный, НО(!) для моего сайта он не особенно подходит, т.к. для его корректной работы фон необходим (в отличае от предыдущего примера светящегося текста). Оптимальный - белый.
А поэтому, данный текстовой эффект будет хорош для сайтов с белым фоном веб-страниц.

Ну ... ... тут уж каждый решает сам.

И последнее.  Я пробовал давать разные фоновые цвета представленному примеру.  Так вот любой цвет, кроме белого, приводил к тому, что светлые полосы двигались туда-сюда по цветному фону, а сам текст оставался неизменным.

Иногда получалось довольно неплохо, но это уже был НЕ переливающийся текст, а нечто другое. Что-то больше похожее на анимированный фон для текста.

Хотя, конечно же, анимированный фон для текста гораздо интереснее в следующем примере текстовых эффектов.

Блестящий фон для текста

*блестящий фон*

Вот так выглядит пример текстового фона, о котором говорил выше. Правда, правильнее его было бы назвать НЕ фоном, а "покрывалом", т.к. мерцающий элемент наложен НА текст, а не ПОД него.
И CSS-код показанного примера, как и в предыдущем случае, достаточно внушительный.

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

Изменяемый текст

В этом подразделе показываю интересный пример смены цвета и стиля тестового абзаца текста при наведении и уходе курсора, нажатии и отпускании кнопки мыши, при двойном клике по тестовой строке, и т.д.. Всё время получается разное. Пробуйте!

Это тестовый абзац изменяемого текста.

**Prim.   Для возвращения тестового абзаца в исходное состояние страницу нужно перезагрузить.

* * *

А дальше показываю ещё два, и не менее интересных текстовых эффекта, которые нам позволяет реализовать "могучая связка" - HTML и CSS.

Текстовая анимация

Написанная тестовая фраза, после нажатия кнопки "Анимация", будет "стираться" курсором, т.е. исчезать.
Для повторного просмотра нажмите кнопку "Сброс".

Нельзя, конечно, сказать, что показанный пример текстовой анимации совсем уж простой. В нём тоже много строчек CSS-кода! Но, тем не менее, сделан он совершенно БЕЗ каких-либо скриптов. Только HTML + CSS!

Да, кстати! С тем же успехом, немного изменив, можно прописать в коде, чтобы фраза не стиралась, а наоборот - появлялась. Такой приём используется гораздо чаще.

И последнее.

Лучше не делать на одной странице сразу две разных по смыслу текстовых анимаций. Уже пробовал!
Срабатывают-то обе. НО! Либо обе "стираются", либо обе "печатаются", хоть я и, ясное дело, присваивал примерам разные имена в коде, но ... ... ... .

Всегда "рулит" самая последняя, т.е. более приоритетная запись кода.

Управляемая анимация

И ещё один пример текстовой анимации, которой тоже можно управлять, находится в разделе "JavaScript", правда, но упоминанию об этом и здесь самое место.

Вот эта страница: "Управляемая анимация" (откроется в новом окне).

А сказал я о ней здесь (в разделе простых текстовых эффектов) потому, что сам эффект текстовой анимации может работать БЕЗ всяких скриптов. Только HTML + CSS!

И кстати!  На странице, на которую дал ссылку, очень подробно и наглядно объясняю, как создаётся и настраивается подобный текстовой эффект.

Движущийся рекламный текст-рисунок

Хоть это уже и не в "чистом виде" текст, а рисунок ("набросал" в фотошоп), но Вы же его видите! Можете читать.
И он двигается. Причём, заметьте, без всяких скриптов!

***

Можно ещё огромное количество интересных сюжетов придумать по использованию этой простейшей технологии.
Самое главное её преимущество - она оставляет программный код лёгким.

В сочетании с "Фотошоп" возможности по оригинальному представлению текстовой информации возрастают многократно.
Но это Вы сможете посмотреть в соответствующем разделе, посвящённом применению программы "Фотошоп": "Работа с текстом" (откроется в новом окне).

А здесь можете увидеть использование "бегущей строки" для создания лёгкого, простого слайд-шоу на сайте: (откроется в новом окне).

***

И, наконец, ещё два очень интересных способа работы с текстом. Правда, уже не таких простых, какие показывал здесь, но сказать о них всё же стоит.

Другие текстовые эффекты

Первый сделал с помощью JavaScript. Это красивый эффект "бегущего" мигания разными цветами букв текста. Он здесь: "Анимация букв" (откроется в новом окне).

И второй.

Это практическое использование jQuery для управления видимостью текста на странице сайта. Назвал его: "Постепенное появление текста" (тоже в новом окне).

Кстати!  На упомянутой странице не только показываю пример этого интересного текстового эффекта, но и подробно объясняю, как его создать, как им управлять с помощью CSS и JS-скрипта, а ещё разбираю два варианта кода для организации такого же эффекта у себя на сайте. Может, для объявлений, или рекламы чего-либо.

ВВЕРХ