вторник, 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 коммент.:
Отправить комментарий