Трюки с CSS writing-mode

Трюки с CSS writing-mode

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна.

Основы

Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали.

Допустимые значения:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию.

vertical-rl — Контент размещается вертикально сверху вниз, горизонтально справа налево.

vertical-lr — Контент размещается вертикально сверху вниз, горизонтально слева направо.

Пример 1

Простой пример для начала.

Два дива:

В div v-block свойство writing-mode имеет значение vertical-rl.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пример 2

Еще один прстой пример.

Опять же, два div, но обратите внимание на направление текста v-block справа налево. CSS такой же, как и выше.

Пример 3

А теперь мы добавим преобразование со значением rotate.

Мы используем базовый контейнер flexbox для объединения.

Свойство transform в w-block-2 имеет значение rotate, а такжн большое поле.

Writing-mode работает в Edge 12+, Chrome 48+, Firefox 41+, Safari 11+, iOS Safari 11+, Chrome для Android 70+, браузере Android 67+, Firefox для Android 63 и Opera 35+.

Источник: http://www.tipue.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree