вторник, 6 декабря 2016 г.

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


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

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>

0 коммент.:

Отправить комментарий