От автора: недавно я переделал личный веб-сайт и добавил несколько интересных трюков с CSS. В следующих нескольких постах я поделюсь некоторыми из них. Первый — это подчеркивание. В Интернете довольно часто можно увидеть анимированные эффекты подчеркивания с использованием псевдо-элементов и / или границ.
Попробуйте навести курсор на примеры в демонстрации ниже.
Они отлично подходят для одиночных коротких строк текста (например, навигационных ссылок), но не для многострочного текста. Мы можем анимировать подчеркивание в многострочном тексте с использованием линейных градиентов вместе с background-size и background-position.
Однако этот подход имеет свои ограничения: он требует, чтобы текст был встроенным элементом, поэтому он хорошо работает, например, для анкоров ссылок в абзаце текста. Но если вам нужно анимированное подчеркивание в элементе заголовка, вам, вероятно, придется изменить разметку, чтобы добавить span внутри элемента, что не всегда возможно.
«Реальное» подчеркивание
С некоторыми из новых свойств text-decoration мы можем анимировать фактические подчеркивания — это намного лучше, чем просто позволить нашим подчеркиваниям мигать и исчезать при наведении курсора. Анимировав реальное подчеркивание, мы можем сохранить удобную функцию, которую дает нам большинство браузеров, когда подчеркивание пропускает нижние элементы текста (по умолчанию для свойства text-decoration-skip-ink). В самом простом примере мы можем реализовать эффект плавного появления. Мы не можем анимировать непрозрачность подчеркивания текста, но мы можем сделать его из прозрачного до желаемого цвета. Сначала мы устанавливаем свойство text-decoration-style равным underline. Здесь я использую сокращение, text-decoration чтобы указать text-decoration-thickness и text-decoration-color одновременно. Мы можем установить цвет на прозрачное значение. Затем при наведении мы можем перевести его в непрозрачное значение:
a { text-decoration: underline 0.15em rgba(0, 0, 0, 0); transition: text-decoration-color 300ms;
} a:hover { text-decoration-color: rgba(0, 0, 0, 1);
}
Это лучше, чем по умолчанию, и довольно просто. Более того, мы можем перенести свойство text-underline-offset, которое является относительно новым, но широко поддерживается браузерами. Вот как я использую его на своем сайте:
a { text-decoration: underline 0.15em rgba(0, 0, 0, 1); text-underline-offset: 0.2em; transition: text-decoration-color 300ms, text-underline-offset 300ms;
} a:hover { text-decoration-color: rgba(0, 0, 255, 1); text-underline-offset: 0.4em;
}
Единицы измерения
В качестве примечания, мне нравится использовать em для значений, потому что они относятся к размеру шрифта, а это означает, что если у нас есть текст разных размеров, подчеркивание будет пропорционально масштабироваться.
Поддержка браузерами
Вышеупомянутое отлично работает … в Firefox. На данный момент никакие другие браузеры не поддерживают переход или анимацию для text-underline-offset. (То же самое относится к text-decoration-thickness, что также может добавить некоторые интересные эффекты.) Но, к счастью, есть альтернативный подход к анимации этих свойств…
Houdini спешит на помощь
Не вдаваясь в мелкие технические детали, CSS Houdini — это набор низкоуровневых API-интерфейсов, которые предоставляют разработчикам доступ к частям движка CSS-рендеринга браузера. Это позволяет нам зарегистрировать пользовательское свойство и анимировать его с помощью CSS. Раньше разработчикам приходилось регистрировать свойство в Javascript, но теперь возможно сделать это полностью с помощью CSS, используя @property.
Для наших целей мы можем зарегистрировать свойство с именем —offset, которое будем использовать для значения text-underline-offset.
@property --offset { syntax: '<length>'; inherits: false; initial-value: 0px;
}
Важно установить начальное значение, иначе ничего не получится. По какой-то причине ems не работает в качестве начального значения, хотя я не понимаю, почему. Затем вместо перехода text-underline-offset мы переносим самонастраиваемое свойство:
a { transition: --offset 300ms, text-decoration-color 300ms;
} a:hover,
a:focus { --offset: 0.4em; text-decoration-color: rgba(0, 0, 255, 1);
}
Тестирование
К сожалению, перенос пользовательских свойств с помощью Houdini не поддерживается в Firefox или Safari, поэтому мы возвращаемся к предыдущей проблеме, связанной с решением ограниченной поддержки браузеров! Но не беспокойтесь, мы можем реализовать кросс-браузерное решение!
Мы можем использовать запрос функций, чтобы определить, поддерживает ли браузер Houdini (этот запрос относится к Paint API). Для браузеров, которые не поддерживают Houdini, мы вместо этого будем использовать свойство text-underline-offset, которое, к счастью, работает в Firefox и Safari!
@supports not (background: paint(something)) { a { transition: text-underline-offset 400ms, text-decoration-color 400ms; } a:hover, a:focus { text-underline-offset: 0.4em; }
}
Вот полное решение:
Автор: Michelle Barker
Источник: css-irl.info
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
