Главная » Сниппеты » Вертикальный текст - это просто!

Вертикальный текст — это просто!

Самый простой способ развернуть вертикально при помощи CSS.
Наверняка, многие из вас, встречали на страницах сайтов такую фишку, как развернутый текст вертикально. Понятно что банальный перенос строк с использованием тега <br>, добавляя его после каждой буквы, в данном случае не прокатывает. Как же тогда развернуть текст реально, именно развернуть буквы, так чтобы текст читался сверху вниз?
Оказывается всё довольно просто. В спецификации CSS3, для всех популярных браузеров, существует свойство transform, с помощью которого мы можем трансформировать элементы, масштабировать, вращать, сдвигать, наклонять, а также комбинировать все виды трансформаций.

 

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

 
Используя свойство transform: rotate(90deg);, можно развернуть текст на 90̊ , т.е. расположить его строго по вертикали, применив другие значения для rotate(), возможно повернуть текст на любой другой угол, а не только на 90̊.
Добавив уникальное свойство transform-origin, установим координаты точки, относительно которой и будет происходить текста.
 

.vertical-text {
/* Трансформируем текст */
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
/* Координаты точки трансформации */ 
-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
}

 
Посмотрите живой пример использования. Текст помещён в оформленный контейнер div, развёрнут на 90 градусов (вертикально) и намертво приклеен к левому краю страницы:
 

 
Надеюсь, этот коротенький сниппет, когда-нибудь пригодится в вашей работе. Экспериментируйте с параметрами расположения и оформления текста, а место, где применить на практике, данное решение, думаю найдётся.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru