Вертикальный текст при помощи CSS

Это расширение отлично сэкономит место на вашем сайте, т.к. вертикальный текст можно удобно разместить где-нибудь сбоку, уместив нужное количество слов. И это очень удобно, некоторые используют изображения для отображения вертикального текста, а здесь все легко редактируется. Странно, что много современных браузеров не поддерживают свойство writing-mode, чтобы с его помощью легко указывать направление текста. Но у каждого браузера есть свое решение, которое позволяет повернуть надпись под произвольным углом, а вот остался writing-mode только под углом в 90°. Но в основном все браузеры самых последних версий поддерживают это расширение.

Устанавливаем блок div с нужным текстом. Например:

<div id="text">Yraaa! - Профессиональный инструмент web-дизайнера</div>

Устанавливаем CSS:

<style type="text/css"> <!-- #text { /* Стиль текста */ -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); height: 580px; width: 100px; border: 2px solid #000; margin: -235px 0 -235px 270px; padding: 5px; } --> </style>

Ставим условные комментарии для IE:

<!--[if IE]> <style type="text/css"> #text { /* Отдельные стили для IE */ writing-mode:tb-rl; height: 100px; width: 580px; margin: 0; } </style><![endif]-->

Урааа, у вас на сайте отличный вертикальный текст, который экономит место и время.