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

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

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

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


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

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

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


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

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

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

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

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


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

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

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

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

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


Амперсанды

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

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

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

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


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

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

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

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


Веб-шрифты

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

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


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

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

 

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

ВНИМАНИЕ!!!

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

ВНИМАНИЕ!!!

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

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


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

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

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

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

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

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

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

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


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

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

НО!!!

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

- Всё равно его не брошу, потому что он ... ... многое другое умеет делать. Да!
Ну, а если уж серьёзно, то с IE 8 очень удобно (для меня, по крайней мере) работать на локальном сервере.

Привет!

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


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

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

Реклама

***

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

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

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

Назад

ВВЕРХ

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

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