Развлекаемся с эффектами при наведении на ссылку

Развлекаемся с эффектами при наведении на ссылку

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

Но в ее работе был, на мой взгляд, крошечный нюанс: эффекты при наведении на ссылку были странными.

Ссылка по умолчанию (сверху) и эффект наведения (внизу)

Ха! Я не только не видел такого раньше, эта идея никогда не приходила мне в голову. Оказывается, есть много примеров этого на реальных сайтах, один из которых — The Outline. Именно эта идея вдохновила дизайнера.

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Круто, подумал я. Мы можем сделать что-то вроде линейного фонового градиента или даже фонового изображения. Но! Это не все. Оказывается, этот эффект анимирован. Опять же, на The Outline:

Снимок экрана из статьи The Outline

Вау! Это довольно дико. Я не был уверен, как подойти к этому, честно говоря, потому что анимация для любой из моих первоначальных идей будет сложной, особенно по части кросс-браузерной поддержки.

Итак, как это сделали The Outline? Оказывается, это SVG. Мы можем сделать крутой контур и анимировать его довольно просто:

Но как это работает со ссылкой? Ну, мы можем использовать SVG для свойства background-image:

Но это немного не то, потому что мы не можем его анимировать. Для этого нам нужны лучшие решения. Тем не менее, мы можем встроить CSS непосредственно в SVG, в свойство background-image. Мы не можем просто скопировать и вставить SVG-код в свойство, но с помощью определенного кода это возможно:

И поскольку SVG может содержать собственные стили в разметке, анимация может быть передана прямо в свойство background-image, так же, как мы делаем это с помощью CSS в заголовке HTML-документа или встроенного CSS в HTML.

Мы можем немного изменить стили:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Это вдохновляет!

Я понятия не имею, хорошо ли влияет такая яркая анимация на опыт пользователя, и, честно говоря, не в этом суть этого поста. Дело в том, что у The Outline появилась забавная идея с реализацией CSS.

Это заставило меня задуматься о других нестандартных (возможно, даже нетрадиционных) стилях наведения, которые мы можем создать. Опять же, не рассматривая юзабилити. а только проводя захватывающие эксперименты с CSS…

Эффекты границы, переходящей в фон

Возможно, та же самая нижняя граница ссылки по умолчанию может растягиваться и становиться фоном ссылки при наведении:

Черт, мы можем сделать что-то подобное горизонтально:

Эффект обведенного текста

Давайте уберем цвет шрифта и оставим только контур.

Эффект увеличивающегося текста

Другая идея — увеличить текст при наведении:

Эффект изменяющегося шрифта

Это так непрактично, что это заставляет меня улыбнуться, так почему бы нет:

Эффект «Появись, Крис»

Прости, Крис. Я думаю, тебе это понравится.

Что вы еще можете придумать?

Есть идеи? Дайте мне знать в комментариях, и я отправлю их в коллекцию CodePen, которую я начал.

Автор: Geoff Graham

Источник: https://css-tricks.com/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

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

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

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

Комментарии (1)

  1. Алексей

    Здорова! Отличная идея, обязательно попробую на своем сайте. Спаисбо за идею!

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree