Главная » Статьи » Програмирование » HTML

Трюки и эффекты с текстом. Маленькие хитрости HTML, CSS. (Часть 3)

Добавил: swich e-mail от 19.01.2011, просмотров: 3307


1. Контроль растояния между слов без пробелов.

Для того чтобы увеличить растояние между слов, (например тестовая навигация) раньше я часто использовал пробелы   или вставлял прозрачный GIF,с определённой длинной.
С помощью CSS это можно сделать гораздо проще:



Пример: Растояние между слов 50 пиксель

Увеличиваем растояние между слов

Код:

<span style="word-spacing:50px">Увеличиваем растояние междуслов</span>

2. Межбуквенный интервал

Пример: Межбуквенный интервал 10 пиксель

Увеличиваем интервал между букв

Код:
<span style="letter-spacing:10px ">Увеличиваем интервал между букв</span>

3. Межстрочный интервал

Без использования пробелов, вставки прозрачных рисунков можно с высокой точностью (CSS) задать растояние между строк:

Пример: 30 пиксель между строк.
Контролируем растояние между строчек с высокой точностью.
Межстрочный интервал = 30 пиксель
Код:
<span style="line-height:30px ">Контролируем растояние между
строчек с высокой точностью. <br> Межстрочный интервал = 30 пиксель</span>

4. Текст в рамке

Пример:

Рамка точки, тонкая обводка, цвет обводки #ff5730

Код:
<span style="border-width:thin; border-style:dotted; border-color:#FF5730"> Рамка точки, тонкая обводка, цвет обводки #ff5730 </span>

Пример:

Рамка штрих, тонкая обводка, цвет обводки #ff5730

Код:
<span style="border-width:thin; border-style:dashed; border-color:#FF5730"> Рамка штрих, тонкая обводка, цвет обводки #ff5730 </span>



Пример:

Рамка 3D-Эффект Groove, жирная обводка, цвет обводки #ff5730

Код:
<span style="border-width:thick; border-style:groove; border-color:#FF5730"> Рамка 3D-Эффект Groove, жирная обводка, цвет обводки #ff5730 </span>

Попробуйте другие 3D - Еффекты соответсвенно заменив border-style:groove на
border-style:inset или border-style:ridge или border-style:outset

Пример:

Рамка простая, обводка 10 пиксель, цвет обводки #ff5730

Код:
<span style="border-width:10px; border-style:solid; border-color:#FF5730"> Рамка простая, обводка 10 пиксель, цвет обводки #ff5730 </span>
Добавлено в: HTML
Смотрите так же:
⇒ Структурированные типы данных
⇒ Eminem - The Slim Shady LP
⇒ Ученые объяснили, как работает Санта-Клаус
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]