Эксперименты с 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 градусов на средних и больших разрешениях.

/* 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.

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

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

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

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

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

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree