Эффект фотозатвора при наведении
Мы создадим красивый hover-эффект, который похож на работу затвора фотоаппарата. Разметка максимально простая. Для старта понадобится один див, который будет увлечённо олицетворять собой карточку.
Добавим базовые стили карточки. Нам нужен круг фиксированного размера с временной чёрной обводкой, на фон поместим картинку-логотип. Содержимое круга (когда оно появится) будет центроваться.
Давайте исследуем, как ведёт себя внутренняя тень с нулевым размытием, если ей задать большие значения смещения. Такая тень начинает перекрывать фон элемента.
Чем больше размер смещения тени, тем больше пространства внутри элемента она перекрывает.
Если задать размер смещения тени, который превышает размеры самого элемента, то тень заполнит карточку целиком.
Вернём размеры смещения равные 50px и посмотрим, можно ли нарисовать тени с других сторон.
Внутренние тени могут быть множественными. Добавим жёлтую тень со смещением -50px 50px. Жёлтая тень находится первой в списке, поэтому перекроет красную тень. Из-за отрицательного смещения по горизонтали жёлтая тень находится справа.
Добавим третью тень синего цвета со смещением 50px -50px. Теперь смещение по оси Y отрицательное, и тень расположится снизу слева.
Добавим четвёртую, чёрную, тень со смещением -50px -50px, которая ожидаемо займёт правый нижний угол «карточки».
Уже вырисовывается картинка, похожая на затвор фотоаппарата.
Введём CSS-переменные, чтобы управлять смещением теней.
Переменная --shift задает значение смещения. Переменная --invertedShift нужна для удобства и содержит отрицательное значение --shift.
Заменим статичные размеры смещений на переменные --shift и --invertedShift в значении свойства box-shadow. Тени на месте, значит мы всё сделали правильно.
Теперь можно изменять размер смещений одновременно для всех теней с помощью переменной --shift. Изменим значение переменной на 25px и «затвор» из теней «раскроется» шире.
Поэкспериментируйте с переменной --shift. Меняйте её значение и смотрите, что получается.
Зададим переменной --shift значение 300px и получим полностью чёрную карточку, так как чёрная тень находится выше всех остальных.
Теперь добавим внутрь карточки содержимое. Обратите внимание, что тень перекрывает фон карточки, но не перекрывает содержимое. То есть она находится между фоном и текстом.
Зададим стили при наведении на карточку: обнулим смещение всех внутренних теней и сделаем их прозрачными (прозрачность проявит себя позже), добавим внешнюю тень, сделаем текст прозрачным и уберём уже ненужную обводку.
Можете навестись на карточку, но до завершения эффекта остался один шаг.
Момент истины!
Добавляем плавные переходы для теней и цвета текста при наведении на карточку. Восхитительный ховер-эффект готов! Наводите мышь и наслаждайтесь. Эффект возникает благодаря смещению внутренних теней с одновременным изменением их прозрачности.
Собираем все стили в одно CSS-правило и наш эффект полностью готов.
Экспериментируйте с расположением теней, цветами, параметрами анимации, создавайте свои варианты эффекта и делитесь ими с нами, и со своими друзьями.
