Тень с трех сторон CSS
Чтобы сделать «эффект вкладок» или наложить тень с трех сторон вместо фоновых изображений можно просто наложить тени. На каждый объект можно наложить несколько теней используя свойство 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;
}
Рассказать:
Спасибо!
Спасибо!
А че норм, спс)
Спасибо.
P.S.При оставлении комментария комментарий не обязателен:))
И подсчет не работает
У вас перепутаны стороны — то есть коды для картинок. Да и сами коды оставляют маленькие тени с тех сторон, где их не должно быть. Делал внутренние тени по вашим кодам — два блока где сходятся. Так вот, все равно есть узкая тень.