Анимация подчеркивания

Анимация подчеркивания

От автора: недавно я переделал личный веб-сайт и добавил несколько интересных трюков с CSS. В следующих нескольких постах я поделюсь некоторыми из них. Первый — это подчеркивание. В Интернете довольно часто можно увидеть анимированные эффекты подчеркивания с использованием псевдо-элементов и / или границ.

Попробуйте навести курсор на примеры в демонстрации ниже.

Они отлично подходят для одиночных коротких строк текста (например, навигационных ссылок), но не для многострочного текста. Мы можем анимировать подчеркивание в многострочном тексте с использованием линейных градиентов вместе с background-size и background-position.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

«Реальное» подчеркивание

С некоторыми из новых свойств text-decoration мы можем анимировать фактические подчеркивания — это намного лучше, чем просто позволить нашим подчеркиваниям мигать и исчезать при наведении курсора. Анимировав реальное подчеркивание, мы можем сохранить удобную функцию, которую дает нам большинство браузеров, когда подчеркивание пропускает нижние элементы текста (по умолчанию для свойства text-decoration-skip-ink). В самом простом примере мы можем реализовать эффект плавного появления. Мы не можем анимировать непрозрачность подчеркивания текста, но мы можем сделать его из прозрачного до желаемого цвета. Сначала мы устанавливаем свойство text-decoration-style равным underline. Здесь я использую сокращение, text-decoration чтобы указать text-decoration-thickness и text-decoration-color одновременно. Мы можем установить цвет на прозрачное значение. Затем при наведении мы можем перевести его в непрозрачное значение:

Это лучше, чем по умолчанию, и довольно просто. Более того, мы можем перенести свойство text-underline-offset, которое является относительно новым, но широко поддерживается браузерами. Вот как я использую его на своем сайте:

Единицы измерения

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

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

Вышеупомянутое отлично работает … в Firefox. На данный момент никакие другие браузеры не поддерживают переход или анимацию для text-underline-offset. (То же самое относится к text-decoration-thickness, что также может добавить некоторые интересные эффекты.) Но, к счастью, есть альтернативный подход к анимации этих свойств…

Houdini спешит на помощь

Не вдаваясь в мелкие технические детали, CSS Houdini — это набор низкоуровневых API-интерфейсов, которые предоставляют разработчикам доступ к частям движка CSS-рендеринга браузера. Это позволяет нам зарегистрировать пользовательское свойство и анимировать его с помощью CSS. Раньше разработчикам приходилось регистрировать свойство в Javascript, но теперь возможно сделать это полностью с помощью CSS, используя @property.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Для наших целей мы можем зарегистрировать свойство с именем —offset, которое будем использовать для значения text-underline-offset.

Важно установить начальное значение, иначе ничего не получится. По какой-то причине ems не работает в качестве начального значения, хотя я не понимаю, почему. Затем вместо перехода text-underline-offset мы переносим самонастраиваемое свойство:

Тестирование

К сожалению, перенос пользовательских свойств с помощью Houdini не поддерживается в Firefox или Safari, поэтому мы возвращаемся к предыдущей проблеме, связанной с решением ограниченной поддержки браузеров! Но не беспокойтесь, мы можем реализовать кросс-браузерное решение!

Мы можем использовать запрос функций, чтобы определить, поддерживает ли браузер Houdini (этот запрос относится к Paint API). Для браузеров, которые не поддерживают Houdini, мы вместо этого будем использовать свойство text-underline-offset, которое, к счастью, работает в Firefox и Safari!

Вот полное решение:

Автор: Michelle Barker

Источник: css-irl.info

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

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

Комментирование закрыто.