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

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

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


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
Смотрите так же:
⇒ Søren Nystrøm Rasted - Сорен Найстром Растед
⇒ Как писать заявку на публикацию художественного произведения
⇒ Духи "S" от Шакиры
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]