От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу.
Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами.
Техника 1: Использование background-clip: text
На момент написания статьи background-clip: text — это экспериментальная функция, которая не поддерживается в Internet Explorer 11 и ниже.
Этот метод включает создание убирающегося текста с резким переходом градиента. Разметка состоит из одного HTML-элемента ссылки (<a>) для создания гиперссылки:
<a href="#">Link Hover</a>
Мы можем начать добавлять стили к гиперссылке. Использование overflow: hidden обрезает во время перехода при наведении любой контент за пределами гиперссылки:
a { position: relative; display: inline-block; font-size: 2em; font-weight: 800; color: royalblue; overflow: hidden; }
Нам нужно будет использовать линейный градиент с резким переходом на 50% от начального цвета ссылки к цвету при наведении:
a { /* Same as before */ background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%); }
Давайте используем background-clip, чтобы обрезать градиент и значение text для отображения текста. Мы также будем использовать свойства background-size и background-position для отображения исходного цвета:
a { /* Same as before */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; }
Наконец, давайте добавим для гиперссылки свойство CSS transition и псевдо-класс CSS :hover. Чтобы ссылка окрашивалась при наведении слева направо, используйте свойство background-position:
a { /* Same as before */ transition: background-position 275ms ease; } a:hover { background-position: 0 100%; }
Несмотря на то, что этот метод обеспечивает эффект наведения, Safari и Chrome будут обрезать оформление текста и тени, то есть они не будут отображаться. Применение стилей текста, таких как подчеркивание, с помощью свойства CSS text-decor не будет работать. Возможно, вам придется использовать другие подходы при создании подчеркиваний.
Техника 2: Использование width/height
Это работает благодаря использованию атрибута данных, содержащего тот же текст, что и в теге <a>, и установке width (окрашивание текста слева направо или справа налево) или height (окрашивание текста сверху вниз или снизу вверх), от 0% до 100% при наведении.
Вот разметка:
<a href="#" data-content="Link Hover">Link Hover</a>
CSS похож на тот, что мы использовали в предыдущей технике, минус свойства CSS background. Здесь будет использоваться свойство text-decoration:
a { position: relative; display: inline-block; font-size: 2em; color: royalblue; font-weight: 800; text-decoration: underline; overflow: hidden; }
Теперь нам нужно использовать контент из атрибута data-content. Он будет расположен над содержимым в теге <a>. Мы используем небольшую хитрость: копируем текст в атрибуте данных и отображаем его через функцию attr() в свойстве content псевдо-элемента ::before.
a::before { position: absolute; content: attr(data-content); /* Prints the value of the attribute */ top: 0; left: 0; color: midnightblue; text-decoration: underline; overflow: hidden; transition: width 275ms ease; }
Чтобы текст не переносился на следующую строку, будет применяться white-space: nowrap. Чтобы изменить цвет заливки ссылки, задайте значение для свойства CSS color, используя псевдо-элемент ::before и при значении width, начинающемся с 0:
a::before { /* Same as before */ width: 0; white-space: nowrap; }
Увеличьте ширину псевдо-элемента ::before до 100% , чтобы завершить эффект наведения:
a:hover::before { width: 100%; }
Хотя в этом методе используется трюк, свойства width или height не дают производительный переход CSS. Лучше всего использовать для достижения плавного перехода либо свойство transform, либо opacity со скоростью 60 кадров в секунду.
Использование свойства CSS text-decoration может позволить отображать различные стили подчеркивания при переходе. Я создал иллюстрирующую это демонстрацию, используя следующую технику: свойство CSS clip-path.
Техника 3: Использование clip-path
Для этой техники мы будем использовать свойство CSS clip-path с многоугольной фигурой. Многоугольник будет иметь четыре вершины, две из которых будут смещаться вправо при наведении:
Разметка такая же, как и в предыдущем методе. Мы снова будем использовать псевдо-элемент ::before, но CSS будет другим:
a::before { position: absolute; content: attr(data-content); color: midnightblue; text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease; }
В отличие от предыдущих методов, text-decoration: underline должен быть объявлен для псевдо-элемента ::before с цветом заливки подчеркивания при наведении курсора. Теперь давайте рассмотрим CSS для техники clip-path:
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
Вершины многоугольника свойства clip-path устанавливаются в процентах, чтобы определить координаты в следующем порядке:
0 0 = вверху слева
0 0 = вверху справа
100% 0 = внизу справа
0 100% = внизу слева
Направление эффекта заливки можно скорректировать, изменив координаты. Теперь, когда у нас есть представление о координатах, мы можем заставить многоугольник расширяться вправо при наведении:
a:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
Этот метод работает довольно хорошо, но обратите внимание, что поддержка свойства clip-path зависит от браузера. Создание CSS-перехода с помощью clip-path — лучшая альтернатива, чем использование метода width/ height; однако, это действительно влияет на отрисовку браузером.
Техника 4: Использование преобразования
Разметка для этого метода использует метод маскировки с элементом span. Поскольку мы будем использовать дублированный контент в отдельном элементе, мы зададим для него aria-hidden=»true» для улучшения доступности — это скроет его от программ чтения с экрана, чтобы контент не читался дважды:
<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>
CSS для элемента span содержит переход, который будет начинаться слева:
span { position: absolute; top: 0; left: 0; overflow: hidden; transform: translateX(-100%); transition: transform 275ms ease; }
Далее нам нужно заставить span смещаться вправо вот так:
Для этого мы будем использовать функцию CSS translateX() и установим для нее значение 0:
a:hover span { transform: translateX(0); }
Затем мы используем для span псевдо-элемент ::before, снова указав атрибут data-content, как мы делали ранее. Мы установим позицию, переместив ее на 100% вдоль оси x.
span::before { display: inline-block; content: attr(data-content); color: midnightblue; transform: translateX(100%); transition: transform 275ms ease; text-decoration: underline; }
Как и для элемента span, для позиции псевдо-элемента ::before также будет установлено translateX(0):
a:hover span::before { transform: translateX(0); }
Несмотря на то, что этот метод является наиболее совместимым с различными браузерами, для него требуется больше разметки и CSS. Тем не менее, использование свойства CSS transform очень полезно для производительности, поскольку не вызывает перерисовок и, следовательно, обеспечивает плавные переходы CSS со скоростью 60 кадров в секунду.
Мы это сделали!
Мы только что рассмотрели четыре различных метода для достижения одинакового эффекта. Хотя у каждого есть свои плюсы и минусы, вы можете видеть, что все они работают. Это аккуратный эффект, который делает ссылки более интерактивными.
Автор: Katherine Kato
Источник: https://css-tricks.com
Редакция: Команда webformyself.