• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать вертикальный текст с помощью CSS (С помощью CSS можно задать вертикальное текст на сайте)
Сделать вертикальный текст с помощью CSS
Kosten
Среда, 15 Августа 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Иногда вертикальный текст так нужен для функциональности, что ранее мы всегда делали его на фотошоп. То при помощи стилистики, на сегодняшний день все можно создать красивый текст, что будет вертикальной плоскости. Так как элемент 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;
}


На этом все!

Демонстрация
Прикрепления: 5661630.jpg (16.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать вертикальный текст с помощью CSS (С помощью CSS можно задать вертикальное текст на сайте)
  • Страница 1 из 1
  • 1
Поиск: