Логотип Валидатор Валидатор Качество создания сайта

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

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

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


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

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

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


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

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

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

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

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

* * *

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

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

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

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

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

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


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

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

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

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

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


Текст с тенью

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

Тень направлена вниз и вправо.

Ну, а теперь наоборот.

Тень направлена вверх и влево.

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


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

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

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

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


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

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

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

Calibri Без рамки
Arial В рамке
Courier В двойной рамке
Times Фоновый цвет
Georgia Без фонового

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

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

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

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


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

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

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

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


Рисование в HTML

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

ТЕКСТ

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


Амперсанды

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

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

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

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


Текст на рисунке

Использовав всего одно свойство CSS "first-letter", можно получить вот такой отличный эффект, как Вы видите у этих двух абзацев. Первая буква каждого становится необычной.

Причём заметьте! Это именно буквы, а не рисунки.
Нечто похожее показывал в разделе портфолио "Фотошоп" по работе с текстом. Но там совершенно другое: первая буква была картинкой. Можете сравнить ЗДЕСЬ: Работа с текстом (откроется в новом окне).

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


Веб-шрифты

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

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


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

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

 

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

ВНИМАНИЕ!!!

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

ВНИМАНИЕ!!!

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

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


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

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

БЕГУЩАЯ КРАСНАЯ СТРОКА

Бегущий в рамке текст.

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

БЕГУЩАЯ СИНЯЯ СТРОКА

Бегущий в рамке текст.

Не стал заставлять браузер "гонять" текст сверху вниз. Экранного места много нужно.


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

Отличный эффект получался, если к коду 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!

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

И последнее.

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

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


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

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

Реклама

***

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

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

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

***

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


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

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

И второй.

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

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


Учебные сайты

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru