Чтобы сделать «эффект вкладок» или наложить тень с трех сторон вместо фоновых изображений можно просто наложить тени. На каждый объект можно наложить несколько теней используя свойство box-shadow, для визуальной видимости тени с трех сторон нужно использовать две тени.
Пример 1: две тени. Первая с отступом вправо вниз, вторая влево вниз.
.shadow {box-shadow:
4px 4px 6px -1px #3556ff,
-4px 4px 6px -1px #ff1c1c;
}Поскольку синтаксис box-shadow: x y blur spread color тени можно крутить в любом направлении.
Пример 2: Отступы влево вверх, право вверх.
.shadow {box-shadow:
4px -4px 6px -1px #3556ff,
-4px -4px 6px -1px #ff1c1c;
}Тени можно комбинировать с другими визуальными эффектами. Например с использованием :hover
.shadow:hover {box-shadow:
4px -4px 6px -1px #3556ff,
-4px -4px 6px -1px #ff1c1c;
}
Добавить комментарий