От автора: некоторое время назад я не знал о свойстве CSS writing mode, пока не наткнулся на статью Ире Адеринокуна Локализация и перевод в Веб.
Если вам не терпится, вот демо-версия, убедитесь, что вы можете изменять размер окна просмотра, чтобы вызывать заданный медиа-запрос CSS.
Свойство writing-mode
Свойство CSS writing-mode определяет, будут ли строки текста укладываться только горизонтально или вертикально тоже. Вы можете узнать больше об этом на MDN.
Таким образом, я начал размышлять о вариантах использования, а в это время на Smashing Magazine был реализован такой вариант дизайна. Я открыл DevTools, чтобы посмотреть, как будут себя вести вещи, мы все любопытны по природе, не так ли? Просматривая элементы, я обратил внимание на дизайн заголовков, приведенных на рисунке ниже:
CSS
У меня теперь был сценарий использования, поэтому я создал демо-версию на CodePen, которая иллюстрирует его. Фактически, демо включает адаптивный элемент time, который разворачивается на 90 градусов на средних и больших разрешениях.
/* 1 */
@media (min-width: 768px) { /* 2 */ @supports (writing-mode: vertical-lr) { /* 3 */ time { writing-mode: vertical-lr; float: left; margin-left: -2rem; white-space: nowrap; /* 4 */ &::before { content: ''; display: inline-block; width: 1ch; height: 3rem; margin: 10px 0; background: linear-gradient(currentColor, currentColor) no-repeat center / 1px 100%; } } }
}
Стили применяются на средних и больших устройствах, когда есть достаточно места.
Используем функцию определения CSS, чтобы избежать разрыва в неподдерживающих браузерах.
Размещаем элемент time вертикально, также добавляем отступы.
Добавляем тонкую линию, используя линейный градиент.
Если все будет нормально, в ближайшее время, возможно, я использую этот фрагмент в будущем редизайне сайта. До тех пор вы можете посмотреть демо-версию на CodePen.
Источник: https://catalin.red/
Редакция: Команда webformyself.