Текстовые HTML-эффекты были чрезвычайно популярны на заре Интернета и часто использовались слишком часто. Однако постепенно они стали неотъемлемой частью каскадных таблиц стилей, когда Интернет стал 2.0.
Ранние текстовые эффекты HTML
В то время как язык гипертекстовой разметки пришел из мира статических печатных изданий, возможность иметь динамическую анимацию и цвета на экранах компьютеров была очень интересной для ранних веб-дизайнеров. К сожалению, некоторые переборщили, используя теги заголовка <H1> и <FONT COLOR=»Some_Outrageous_Shade_Of_Pink»> до такой степени, что чтение веб-страницы могло буквально вызвать у вас головную боль. Еще хуже был ужасный тег <BLINK>, который создавал эффект неоновой вывески в витрине. Почти повсеместно принято, что тег <BLINK> больше нигде не должен использоваться.
Другие текстовые эффекты HTML включают:
- StrikeThrough <S></S> : это создает текст с перечеркнутой линией, как если бы он был вычеркнут, но все еще остается читаемым.
- Sub- и SuperScript : Используя очевидные теги <SUB> и <SUP>, вы можете делать аннотации и сноски к своему веб-тексту.
- Подчеркивание <U></U> : больше не используется в тексте, потому что подчеркнутый текст обычно подразумевает гиперссылку.
- Код и машинопись : эти текстовые эффекты использовались для обозначения текста, который был процитирован или предназначен для копирования. Хотя он все еще иногда используется в кодированных примерах, таких как javascript, по большей части люди выделяют текст, используя либо <BLOCKQUOTE>, либо просто правило CSS.
Свойства <ШРИФТ>
Одним из интересных аспектов любого текстового эффекта является то, что в значительной степени можно управлять с помощью тега <FONT> вместе со свойством, таким как семейство (группы с засечками или без засечек), стиль, размер, цвет и страница. выравнивание (например, «align=left»). Однако использование этих свойств в теле документа считается дурным тоном. Почти все свойства шрифта используются в <HEAD> документа, где определены стили, или же в совершенно отдельном документе .CSS. Это означает, что полезно тщательно изучить тег <FONT>, даже если вы не используете его по назначению.
Четыре лучших текстовых эффекта
Существует четыре типа тегов для управления внешним видом текста, которые остаются очень полезными, хотя они также изменились за прошедшие годы, чтобы отразить более семантический стиль HTML.
- <P> Абзац : еще более важно иметь возможность разграничивать абзацы онлайн, чем в печатном виде, потому что текст на экране труднее для глаз. Большинство абзацев в Интернете разделяются пробелами, но каскадные таблицы стилей могут изменить это по желанию.
- <I> Курсив : первоначально это обозначало наклонный текст, но некоторые дизайнеры предпочитают использовать другие способы выделения акцента, поэтому тег <EM> все чаще используется для того же эффекта.
- <B> Жирный : как и <I>, хотя люди и хотят выделить какой-то текст, это не всегда делается полужирным шрифтом. Семантический тег для этого эффекта — <STRONG>.
- <H> Заголовок: используется для заголовков, подзаголовков и других заголовков, которые помогают очертить документ. За буквой «H» всегда следует число, обычно от 1 до 5.
Эти четыре тега до сих пор очень часто используются в сочетании с каскадными таблицами стилей, которые можно использовать практически для любого текстового эффекта, который вам нравится. В CSS Zen Garden есть тысячи примеров того, как один и тот же код может дать совершенно разные эффекты, или вы можете посетить такие сайты, как Web Designer Wall , чтобы найти другие замечательные примеры CSS, включая градиентный текст.
Текстовые эффекты Javascript
Еще один способ получить максимальный HTML-эффект — включить javascript в свой код. В библиотеке Javascript на сайте Internet.com есть множество руководств и примеров кода для таких эффектов, как прокрутка текста, всплывающие оповещения и даже 3D-перекручивание текста . Однако во многих браузерах javascript отключен, поэтому нет гарантии, что эффекты будут отображаться так, как вы задумали.
К сожалению, это касается и прямых текстовых эффектов HTML. Различные браузеры даже отображают CSS по-разному, и вы всегда должны проверять на нескольких экранах, прежде чем активно использовать текстовый эффект на своем сайте. Всегда помните, что цель страницы — донести ваше сообщение, и используйте дизайн текста, чтобы улучшить это.