Прочесть серию небольших статей о классных эффектах при наведении на элемент можно на канале WebTutorials в Dzen.
Hover effect #3
Мы собираемся использовать два градиента вместо одного для этого эффекта. Мы увидим, что комбинирование нескольких градиентов — это еще один способ создания причудливых эффектов наведения.
Вот схема того, что мы делаем:
Вот как это выглядит в CSS:
Код почти такой же, как и у других эффектов наведения, которые мы рассмотрели. Единственная разница в том, что у нас есть два градиента с двумя разными позициями. Значения позиции могут выглядеть странно, но, опять же, это связано с тем, как проценты работают со свойством background-position в CSS, поэтому я настоятельно рекомендую прочитать мой ответ Stack Overflow, если вы хотите вникнуть в мельчайшие детали.
Теперь оптимизируем! Вы поняли идею — мы используем сокращенные свойства, пользовательские свойства и calc(), чтобы привести все в порядок.
Я добавил дополнительное пользовательское свойство --c, определяющее градиент, поскольку в обоих местах используется один и тот же градиент.
Ознакомиться с демонстрацией.
В этой демонстрации я использую 50,1% вместо 50% для размера фона, потому что это предотвращает появление промежутка между градиентами. Я также добавил 1% к позициям по аналогичным причинам.
Давайте сделаем вторую оптимизацию, используя переменную switch:
Ссылка на CodePen.
Вы начали видеть закономерности здесь? Дело не в том, что эффекты, которые мы делаем, сложны. Это скорее «последний шаг» оптимизации кода. Мы начинаем с написания подробного кода с большим количеством свойств, а затем сокращаем его, следуя простым правилам (например, используя сокращение, удаляя значения по умолчанию, избегая избыточных значений и т. д.), чтобы максимально упростить вещи.
Продолжение статьи вскоре выйдет. Читайте перевод на канале WebTutorials в дзене.
Прочесть оригинальную статью можно по ссылке.