Наклонный текст CSS на все случаи жизни

текст под наклоном CSS

Добрый день, дорогие посетители!

При заполнении страниц сайта контентом часто возникает желание как-то украсить текст, выделить его, чтобы разнообразить подачу материала и сделать акцент на основных моментах статьи. Сделать это можно различными способами. Например, выделить отдельные фрагменты текста курсивом или сделать его наклонным.

Для реализации данного эффекта существует несколько способов. Я предлагаю сегодня рассмотреть, как реализовать наклонный текст CSS. Наклонный текст может быть нескольких видов. Уж так получается, что каждый вкладывает в это слово свое значение. Мы сегодня попробуем рассмотреть каждый из вариантов.

Выделение курсивом с помощью CSS

Первый, и наиболее распространенный способ сделать наклонный текст CSS заключается в использовании стиля font-style со значением italic. Данное свойство придает тексту в заданном блоке курсивное начертание. В результате получается такой вид:

Текст написанный курсивом.

Код HTML для текста:

CSS-свойства:

Наклонный текст CSS

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

Реализовать это можно так же, при помощи стиля font-style, но в этом случае нужно использовать значение oblique. Выглядеть это будет так:

Наклонный текст.

Код HTML:

CSS-свойства:

В результате получается очень похоже на курсив, но если присмотреться, то можно увидеть некоторые отличия в начертании.

Наклон фрагмента текста CSS

Возможно, вам когда-нибудь понадобится сделать наклон фрагмента текста CSS под определенным углом по отношению к странице. Для реализации данного эффекта нужно использовать CSS-свойство transform с поворотом элемента на указанный угол rotate.

Для поворота элемента по часовой стрелке указываем положительное значение угла поворота. Для поворота против часовой стрелки – отрицательное значение.

Выглядеть это будет так:
 
 
 

Повернутый под углом фрагмент текста.

HTML-код фрагмента:

CSS-свойства:

Обратите внимание, как задается поворот фрагмента. Deg – является сокращением от английского слова degree (градус).

Произвольный наклон по горизонтали

В случае использования свойства font-style со значением oblique мы можем сделать наклонный текст CSS с определённым углом наклона вправо. Что же делать, если мы хотим изменить угол или направление наклона?

А в этом нам поможет то же свойство transform, но в этом случае нам нужно использовать значение skew, которое позволяет сделать горизонтальный наклон.

В результате наклона на 15 градусов фрагмент будет выглядеть вот так:

Горизонтальный наклон текста.

HTML-фрагмент кода:

CSS-свойства:

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

А на этом у меня на сегодня все. Если у вас возникнут вопросы, вы всегда можете задать их в комментариях. До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif