От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна.
Основы
Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали.
|
1 |
writing-mode: horizontal-tb; |
Допустимые значения:
horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию.
vertical-rl — Контент размещается вертикально сверху вниз, горизонтально справа налево.
vertical-lr — Контент размещается вертикально сверху вниз, горизонтально слева направо.
Пример 1
Простой пример для начала.
Два дива:
|
1 |
<div class="v-block">Post</div><div class="h-block">Modernism</div> |
В div v-block свойство writing-mode имеет значение vertical-rl.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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 такой же, как и выше.
|
1 |
<div class="v-block">Post<br>Modernist</div><div class="h-block">Thought</div> |
Пример 3
А теперь мы добавим преобразование со значением rotate.
Мы используем базовый контейнер flexbox для объединения.
|
1 2 3 4 |
<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, а такжн большое поле.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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+.
Источник: //www.tipue.com/
Редакция: Команда webformyself.
