Вертикальный текст на CSS

Вертикальный текст на CSS

От автора: Практически каждый HTML элемент, который мы создаем, представляется нам в горизонтальной форме. Мы придаем гораздо большее значение ширине, чем высоте, особенно если дело касается текста внутри. Иногда нам, тем не менее, нужно расположить текст вертикально. В старые времена недоработанных версий Internet Explorer, это было практически невыполнимо. Однако, в нынешние времена – это легкая работа. Вот как это можно сделать.

демо

Код CSS

Вертикальное расположение текста легко достигается с помощью свойства CSS transform:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В зависимости от того, в каком направлении вы хотите расположить текст, вращение может отличаться, но вертикальное направление тексту задает значение свойства transform. Вот полезная подсказка:

Свойство float эмулирует автоматическое задание ширины.

Свойство transform дает массу возможностей помимо вертикального расположения текста, и код, приведенный выше, справляется с этой работой. Разве это не большой прогресс?

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Айжан

    А как сделать чтобы снизу вверх писалось?

  2. Цифровой

    Я удивлен, что нету специального CSS свойства для задания направления текста ((

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree