Трюк с анимацией точки над буквой «i»

Хитрость заключается в следующем: объединяя турецкую букву "ı" и точку "." мы можем создать букву «i», составленную из двух отдельных элементов. Это открывает новые варианты для стилизации и анимации точки, расположенной над буквой.

Несколько примеров

Вот несколько стилей и анимаций, которые можно создать с помощью изложенного выше механизма:

Обе части создаваемой «i» являются обычными символами Unicode. Поэтому они будут учитывать изменение шрифта и масштабирование веб-страницы.

Пошаговое руководство

Давайте разберемся, как реализовать эту технику.

Выбираем символы Unicode для объединения

Мы используем символ «i» без точки и точку. Расположите символы друг над другом, обернув их в тег <span> и применив к ним свойство display: block.

<span class="character">.</span>
<span class="character">ı</span>
.character {
  display: block;
}

Выровняйте символы

Правильно позиционируем элементы, настроив высоту строк и удалив поля.

.character {
  display: block;
  line-height: 0.5;
  margin-top: 0;
  margin-bottom: 0;
}

Добавьте CSS-анимацию к элементу точки

Используем анимацию:

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -10px, 0);
  }
}

.bounce {
  animation: bounce 0.4s infinite alternate;
}

Вот что у нас есть на данный момент:

Добавьте остальные буквы слова

Обернем анимированные символы в элемент <span>, чтобы все они располагались в одной строке.

<p>
  P
  <span>
    <span class="character">.</span>
    <span class="character>ı</span> 
  </span>
  ng
</p>

Между элементами, к которым применено свойство display:inline-block, автоматически добавляется пробел. Удалите его, если расстояние между элементами будет слишком большим.

Завершающие этапы:

А что насчет SVG?

Аналогичный эффект можно создать из буквы, состоящей из двух или более SVG-элементов. Ниже приведен пример, в котором элемент круга анимируется независимо от прямоугольника.

SVG-буквы не будут реагировать на изменение шрифта. Но они предоставляют больше возможностей для анимации и стилизации.

Где это можно использовать?

Эту технику лучше использовать в дизайне для оформления отдельных элементов. Например, логотипа.

Поговорим о доступности

В примере со словом «Ping» программа чтения с экрана будет читать его как P. ı ng. Это можно исправить с помощью атрибутов ARIA. Например, можно описать весь элемент как изображение и добавить текст в качестве его метки.

<div role=img aria-label="Ping">
  <p>P<span>.</span><span>ı</span>ng</p>
</div>

Таким образом, внешний элемент div описывает значение текста, который оглашается программами для чтения с экрана. Также можно добавить к ним aria-hidden="true" или role="presentation", чтобы внутренние элементы не интерпретировались как текст.

<div role=img aria-label="Ping">
  <p role="presentation">P
    <span>.</span>
    <span>ı</span>
  ng</p>
</div>

Это решение было проверено только на Mac с VoiceOver в браузере Safari.

Больше Unicode!

Есть еще много «букв», которые можно создать, комбинируя символы Unicode. Вы также можете поэкспериментировать с приведенными ниже вариантами.