Эксперименты с CSS writing-mode

Эксперименты с CSS writing-mode

От автора: некоторое время назад я не знал о свойстве CSS writing mode, пока не наткнулся на статью Ире Адеринокуна Локализация и перевод в Веб.

 

Если вам не терпится, вот демо-версия, убедитесь, что вы можете изменять размер окна просмотра, чтобы вызывать заданный медиа-запрос CSS.

Свойство writing-mode

Свойство CSS writing-mode определяет, будут ли строки текста укладываться только горизонтально или вертикально тоже. Вы можете узнать больше об этом на MDN.

Таким образом, я начал размышлять о вариантах использования, а в это время на Smashing Magazine был реализован такой вариант дизайна. Я открыл DevTools, чтобы посмотреть, как будут себя вести вещи, мы все любопытны по природе, не так ли? Просматривая элементы, я обратил внимание на дизайн заголовков, приведенных на рисунке ниже:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

CSS

У меня теперь был сценарий использования, поэтому я создал демо-версию на CodePen, которая иллюстрирует его. Фактически, демо включает адаптивный элемент time, который разворачивается на 90 градусов на средних и больших разрешениях.

Стили применяются на средних и больших устройствах, когда есть достаточно места.

Используем функцию определения CSS, чтобы избежать разрыва в неподдерживающих браузерах.

Размещаем элемент time вертикально, также добавляем отступы.

Добавляем тонкую линию, используя линейный градиент.

Если все будет нормально, в ближайшее время, возможно, я использую этот фрагмент в будущем редизайне сайта. До тех пор вы можете посмотреть демо-версию на CodePen.

Источник: https://catalin.red/

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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