Анимация подчёркивания ссылок на чистом CSS

Original author: Danny Guo
  • Translation
  • Tutorial
Одно из преимуществ создания моего личного сайта с нуля вместо использования готовой темы заключается в том, что я начинаю с настроек браузера по умолчанию и постепенно добавляю собственные расцветки. Я стараюсь удержать сайт от раздувания, но и персонализация — важное дело. Нужно найти некий компромисс между спартанскими страницами Hacker News и Craigslist с одной стороны и перегруженностью старого MySpace с другой.

Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки).

Вот как сейчас выглядит эффект:


Реализация


Отрисовка линий под текстом — на удивление сложная тема. Всё зависимт от того, насколько далеко вы готовы отклониться от стандарта и о каких деталях беспокоитесь (например, проход мимо выносных элементов букв).

Я исследовал два подхода. Оба они, по сути, удаляют стандартный text-decoration и с помощью псевдоэлементов добавляют имитированную границу. Затем эта граница анимируется переходами CSS. К сожалению, у этих решений один недостаток: они нормально не работают, если ссылка охватывает более одной строки. Подчёркивание появляется только в первой строке.


В конце концов я нашёл CodePen от Shaw, лишённый этого недостатка, и изменил эффект на свой вкус.


Вот соответствующий код. Поиграться с ним можно на repl.it.

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover {
    background-size: 100% 2px;
}

Рассмотрим подробнее это решение.

Во-первых, отключаем стандартное оформление text-decoration.

Нам придётся использовать фоновое изображение, потому что оно способно покрыть несколько строк. Хотя можно взять реальную картинку, но речь идёт всего лишь о линии, поэтому используем линейный градиент, который сгенерирует нам изображение. Обычно его используют для создания градиента между двумя разными цветами, но нам нужно, чтобы подчёркивание было того же цвета, что и ссылка, поэтому используем currentColor как для начала, так и для конца градиента. currentColor указывает браузеру использовать цвет элемента из свойства color.

Используем background-position для размещения изображения в левом нижнем углу. Значение 0% соответствует горизонтальному положению, а 100% — вертикальному.

Отключаем background-repeat, чтобы предотвратить создание нескольких экземпляров изображения.

С помощью background-size указываем нулевую ширину и высоту в два пикселя. Нулевая ширина означает, что подчёркивание появится только при наведении, иначе картинка не видна.

Устанавливаем transition по размеру фона, так что любое изменение свойства займет 0.3 секунды.

При наведении на ссылку меняем ширину изображения на 100%, создавая полное подчёркивание, а transition обеспечивает анимацию.

Вот и всё! Я очень доволен лаконичностью кода. Если хотите добавить на свой сайт что-то похожее, не стесняйтесь брать эту реализацию или посмотрите некоторые другие анимированные эффекты подчёркивания.
Support the author
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 10

    +6
    Надеюсь, что не придется пользоваться сайтом с такими спецэффектами.
      +3
      Проблема красивых нарочитых анимационных эффектов в том, что они быстро приедаются, а затем начинают раздражать.
      С технической точки зрения реализация — интересная.
        0
        Я месяца 3 назад сам переизобрёл этот способ но потом возникли неприятности с чем-то не помню с чем, но реализация 1 в 1. Так что это может привести к неприятным последствиям. Глобально на весть сайт навешивать не стоит, плохо подаётся контролю. Как эффект для заголовков или парочки блоков пойдёт.
          0
          Так, а в чем же неприятности и почему плохо контролируется? Здесь же не какие-то навороченные хаки, а вполне допустимое решение. Просто для мобильных устройств это бесполезно.
            0
            Необходимо было вёрстку натягивать на движок и там уже конечному пользователю не объяснишь что мол ты вот этот вот класс добавь и будет тебе эффект, а у нас в текущем положении зачастую кнопки не кнопки, а ссылки куча ещё непредвиденых вещей, да ещё тулбар админки, глобально это лучше не вещать. Одно дело текстдекорешен туда сюда отключать, а другое дело беграунд добавлять.
          0
          Если изначально сделать подчеркивание ссылок, то изобретать украшательства, чтобы пользователь понял о наличии ссылки, не пришлось бы.
          Еще бесит, когда в тексте вообще не выделяют ссылки, даже цветом.
          Всё выше сказанное применимо только к ссылкам в тексте. В навигации можно обойтись и без подчеркивания, если того требует дизайнер.

          Кто-нибудь может мне объяснить почему так не любят подчеркнутые ссылки?
            0
            Может быть, стандартное подчёркивание просто приелось? Лично я совсем не против выделения ссылок, напротив, даже за, поэтому в основном выделяю ссылки и цветом, и прерывистым подчёркиванием (которое dashed), которое при наведении превращается в сплошное для респонсивности.
            +1

            Отличная идея и исполнение. Спасибо, что поделились. Жаль, что под подобными статьями в русскоязычном интернете чаще негативные комментарии.

              0
              Что-то похожее делал пару месяцев назад, можно легко переделать на подчеркивание. не ожидал кстати, что такая статья по css вообще в плюс выйдет, молодец)
              jsfiddle.net/poniyur/wchvm9b7
                0
                Довольно очевидное решение =) Буквально в декабре на одном из сайтов применил для анимации в заголовках аккордионов. Только приправил еще свойством box-decoration-break:
                jsfiddle.net/nms9jyux

                Only users with full accounts can post comments. Log in, please.