Трюки с CSS writing-mode

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

Основы

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

writing-mode: horizontal-tb;

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

Пример 1

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

Два дива:

<div class="v-block">Post</div><div class="h-block">Modernism</div>

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

.v-block
{ font: 46px/1 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #333; writing-mode: vertical-rl;
}
.h-block
{ font: 46px/1 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #333; padding: 5px 0 0 3px;
}

Пример 2

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

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

<div class="v-block">Post<br>Modernist</div><div class="h-block">Thought</div>

Пример 3

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

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

<div class="w-container">
<div class="w-block-1">A Guide to</div><div class="w-block-2">Post<br>Modernist</div>
</div>
<div class="w-block-3">Thought</div>

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

.w-container
{ display: flex;
}
.w-block-1
{ font: 46px/1 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #333; writing-mode: vertical-rl;
}
.w-block-2
{ font: 46px/1 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #333; transform: rotate(-30deg); padding: 84px 0 0 7px;
}
.w-block-3
{ font: 46px/1 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #333; padding: 7px 0 0 3px; }

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.