У меня есть панель навигации с вкладками, где я бы хотел, чтобы открытая вкладка имела тень, чтобы отделить ее от других вкладок. Я также хотел бы, чтобы у всего раздела вкладок была одна тень (см. Нижняя горизонтальная линия), поднимающаяся вверх, затеняя нижнюю часть всех вкладок, кроме открытой.
Я собираюсь использовать для этого box-shadow
свойство CSS3 , но я не могу придумать способ затенять только те части, которые мне нужны.
Обычно я бы закрывал нижнюю тень открытой вкладки областью содержимого (выше z-index
), но в этом случае сама область содержимого имеет тень, так что она просто закрывает вкладку.
Макет вкладки
_______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______
Линия тени.
Тень поднималась бы вверх от горизонтальных линий и наружу от вертикальных линий.
_______ | | _______________ | | _________________
Вот живой пример:
Есть какая-нибудь помощь, гении?
Ответы:
В вашем примере создайте div внутри #content с этим стилем
и измените стиль #content (удалите отступы) и добавьте тень
добавить тени на вкладки:
источник
#content_over_shadow
должна соответствовать#content
стилю пользователя.Срезать с переливом.
источник
z-index
Вы можете использовать несколько теней CSS без каких-либо других div, чтобы получить желаемый эффект, с предостережением об отсутствии теней по углам.
В целом, хотя это очень ненавязчиво.
источник
Еще один, довольно креативный способ решения этой проблемы - это добавление псевдоэлемента: after или: before к одному из элементов. В моем случае это выглядит так:
Посмотрите на снимок экрана, псевдоэлемент сделан красным, чтобы он был более заметным.
источник
Лично мне больше всего нравится найденное здесь решение: http://css3pie.com/demos/tabs/
Это позволяет вам иметь нулевое состояние или состояние наведения с цветом фона, который все еще имеет тень от содержимого ниже, перекрывающего его. Не уверен, что это возможно с помощью описанного выше метода:
ОБНОВИТЬ:
На самом деле я был неправ. Вы можете сделать так, чтобы принятое решение поддерживало состояние зависания, показанное выше. Сделай это:
Вместо того, чтобы иметь положительный родственник для a, поместите его в класс a.active с z-index, который выше, чем ваш div #content ниже (на котором есть тень), но ниже, чем z-index на вашем content_wrapper.
Например:
затем с вашим css:
источник
Обновить:
clip-path
теперь поддерживается во всех основных браузерах.Оригинальный ответ:
Если вы хотите использовать экспериментальную технологию с частичной поддержкой , вы можете использовать
clip-path
свойство .Это произведет желаемый эффект: тень блока сверху, слева и справа с чистым обрезом по нижнему краю.
В вашем случае вы должны использовать clip-path: inset (px px px px); где значения пикселей рассчитываются от рассматриваемого края (см. ниже).
Это приведет к обрезанию рассматриваемого div по адресу:
Обратите внимание, что между значениями пикселей не требуется запятых.
Размер div может быть гибким.
источник
вы также можете скрыть тень, используя несколько прямоугольных теней.
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
источник
Если вы добавили два пролета для подключения, вы могли бы использовать два, например:
на один пролет и
по другому. Может работать!
Если тени накладываются друг на друга, вы можете даже использовать 3 тени - одну на 1 пиксель влево, одну на 1 пиксель вправо и одну на 1 пиксель вверх или любой другой толщины, которую вы хотите.
источник
Я сделал что-то вроде хака, не идеально, но вроде нормально:
SCSS
источник