Приветствую вас на своем блоге, который посвящен сайтостроению. Сегодня я хотел бы рассказать, что можно сделать в css наклонный текст, какие есть способы реализации этого. Если вам это интересно, читайте.
Наклонный шрифт
Для начала нужно сказать, что под наклонным текстом можно подразумевать разное. Например, если задать блоку такое свойство:
Font-style: oblique;
То шрифт получит наклонное начертание. Если это то, что вам нужно, то используйте такой метод. Продемонстрирую его более подробно. Например, напишем любой текст и заключим его в span.
<span class = "text">Наклонный текст</span>
А это стили для него:
.text{
font-size: 30px;
font-style: oblique;
}
И вот как это выглядит:
Видно, что текст получил небольшой наклон влево.
Поворот текстового фрагмента в общем
Иногда нужно изменить не само начертание, а повернуть сам элемент с текстом. Для этого используем такой же текстовый фрагмент, как и в предыдущем случае, только стилевой класс другой.
.rotate{
transform: rotate(12deg);
position: absolute;
top: 500;
left: 300;
font-size: 30px;
}
Этот код в стилях подразумевает, что где-то на странице есть span с классом rotate. Тут мы задаем ему определенные стили – поворачиваем текст на 12 градусов. Можно задавать и отрицательное значение – тогда поворот произойдет против часовой стрелки. С помощью абсолютного позиционирования я вынес элемент примерно на центр страницы, просто чтобы показать вам, как это выглядит.
А вот так бы это выглядело, если бы мы повернули аж на 62 градуса:
Я рекомендую поворачивать строчные элементы (такие, как span), потому что поворот блочного намного более непредсказуем (ведь по умолчанию он имеет размер на всю ширину). Например, если у вас есть текст в блоке, то оберните этот текст дополнительно в строчный элемент, а не поворачивайте весь блок целиком.
Если же вы все-таки решили повернуть блочный элемент, то лучше задайте для него абсолютное позиционирование, чтобы он выпал из потока и его не воспринимали другие.
Наклонное начертание – больше возможностей
С поворотом, я надеюсь, вам понятно. А как можно дополнительно сделать наклон тексту, без помощи font-style: oblique? Вернее, что делать, если вам нужен больший наклон, чем дает это свойство?
Выход есть и он заключается в том, чтобы записать для текстового фрагмента еще одно из правил трансформации – skew. Давайте полностью уберем поворот и запишем по-новому:
transform: skew(-45deg);
Текст получит реально сильный наклон влево, посмотрите, что с ним произошло:
А если записать положительное значение, то наклон будет уже вправо.
В общем, с помощью такой трансформации вы получаете больше возможностей для управления текстом. Возможно, это вам пригодится, а на сегодня у меня все. Если у вас есть вопросы, пишите в комментарии.