Начинаем работать с CSS-счётчиками

Оригинал: scotch.io/tutorials/getting-started-with-css-counters
Перевод: Влад Мержевич

Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».

Верный путь для обозначения иерархии — через нумерацию объектов. Кроме нумерованного списка в CSS нет другого элемента, который позволяет нам увеличивать порядок. Если бы мы хотели отобразить числа, то должны были сделать некоторую подготовку. Слежение за индексом, его автоинкремент и др. Что-то вроде этого.

PHP

<ul class="numbered-list">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

Это хорошо до определённой степени, но здесь имеются свои ограничения. Что, если мы хотим использовать буквы, римские цифры, греческие символы и др. Реализация чего-либо потребует использования пользовательских библиотек.

К счастью, в CSS мы можем реализовать подобные вещи, не прилагая особых усилий.

Сброс и инкремент счётчика

Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.

Всё, что нам нужно — это базовая, но простая для понимания разметка. В нашем CSS-файле нужно определить сброс и инкремент.

HTML

<ul class="numbered-list">
  <li class="numbered-list__item">
  <span class="numbered-list__counter"></span>
  <span class="numbered-list__text">Minion ipsum</span>
  </li>
</ul>

Установим <li class="numbered-list"></li> в качестве точки сброса. Для этого мы просто делаем следующее.

CSS

.numbered-list {
  counter-reset: counter-name;
}

Замечание: counter-name может быть произвольным.

Поскольку мы установили нашу точку сброса, то должны сообщить <span class="numbered-list__counter"></ span> увеличивать его значение. Для этого мы используем следующее.

CSS

.numbered-list__counter {
  counter-increment: counter-name;
}

Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.

Поскольку счётчик является генерируемым контентом, вроде :before и :after, нам нужно вставлять счётчики с помощью свойства content в :after, либо в :before. Кроме того, CSS-функция counter позволяет идеально сбросить значение счётчика.

CSS

.numbered-list__counter:before {
  counter-increment: counter-name;
  content: counter(counter-name);
}

Примечание. Я опустил стиль содержимого, чтобы свести наш CSS к минимуму.

Смещение индекса инкремента

counter-increment также может принимать положительное или отрицательное значение для изменения шага инкремента.

CSS

counter-increment: counter-name 2;
/* counter-increment: counter-name +2; */

Это увеличит инкремент на множитель 2. Чтобы поменять инкремент на обратный, вы можете использовать отрицательное значение, что уменьшит значение индекса на указанный множитель.

CSS

counter-increment: counter-name -2;

Изменение начальной точки счётчика

Передача целого числа после объявления counter-reset говорит браузеру изменить смещение начального значения.

CSS

.numbered-list {
  counter-reset: counter-name 2;
}

Задав значение равным 2, мы начинаем счётчик с 3, вроде этого. Вы также должны знать, что значение counter-reset по умолчанию равно 0.

Обратная нумерация

Обратная нумерация использует отрицательный индекс для counter-increment. Но это также может привести к сложностям, потому что если список генерируется динамически, пользователь должен найти способ отслеживать индекс.

Сам видел, что люди делают нечто вроде этого.

PHP

<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

Счётчик сбрасывается строчно через генерацию в PHP значения counter-reset. В CSS-файле мы можем затем установить отрицательное значение для counter-increment.

Использование других форматов

Кроме увеличения счётчика с числами, мы можем также использовать инкремент с буквами, греческими символами, римскими цифрами и др.

Если вы являетесь поклонником римских цифр (как я), то для использования римских цифр всё, что вам нужно сделать, это просто передать второй параметр (lower-roman) в функцию counter.

CSS

content: content(counter-name, lower-roman);

Другие варианты включают: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

Поддержка браузерами

Как говорится, «одна картинка стоит тысячи слов». Этот график от CanIUse иллюстрирует, насколько широко поддерживаются счётчики в CSS. Они хорошо поддерживаются в Internet Explorer и Safari, что говорит о многом. Поэтому вам не стоит беспокоиться об использовании счётчиков, они массово поддерживаются браузерами.

Лично я считаю, что CSS-счётчики — это круто. Некоторым людям подсчёт с помощью CSS кажется непонятным и они продолжают использовать имеющийся у них метод.

Меняющееся гамбургер меню на CSS

Оригинал: scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css
Перевод: Влад Мержевич

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

HTML

<div class="container">
 <!-- Этот чекбокс даст нам поведение переключателя, 
  он будет скрыт, но работать -->
 <input id="toggle" type="checkbox">
 <!-- ВАЖНО: любой элемент, который мы хотим модифицировать при изменении 
  состояния чекбокса, является «братским» элементом для чекбокса -->
 <!-- Эта метка привязана к чекбоксу и будет содержать переключение «кнопок» -->
 <label class="toggle-container" for="toggle">
 <!-- Если меню открыто, то здесь будет иконка «X», 
  в противном случае просто иконка гамбургера -->
  <span class="button button-toggle"></span>
 </label>
 <!-- Навигация -->
 <nav class="nav">
  <a class="nav-item" href="">Управление</a>
  <a class="nav-item" href="">История</a>
  <a class="nav-item" href="">Статистика</a>
  <a class="nav-item" href="">Настройки</a>
 </nav>
</div>

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

SCSS

/* Базовые стили */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
body {
  font-family: sans-serif;
  background-color: #F6C390;
}
a {
  text-decoration: none;
}
.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

Работа переключателя

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

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

SCSS

// Прячем чекбокс
#toggle {
  display: none;
}

// Стили для «открытого» состояния, когда чекбокс выбран
#toggle:checked {
// Любой элемент, стиль которого вам нужно изменить при открытии меню, идёт здесь с  селектором ~
  // Стили для открытия навигационного меню, к примеру
  & ~ .nav {
  }
}

Создание закрытого состояния

Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:

И вот код, который это реализует.

SCSS

$transition-duration: 0.5s;
// Отображение пунктов навигации в виде линий, составляющих иконку гамбургера
.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: $transition-duration, opacity 1s;

  // Добавление ширины для первой линии
  &:nth-child(1) {
    letter-spacing: -8px;
  }

  // Добавление ширины для второй линии
  &:nth-child(2) {
    letter-spacing: -7px;
  }

  // Настройки для элементов, начиная с четвёртого
  &:nth-child(n + 4) {
    letter-spacing: -8px;
    margin-top: -7px;
    opacity: 0;
  }

  // Получение линий для иконки гамбургера
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EC7263;
    transform: translateY(-50%) scaleY(5);
    transition: $transition-duration;
  }
}

Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.

Создание открытого меню

Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:

SCSS

$transition-duration: 0.5s;
#toggle:checked {

  // Открываем
  & ~ .nav {
    // Восстанавливаем пункты навигации из «линий» в иконке меню
    .nav-item {
      color: #EC7263;
      letter-spacing: 0;
      height: 40px;
      line-height: 40px;
      margin-top: 0;
      opacity: 1;
      transform: scaleY(1);
      transition: $transition-duration, opacity 0.1s;
  
      // Скрываем линии
      &:before {
        opacity: 0;
      }
    }
  }
}

Магия в мелочах

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child) и задать постепенное повышение значения transition-delay. Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

SCSS

$items: 4;
$transition-delay: 0.05s;

.nav-item {
  // Задаём задержку для пунктов навигации при закрытии
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      $delay: ($i - 1) * $transition-delay;
      transition-delay: $delay;
      &:before {
        transition-delay: $delay;
      }
    }
  }
}

Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.

Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay, немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:

SCSS

$delay: ($items - $i) * $transition-delay;

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

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

Вы можете найти полный код в хранилище Github, а также поиграть с кодом напрямую на Codepen.

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

Хотите за ближайшие 6 дней изучить азы адаптивной верстки в HTML5 и CSS3?

Реклама

Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3.

Проходите всего по одному короткому уроку в день, и за ближайшие 6 дней вы освоите азы HTML5 и CSS3, без которых не стоит и мечтать о карьере веб-мастера или верстальщика.

Посмотрите бесплатные видеоуроки

Хватит мечтать, начинайте кодить

Реклама

Программистом быть классно. Во-первых, это интересно, во-вторых, прибыльно, в-третьих, научиться кодить может каждый. Коду всё равно, какое у вас образование, его не волнует ваш возраст. От вас требуется только желание изучать новое и работать, работать, работать. Готовы? Тогда добро пожаловать на новый курс GeekBrains для начинающих программистов.

