Вертикальный текст на CSS3, HTML

Добавлен: 2012-01-09 07:57:14

Вертикальный текст на CSS3, HTML

Если вы столкнулись с задачей, создать вертикальную надпись на веб странице, то данная статья поможет вам в этом. В спецификации CSS3, есть специальное свойство, которое устанавливает направление текста, но к сожелению, по непонятным причинами, это свойство поддерживает только IE, начиная с 6 версии. Все остальные популярные браузеры отказались от подержки этого свойства, но, на замену ему ввели свои свойства, которые могут трансформировать положение текста на определённый угол. Для каждого браузера - это разные свойства, которые поддерживает только данный браузер, но эти свойства более функциональны, так как могут развернуть текст на любой угол, а не только на 90̊.

Как создать вертикальный текст на CSS

Из вышесказанного становится ясно, что для создания вертикального текста, блоку текста следует придать несколько свойств, для каждого браузера отдельно.

Код CSS:

.vertikal_text{
writing-mode: tb-rl;
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
width:100px;
height:100px;
}

Код HTML:

<div class="vertikal_text">Переворачиваемый текст</div>

Поделиться:

Комментарий добавил: Гость - чсм

Добавлен: 19 11 2013 11:26:38

Гость - чсм

чмс

Добавление комментария