У меня есть два элемента, которые расположены так, чтобы их стороны касались друг друга. Они имеют разный размер и размер на трогательной стороне. У обоих из них должна быть тень внизу.Установка теней для теней для группы элементов HTML

Проблема в том, что одна из теней всегда накладывается на свой родственный элемент. Я могу играть с z-index, но это означает, что я выберу, какая из двух будет наложена теневой сестрой.

Было бы здорово, если бы можно было добавить тень к группе элементов, в этом случае тень будет отображаться позади группы без каких-либо помех элемента и независимо от их вертикального упорядочения z-index.

Возможно ли добиться аналогичного эффекта в CCS3, не прибегая к теневым изображениям?

источник

2013-09-03 Robert Koritnik

Может использовать

div:after {

псевдо элемент

http://jsfiddle.net/2P964/

бит метода кружке, но это работает :)

источник

2013-09-03 23:44:55 user1525612

немного изменил его, чтобы сделать его более понятным. Http: // jsfiddle.net/2P964/1/ просто нужно поиграть с: после селектора немного, чтобы покрыть тень. – user1525612

Это очень интересный подход, который указал мне в правильном направлении. [Этот JSFiddle] (http://jsfiddle.net/uyEBJ/) показывает более реальный пример, который я использую. DIV являются вложенными. Но в основном я смог сделать это, используя вашу технику. ** Очень хорошо. ** –

немного обновил его. http://jsfiddle.net/2P964/2/ – user1525612

Я создал демоверсию, согласно моему пониманию вашей проблемы. Напишите в комментариях, если что-то не так! Demo Link

источник

2013-09-03 23:28:41

@RobertKoritnik Я обновил тень на другой цвет, чтобы быть видимым. –

Итак, вы добавили контейнер обоих элементов и поместили тень на контейнер. Это прекрасно, если оба элемента имеют одинаковую размерность на трогательной стороне, поскольку они по-прежнему занимают прямоугольную форму при группировке. Проблема в том, что мои элементы имеют разные размеры на трогательной стороне, как [это демо] (http://codepen.io/anon/pen/sIAvm). (Я обновил свой вопрос соответственно). –

@RobertKoritnik вы можете попробовать одну и ту же демонстрационную ссылку еще раз и посмотреть, иду ли я в правильном направлении. –

один альтернативный способ будет использовать клип:

div { 
    display: block; 
    box-shadow: 0 0 10px 2px black; 
    background-color: #fff; 
    background: linear-gradient(180deg, red, white 30px); 
} 

#one { 
    height: 200px; 
    width: 200px; 
    margin-left: 50px; 
    position: relative; 
} 

#two { 
    height: 50px; 
    width: 50px; 
    margin: 0 0 0 -50px; 
    position: absolute; 
    clip: rect(-10px, 50px, 100px, -10px); 
}

demo

Плюсы: Вы можете использовать в полной мере дивы (в demontrated на фоне градиента)
Минусы: ДИВ номер 2 должен быть абсолютным расположен на работу (хорошо , или фиксированный; но в любом случае нет какой-либо позиции, которую вы хотите

источник

2013-09-04 16:10:34 vals

Интересно. Хотя, похоже, в Chrome есть своего рода глюк, поскольку, как представляется, крошечный небольшой пробел на верхней части тени, где элементы касаются. –

Вы правы, хорошо заметили. Существует точка, где тень #one идет «вниз», так сказать, и тень теряет непрерывность. Я не думаю, что это проблема Chrome, но неудача в технике. Однако я думаю, что это может быть полезно в некоторых случаях; и, возможно, можно зафиксировать установку дополнительной тени в этом направлении. – vals

Существует аналогичный, но несколько перевернутый * сбой * с принятым решением. На том же месте, что и в вашем случае, тень сильнее. Он становится более заметным, когда тень темнее или когда он имеет более высокое расстояние распространения. –

Если есть фотографии внутри, почему бы просто не иметь 4 divs? Два для тени, затем два находятся сверху, те же координаты и отсутствие тени, только фоновая картинка

источник

2015-12-22 20:53:23

Установка теней для теней для группы элементов HTML

ответ

demo

Смежные вопросы