Трюк с анимацией точки над буквой «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 ~ ñ
A E æ
A ` à

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

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