Полезные трюки и эффекты при работе с текстом
Давайте получим полезные навыки при работе с текстом. Пора уже обуздать непослушные буквы и научиться управлять как отступами между строками так и интервалами между символами. Все проще чем Вы думаете. Пара строк кода внесет порядок в неровный текстовой строй на нашей страничке.
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>
Рекомендуем почитать
