От автора: дизайнер, с которым я работаю, представил на недавнем собрании команды свой проект. Она проделала замечательную работу, объединив концепцию системы дизайна, компоненты, шаблонов и все, что между ними, и это сделало бы любого стороннего разработчика счастливым.
Но в ее работе был, на мой взгляд, крошечный нюанс: эффекты при наведении на ссылку были странными.
Ссылка по умолчанию (сверху) и эффект наведения (внизу)
Ха! Я не только не видел такого раньше, эта идея никогда не приходила мне в голову. Оказывается, есть много примеров этого на реальных сайтах, один из которых — The Outline. Именно эта идея вдохновила дизайнера.
Круто, подумал я. Мы можем сделать что-то вроде линейного фонового градиента или даже фонового изображения. Но! Это не все. Оказывается, этот эффект анимирован. Опять же, на The Outline:
Снимок экрана из статьи The Outline
Вау! Это довольно дико. Я не был уверен, как подойти к этому, честно говоря, потому что анимация для любой из моих первоначальных идей будет сложной, особенно по части кросс-браузерной поддержки.
Итак, как это сделали The Outline? Оказывается, это SVG. Мы можем сделать крутой контур и анимировать его довольно просто:
Но как это работает со ссылкой? Ну, мы можем использовать SVG для свойства background-image:
Но это немного не то, потому что мы не можем его анимировать. Для этого нам нужны лучшие решения. Тем не менее, мы можем встроить CSS непосредственно в SVG, в свойство background-image. Мы не можем просто скопировать и вставить SVG-код в свойство, но с помощью определенного кода это возможно:
И поскольку SVG может содержать собственные стили в разметке, анимация может быть передана прямо в свойство background-image, так же, как мы делаем это с помощью CSS в заголовке HTML-документа или встроенного CSS в HTML.
Мы можем немного изменить стили:
Это вдохновляет!
Я понятия не имею, хорошо ли влияет такая яркая анимация на опыт пользователя, и, честно говоря, не в этом суть этого поста. Дело в том, что у The Outline появилась забавная идея с реализацией CSS.
Это заставило меня задуматься о других нестандартных (возможно, даже нетрадиционных) стилях наведения, которые мы можем создать. Опять же, не рассматривая юзабилити. а только проводя захватывающие эксперименты с CSS…
Эффекты границы, переходящей в фон
Возможно, та же самая нижняя граница ссылки по умолчанию может растягиваться и становиться фоном ссылки при наведении:
Черт, мы можем сделать что-то подобное горизонтально:
Эффект обведенного текста
Давайте уберем цвет шрифта и оставим только контур.
Эффект увеличивающегося текста
Другая идея — увеличить текст при наведении:
Эффект изменяющегося шрифта
Это так непрактично, что это заставляет меня улыбнуться, так почему бы нет:
Эффект «Появись, Крис»
Прости, Крис. Я думаю, тебе это понравится.
Что вы еще можете придумать?
Есть идеи? Дайте мне знать в комментариях, и я отправлю их в коллекцию CodePen, которую я начал.
Автор: Geoff Graham
Источник: https://css-tricks.com/
Редакция: Команда webformyself.