Трюк с анимацией точки над буквой «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. Вы также можете поэкспериментировать с приведенными ниже вариантами.

Первый глифВторой глифОбъединение
I.I
ȷ.J
N~ñ
AEæ
A`à

Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!

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

Вадим Дворниковавтор-переводчик статьи «The Trick to Animating the Dot on the Letter “i”»