Хочешь создать свой сайт, но не знаешь с чего начать?

Реклама

У тебя есть уникальная возможность стать Веб-разработчиком уже через несколько месяцев! Ты научишься верстать сайты, создавать интерактивные веб-приложения, изучишь язык PHP. После обучения на GeekBrains ты пройдешь гарантированную стажировку.

Не откладывай мечту на завтра, начни прямо сейчас!

Справочник HTML для Андроид

Для Андроида тоже обновилась версия справочника HTML, теперь есть полный набор всего и вся: веб, локальная версия, мобильное приложение. До конца января цена в честь праздников снижена до 29 рублей, в феврале будет повышена, так что набегай, покупай.

Купить справочник

Справочник HTML в виде файлов

Обновил справочник HTML, который в виде файлов. По случаю праздников и нового рабочего года цена на справочник до конца января установлена 29 рублей. Для тех, кто уже приобретал справочник, обновление должно прийти автоматически.

Купить справочник

Справочник HTML

Очередное обновление справочника HTML. Исправлены мелкие ошибки в текстах, элементы перелинкованы друг с другом и добавлены всплывающие подсказки в списке элементов. Так что если забыли, что каждый элемент делает, достаточно просто навести на него курсор.

Новогодний конкурс картинок на CSS

Скоро Новый год и конечно же надо порадовать себя и посетителей новогодней тематикой. Можете поучаствовать в конкурсе картинок, сделанных на CSS, заодно научиться новым приёмам, получить вдохновение и украсить сайт.

Подробности в этой теме, приём работ открыт до 13 декабря 2016.

Фреймворк Bootstrap — верстаем адаптивно, просто, быстро!

Реклама

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные сайты.

Прямо сейчас забирайте пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

За ближайшие 7 дней вы повысите СКОРОСТЬ качественной адаптивной верстки по меньшей мере в два раза и сможете пропорционально повысить свои доходы.

Посмотрите бесплатные видеоуроки

Онлайн-курсы для веб-разработчиков

Хочешь стать веб-разработчиком или прокачать свои знания и навыки в определённом направлении? Нетология дарит пользователям htmlbook.ru промокод html_prog на скидку 2000 руб. на любой онлайн-курс по направлениям: HTML и CSS, JavaScript, Node, Python, PHP и др. Промокод действителен до конца этого года. Успей подать заявку!

Выбрать онлайн-курс и записаться: http://netolo.gy/cI1

Справочник HTML для Андроида

Вышла новая версия справочника HTML в Google.Play.

  • обновлены все ссылки на спецификацию; лично все обошёл, проверил и заменил на свежие;
  • для устаревших атрибутов добавлен альтернативный вариант в виде CSS;
  • обновлены описания для новых элементов;
  • исправлены мелкие ошибки;
  • добавлено несколько новых атрибутов.

Бесплатный курс «Основы HTML и CSS»

С 18 ноября по 1 декабря в Нетологии начнётся двухнедельный бесплатный учебный курс по основам HTML и CSS. За это время ты получишь навыки по:

  • основам HTML;
  • основам CSS;
  • внесению правок в HTML-код веб-страницы;
  • вёрстке текстовых блоков;
  • стилизации отдельных элементов;
  • внесению изменений на сайт;
  • подготовке контента для публикации на сайте.

Регистрируйся и совершенствуй свои навыки вёрстки! Количество мест ограничено, поэтому зарегистрироваться лучше заранее.

Справочник HTML

Обновил справочник HTML, который в виде файлов, а не устаревшего CHM. Зато отображается и работает именно так, как и должно всё. Справочник платный, стоит 50 рублей и если вы его уже приобретали, то обновление должно прийти автоматически. Если не покупали, то это надо сделать, справочник того стоит.

Купить справочник

Создание сайта на Jekyll

Новое руководство по созданию статичного сайта на Jekyll с CMS и собственной системой комментирования. Вы можете создать полнофункциональный сайт целиком, узнать что такое Jekyll или остановиться на комментариях, работающих на Firebase.

Страницы