Добрый день, дорогие посетители!
При заполнении страниц сайта контентом часто возникает желание как-то украсить текст, выделить его, чтобы разнообразить подачу материала и сделать акцент на основных моментах статьи. Сделать это можно различными способами. Например, выделить отдельные фрагменты текста курсивом или сделать его наклонным.
Для реализации данного эффекта существует несколько способов. Я предлагаю сегодня рассмотреть, как реализовать наклонный текст CSS. Наклонный текст может быть нескольких видов. Уж так получается, что каждый вкладывает в это слово свое значение. Мы сегодня попробуем рассмотреть каждый из вариантов.
Навигация по статье:
Выделение курсивом с помощью CSS
Первый, и наиболее распространенный способ сделать наклонный текст CSS заключается в использовании стиля font-style со значением italic. Данное свойство придает тексту в заданном блоке курсивное начертание. В результате получается такой вид:
Код HTML для текста:
|
1 2 3 |
<div class="kursiv"> Текст написанный курсивом. </div> |
CSS-свойства:
|
1 2 3 4 |
.kursiv{ font-size:18px; font-style: italic; } |
Наклонный текст CSS
Реализовать это можно так же, при помощи стиля font-style, но в этом случае нужно использовать значение oblique. Выглядеть это будет так:
Код HTML:
|
1 2 3 |
<div class="naklon"> Наклонный текст. </div> |
CSS-свойства:
|
1 2 3 4 |
.naklon{ font-size:18px; font-style: oblique; } |
В результате получается очень похоже на курсив, но если присмотреться, то можно увидеть некоторые отличия в начертании.
Наклон фрагмента текста CSS
Возможно, вам когда-нибудь понадобится сделать наклон фрагмента текста CSS под определенным углом по отношению к странице. Для реализации данного эффекта нужно использовать CSS-свойство transform с поворотом элемента на указанный угол rotate.
Для поворота элемента по часовой стрелке указываем положительное значение угла поворота. Для поворота против часовой стрелки – отрицательное значение.
Выглядеть это будет так:
HTML-код фрагмента:
|
1 2 3 |
<div class="povorot"> Повернутый под углом фрагмент текста. </div> |
CSS-свойства:
|
1 2 3 4 |
.povorot{ font-size:18px; transform:rotate(10deg); } |
Произвольный наклон по горизонтали
В случае использования свойства font-style со значением oblique мы можем сделать наклонный текст CSS с определённым углом наклона вправо. Что же делать, если мы хотим изменить угол или направление наклона?
А в этом нам поможет то же свойство transform, но в этом случае нам нужно использовать значение skew, которое позволяет сделать горизонтальный наклон.
В результате наклона на 15 градусов фрагмент будет выглядеть вот так:
HTML-фрагмент кода:
|
1 2 3 |
<div class="naklon_deg"> Горизонтальный наклон текста. </div> |
CSS-свойства:
|
1 2 3 4 |
.naklon_deg{ font-size:18px; transform:skew(15deg); } |
Как видите, при желании используя возможности CSS можно придать достаточно интересный вид выделяемого текста, а если немного пофантазировать, и использовать эти приемы совместно, то можно добиться еще более впечатляющих вариантов.
А на этом у меня на сегодня все. Если у вас возникнут вопросы, вы всегда можете задать их в комментариях. До встречи в следующих статьях!
С уважением Юлия Гусарь
Текст может не так интересно, а вот картинку(фото) попробую
Доброго времени. Очень интересная статья не зря я ее нашел. Но вот не знаю можно ли тут задавать вопросы. Но я все задам))) Столкнулся с такой проблемой. На странице товара в вкладке Дополнительная информация нужно убрать курсив, а вот как и где он ни как найти не могу. Если Вы мне поможете я очень буду благодарен!
Здравствуйте, Алексей!
Видимо у Вас в стилях темы прописано чтобы текст на этой вкладке был курсивом.
Нужно вычислить класс блока, в котором выводится нужный текст и в файле style.css активной темы прописать font-style: normal!important;
Для вычисления класса элемента Вам может понадобиться вот эта статья: //impuls-web.ru/kak-opredelit-id-i-klass-elementa-na-stranice/
Так же может понадобиться вот этот материал: //impuls-web.ru/pochemu-ne-rabotayut-css-stili/