1.4.7. Индексы
И
ногда
требуется, чтобы текст располагался в
той же строке, что и основной, но немного
выше или ниже, например ссылки на
подстрочные замечания (цифры или
звездочки) или номера переменных в
математических формулах. Такие тексты,
смещенные вверх или вниз относительно
основной строки, называют верхними или
нижними индексами.
В HTML для отображения текста в виде индексов предусмотрены контейнерные теги <sup> и <sub> соответственно для верхних и нижних индексов. Очевидно, главное назначение данных тегов в том, чтобы обеспечить определенное отображение их содержимого. Но визуализацию содержимого лучше задавать посредством CSS, а не тегами или их атрибутами.
В CSS есть параметр vertical-align, который позволяет решить различные задачи вертикального выравнивания, но здесь мы рассмотрим лишь создание верхних и нижних индексов посредством значений super и sub соответственно (см. рис.). Возможно, размеры индексов следовало бы немного уменьшить. Для этого достаточно добавить к ним стилевой параметр, задающий размер шрифта.
1.4.8. Выделение первой буквы строки и первой строки в блоке текста
Ч
тобы
выделить первую букву строки в блоке
текста (сделать так называемую буквицу),
достаточно задействовать псевдокласс:
first-letter.
Аналогично, для выделения первой строки
служит псевдокласс: first-line.
Данные
псевдоклассы применяются к блоковым
(а не внутристрочным) элементам, таким
как <р>, <div>,
<body>.
На рис. показан пример создания буквицы для абзаца и выделения подчеркиванием первой строки в блоке <div>.
1 .4.9. Объемный текст
Текстовые заголовки с эффектом тени, создающим впечатление объемности, чаще всего выполняют средствами графического редактора и вставляют в Web-документ как картинку. Вместе с тем аналогичный результат можно получить с помощью CSS. Для этого необходимо наложить текст одного цвета на такой же текст другого цвета с некоторым сдвигом по вертикали и горизонтали. Лучшего эффекта можно достичь наложением друг на друга трех идентичных по содержанию текстов, чтобы создать иллюзию не только тени, но и подсветки краев букв.
Н
а
рис. показан пример создания объемного
заголовка только с тенью (без подсветки).
Здесь два экземпляра текста заголовка
помещаются в контейнеры <div>
с одинаковыми значениями атрибута id,
чтобы они отличались от блоков <div>,
предназначенных в документе для иных
целей (в примере id="head").
Первый экземпляр - передний план
заголовка, а второй - его тень. Второй
экземпляр позиционируется с некоторым
сдвигом относительно своего положения
в нормальном потоке и перемещается
на задний план с помощью параметра
z-index:-1.
Параметры сдвига (top
и left)
подбираются экспериментально в
зависимости от установленного шрифта
(font-family),
его размера (font-size)
и веса(font-weight).
Поскольку при относительном позиционировании
(position:relative)
элемент не изымается
из нормального потока (т. е. за ним
резервируется прежнее место), то за
созданным объемным заголовком снизу
получается слишком большой отступ.
Его можно отрегулировать с помощью
параметра height
(в рассматриваемом примере height:
0).
В CSS 2 для создания эффекта тени для текста предусмотрен параметр text-shadow, который поддерживают браузеры Firefox, Opera, Safari, Chrome, но не Internet Explorer.
Параметр text-shadow принимает значения none (нет эффекта тени), inherit (эффект тени наследуется), а также список эффектов, разделенных запятыми. Эффект в списке содержит параметры, перечисляемые через пробел: цвет, смещение по горизонтали, смещение по вертикали и радиус рассеяния тени. Параметры эффекта можно опускать, полагаясь на значения по умолчанию, а также указывать цвет тени после числовых параметров с единицами измерения. По умолчанию цвет тени определяется цветом самого текста. Смещения могут быть как положительными, так и отрицательными. Если в списке указано несколько эффектов, то последние накладываются друг на друга по некоторому алгоритму, который не специфицирован в CSS 2 и, следовательно, в различных браузерах результирующие эффекты могут отличаться. На рис. показан пример применения параметра text-shadow.
Браузер Internet Explorer поддерживает расширение CSS от Microsoft - так называемые графические фильтры, среди которых имеются dropShadow и shadow, позволяющие создать эффект тени.