Иногда вертикальный текст так нужен для функциональности, что ранее мы всегда делали его на фотошоп. То при помощи стилистики, на сегодняшний день все можно создать красивый текст, что будет вертикальной плоскости. Так как элемент HTML, что создаем, рассматривается в рамке горизонтали. Здесь будем уделять гораздо больше внимания ширине чем высоте, особенно когда речь идет о тексте внутри них. Однако иногда мы хотим отображать текст элемента вертикально.
CSS код для вертикального текста:
Вертикальный текст легко выполняется с помощью transform:
Код
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
В зависимости от того, в каком направлении вы хотите, чтобы текст отображался вертикально, вращение будет отличаться, но это значение поворота, которое сделает текст вертикальным.
Код
.vertical-text {
float: left;
}
Преобразования CSS делают нагрузки возможными и гораздо более мощными, чем просто поворот текста по вертикали, но с приведенным выше кодом работа выполнена.
HTML
Один из вариантов, где идет сам каркас, плюс описание в вертикальной форме.
Код
<div class="zornet-text">ZorNet.Ru - портал вебмастера</div>
CSS
Код
.zornet-text {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
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;
background: #2c44c5;
color: #f9f2f2;
margin-left: 40px;
padding: 10px;
border: 1px solid #ccc;
text-transform: uppercase;
border: 1px solid #184798;
text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow: 2px -2px 0px rgba(12, 12, 12, 0.08);
float: left;
}
На этом все!
Демонстрация
