7:11
Автор: Рубрика: CSS-рецепты Комментариев нет

Как сделать в css наклонный текст

Приветствую вас на своем блоге, который посвящен сайтостроению. Сегодня я хотел бы рассказать, что можно сделать в css наклонный текст, какие есть способы реализации этого. Если вам это интересно, читайте.

Наклонный шрифт

Для начала нужно сказать, что под наклонным текстом можно подразумевать разное. Например, если задать блоку такое свойство:

Font-style: oblique;

То шрифт получит наклонное начертание. Если это то, что вам нужно, то используйте такой метод. Продемонстрирую его более подробно. Например, напишем любой текст и заключим его в span.

<span class = "text">Наклонный текст</span>

А это стили для него:

.text{
font-size: 30px;
font-style: oblique;
}

И вот как это выглядит:наклонный текст в css

Видно, что текст получил небольшой наклон влево.

Поворот текстового фрагмента в общем

Иногда нужно изменить не само начертание, а повернуть сам элемент с текстом. Для этого используем такой же текстовый фрагмент, как и в предыдущем случае, только стилевой класс другой.

.rotate{
transform: rotate(12deg);
position: absolute;
top: 500;
left: 300;
font-size: 30px;
}

Этот код в стилях подразумевает, что где-то на странице есть span с классом rotate. Тут мы задаем ему определенные стили – поворачиваем текст на 12 градусов. Можно задавать и отрицательное значение – тогда поворот произойдет против часовой стрелки. С помощью абсолютного позиционирования я вынес элемент примерно на центр страницы, просто чтобы показать вам, как это выглядит.поворот
А вот так бы это выглядело, если бы мы повернули аж на 62 градуса:сильный поворот

Я рекомендую поворачивать строчные элементы (такие, как span), потому что поворот блочного намного более непредсказуем (ведь по умолчанию он имеет размер на всю ширину). Например, если у вас есть текст в блоке, то оберните этот текст дополнительно в строчный элемент, а не поворачивайте весь блок целиком.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Если же вы все-таки решили повернуть блочный элемент, то лучше задайте для него абсолютное позиционирование, чтобы он выпал из потока и его не воспринимали другие.

Наклонное начертание – больше возможностей

С поворотом, я надеюсь, вам понятно. А как можно дополнительно сделать наклон тексту, без помощи font-style: oblique? Вернее, что делать, если вам нужен больший наклон, чем дает это свойство?

Выход есть и он заключается в том, чтобы записать для текстового фрагмента еще одно из правил трансформации – skew. Давайте полностью уберем поворот и запишем по-новому:

transform: skew(-45deg);

Текст получит реально сильный наклон влево, посмотрите, что с ним произошло:наклон

А если записать положительное значение, то наклон будет уже вправо.направо

В общем, с помощью такой трансформации вы получаете больше возможностей для управления текстом. Возможно, это вам пригодится, а на сегодня у меня все. Если у вас есть вопросы, пишите в комментарии.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет