Некоторое время назад Джефф написал статью о классном эффекте наведения. Эффект основан на комбинации псевдоэлементов CSS, преобразований и переходов. Множество комментариев показали, что тот же эффект можно добиться, используя свойства фона. Джефф упомянул, что это была его первоначальная мысль, и я тоже об этом думал. Я не говорю, что псевдоэлемент, на котором он остановился, плох, но знание различных методов для достижения того же эффекта может быть только хорошим.
В этом посте мы переработаем этот эффект наведения, а также расширим его до других типов эффектов наведения, которые используют только свойства фона CSS.
Вы можете увидеть свойства background в работе в этой демонстрации, а также то, как мы можем использовать пользовательские свойства и функцию calc(), чтобы сделать еще больше. Мы собираемся научиться комбинировать все это, чтобы у нас остался хорошо оптимизированный код!
Эффект наведения №1
Давайте начнем с первого эффекта, который является воспроизведением эффекта, подробно описанного Джеффом в его статье. Код, используемый для достижения этого эффекта, следующий:
Если мы опустим цветовой переход (что необязательно), нам потребуется всего три объявления CSS для достижения эффекта. Вы, наверное, удивлены, насколько мал код, но вы увидите, как мы его получили.
Во-первых, давайте начнем с простого перехода размера фона.
Мы анимируем размер линейного градиента от 0 100% до 100% 100%. Это означает, что ширина изменяется от 0 до 100%, а сам фон остается на полную высоту. Пока ничего сложного.
Приступим к нашей оптимизации. Сначала мы преобразуем наш градиент, чтобы использовать цвет только один раз:
Синтаксис может показаться немного странным, но мы сообщаем браузеру, что один цвет применяется к двум точкам цвета, и этого достаточно для определения градиента в CSS. Обе точки цвета равны 0, поэтому браузер автоматически устанавливает последнюю на 100% и заполняет наш градиент тем же цветом. Сократили, FTW!
С background-size мы можем опустить высоту, потому что градиенты по умолчанию имеют полную высоту. Мы можем сделать переход от background-size: 0 к background-size: 100%.
Давайте введем пользовательское свойство, чтобы избежать повторения background-size:
Мы не определяем --p изначально, поэтому будет использоваться резервное значение (0% в нашем случае). При наведении мы определяем значение, которое заменяет резервное (100%).
Теперь давайте объединим все свойства фона, используя сокращенную версию, чтобы получить:
Мы приближаемся! Обратите внимание, что я ввел left значение (для background-position), которое является обязательным при определении размера в стенографии фона. Кроме того, он нам в любом случае нужен для достижения нашего эффекта наведения.
Нам также нужно обновить позицию при наведении. Мы можем сделать это в два этапа:
- Увеличение размера справа при наведении мыши.
- Уменьшите размер слева от мыши.
Для этого нам также нужно обновить background-position при наведении:
Посмотреть полную демо-версию.
Мы добавили две вещи в наш код:
- Значение background-position right при наведении
- transition-duration 0 с в background-position
Это означает, что при наведении мы мгновенно меняем background-position слева (видите, нам нужно это значение!) на right, так что размер фона будет увеличиваться с правой стороны. Затем, когда курсор мыши покидает ссылку, переход воспроизводится в обратном порядке, right left, создавая впечатление, что мы уменьшаем размер фона с левой стороны. Наш эффект наведения готов!
Но вы сказали, что нам нужны только три декларации, а их четыре.
Это правда, хороший улов. Left и right значения можно изменить на 0 0 и 100% 0 соответственно; и поскольку наш градиент уже имеет полную высоту по умолчанию, мы можем использовать значения 0 и 100%.
Видите, как background-position и --p используют одни и те же значения? Теперь мы можем сократить код до трех объявлений:
Пользовательское свойство --p определяет положение и размер фона. При наведении он также обновит их оба. Это идеальный вариант использования, показывающий, как настраиваемые свойства могут помочь нам сократить избыточный код и избежать повторного написания свойств. Мы определяем нашу настройку, используя пользовательские свойства, и мы обновляем последние только при наведении.
Но эффект, описанный Джеффом, действует противоположным образом, начиная слева и заканчивая справа. Как нам это сделать, когда кажется, что мы не можем полагаться на одну и ту же переменную?
Мы все еще можем использовать одну переменную и немного обновить наш код, чтобы добиться противоположного эффекта. Мы хотим перейти от 100% к 0% вместо 0% к 100%. У нас есть разница в 100%, которую мы можем выразить с помощью calc(), например:
--p изменится от 0% до 100%, но положение фона изменится от 100% до 0%, благодаря функции calc().
У нас все еще есть три объявления и одно пользовательское свойство, но с другим эффектом.
Смотреть демо-версию.
Прежде чем мы перейдем к следующему эффекту наведения, я хочу выделить кое-что важное, что вы, вероятно, заметили. При работе с пользовательскими свойствами я использую 0% (с единицей) вместо безразмерного 0. Безразмерный ноль может работать, когда пользовательское свойство является одним, но не будет работать внутри calc(), где нам нужно явно определить единицу. Мне может понадобиться еще одна статья, чтобы объяснить эту причуду, но всегда не забывайте добавлять единицу измерения при работе с пользовательскими свойствами.
Продолжение вскоре появится на канале.
Читать оригинальную статью можно по ссылке.
