Задать вопрос
Satheron
@Satheron
Прилежный ученик
css

Как при смещении блока оставить тень на месте?

Привет, я новичок в верстке, и столкнулся с такой проблемой, у меня есть кнопка при клике которая должна смещаться на 1px вниз, при этом ее тень должна остаться на месте. Смещение я реализовал, а вот тень какие бы параметры я ей в :active не прописывал, ездит вместе с кнопкой, что я должен использовать в этой ситуации ?
  • Вопрос задан
  • 98 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Логично, что движение объекта на определенное расстояние провоцирует его собственную тень сдвинуться на аналогичное расстояние, при условии постоянства источника света (это было вступление)

А решение кроется в отрицательном движении тени против вектора движения этого объекта.
Пример:

.button {
width: 100px;
height: 45px;
background: #bbb;
box-shadow: 5px 0 15px #000;
}

.button:hover {
transform: translate(1px);
box-shadow: 4px 0 15px #000;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@vardoLP
Ват ю сэй эбаут май мама?!
да как правило увеличивают или уменьшают размер тени, за счет этого создается эффект выше-ниже
Ответ написан
Комментировать
Комментировать
NooNoo
@NooNoo
Yep
Привет. Скинь css-код тени пожалуйста
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend React
Glob-com
от 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Переложить планировщик задач в веб-интерфейс
24 апр. 2024, в 23:57
1200 руб./в час
Telegram Парсер бот
24 апр. 2024, в 23:40
10000 руб./за проект
Доработка андроид приложения на kotlin
24 апр. 2024, в 23:13
130000 руб./за проект
Ещё заказы