Крутые эффекты при наведении, использующие свойство background. Часть 3

Прочесть серию небольших статей о классных эффектах при наведении на элемент можно на канале WebTutorials в Dzen.

Hover effect #3

Мы собираемся использовать два градиента вместо одного для этого эффекта. Мы увидим, что комбинирование нескольких градиентов — это еще один способ создания причудливых эффектов наведения.

Вот схема того, что мы делаем:

Изначально у нас есть два градиента, которые переполняют элемент, так что они не видны. Каждый из них имеет фиксированную высоту и поднимается на половину ширины элемента. Затем мы перемещаем их в поле зрения, чтобы сделать их видимыми. Первый градиент размещается внизу слева, а второй — вверху справа. Наконец, мы увеличиваем высоту, чтобы покрыть весь элемент.

Вот как это выглядит в CSS:

Код почти такой же, как и у других эффектов наведения, которые мы рассмотрели. Единственная разница в том, что у нас есть два градиента с двумя разными позициями. Значения позиции могут выглядеть странно, но, опять же, это связано с тем, как проценты работают со свойством background-position в CSS, поэтому я настоятельно рекомендую прочитать мой ответ Stack Overflow, если вы хотите вникнуть в мельчайшие детали.

Теперь оптимизируем! Вы поняли идею — мы используем сокращенные свойства, пользовательские свойства и calc(), чтобы привести все в порядок.

Я добавил дополнительное пользовательское свойство --c, определяющее градиент, поскольку в обоих местах используется один и тот же градиент.

Ознакомиться с демонстрацией.

В этой демонстрации я использую 50,1% вместо 50% для размера фона, потому что это предотвращает появление промежутка между градиентами. Я также добавил 1% к позициям по аналогичным причинам.

Давайте сделаем вторую оптимизацию, используя переменную switch:

Ссылка на CodePen.

Вы начали видеть закономерности здесь? Дело не в том, что эффекты, которые мы делаем, сложны. Это скорее «последний шаг» оптимизации кода. Мы начинаем с написания подробного кода с большим количеством свойств, а затем сокращаем его, следуя простым правилам (например, используя сокращение, удаляя значения по умолчанию, избегая избыточных значений и т. д.), чтобы максимально упростить вещи.

Продолжение статьи вскоре выйдет. Читайте перевод на канале WebTutorials в дзене.

Прочесть оригинальную статью можно по ссылке.