<title>Пример вертикального текста</title>
<style type="text/css">
div.v-t {width:1em; line-height:1em; font-size:19px; background-color:#ffffc9}
</style>
</head>
<body>
<div class="v-t">
П р и м е р
<p> </p>
т е к с т а
</div>
</body>
Пошаговая инструкция:
1.Напечатали понравившийся нам текст и поместили его в блок.
2.Назначили блоку класс, который будет описан в стилях.
3.Разделили все буквы текста обычными пробелами с клавиатуры.
4.Между словами вставили пустой параграф, чтобы увеличить расстояние.
5.Определяем ширину блока в одну букву m, чтобы буквы выводились с новой строки.
6.Определяем необходимую высоту строки с помощью атрибута line-height.
7.Устанавливаем размер шрифта, в данном случае он равен 19 пикселям.
8.Я установил фон для блока, чтобы были видны его контуры.
Можно поэкспериментировать со способами форматирования, например, разделить слова не пустым параграфом, а с помощью пустого блока, которому в тех же каскадных стилях задать нужную высоту в пикселях. Контейнер, содержащий текст, с помощью позиционирования можно легко переместить в любую точку страницы.
Подобного результата можно добиться путем создания изображения с текстом и последующего его позиционирования.
Без комментариев...
×
CSS вертикальный текст
Переслать код
CSS вертикальный текст