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

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

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

 

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

Свойство writing-mode

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

CSS

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

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

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

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

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

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

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

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

Комментарии 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