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

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

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

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


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

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

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


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

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

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

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

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

* * *

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

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

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

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

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

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


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

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

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

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

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


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

В данном примере Вы видите создание оригинального текста с помощью большого количества тэгов 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.
Ну ... ... ... оставил его в коде в качестве "раритета". Приятно вспомнить! Да!

А Вам вместо этого покажу не менее интересный эффект, который позволяют реализовать уже как раз современные браузеры.


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

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

Анимация  Сброс

Анимация текста!

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

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

И последнее.

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

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


Рекламный текст

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

Реклама

***

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

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

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

***

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

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

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

На учебные сайты

ВВЕРХ

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

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