box-shadow em cima das crianças
Pergunta
Como faço para obter uma CSS3 box-shadow
inserção para render em cima de seus elementos filhos?
Problema:
HTML:
<div id="chatroom">
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
</div>
CSS:
#chatroom{
border: 1px solid #CCC;
height: 135px;
font-size: 0.75em;
line-height: 1.2em;
overflow: auto;
-moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
-webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
}
.chatmessage{
padding: 4px 2px;
}
.chatmessage b{
margin-right: 2px;
}
.chatmessage:nth-child(2n) {
background: #EEE;
}
Solução
não pode ser feito diretamente do css .. ( Não é sombra se ele vai acima sobreposição elementos )
você precisa refazer o seu html um pouco, adicionando um div (ou use um elemento pseudo como sugerido por de miguelcobain resposta) para sobrepor a sombra e sua CSS para tornar as novas div tem a sombra ..
#chatroom {
border: 1px solid #CCC;
height: 135px;
font-size: 0.75em;
line-height: 1.2em;
overflow: auto;
position: relative;
}
.shadow {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
-moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
-webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
}
.chatmessage {
padding: 4px 2px;
}
.chatmessage b {
margin-right: 2px;
}
.chatmessage:nth-child(2n) {
background: #EEE;
}
<div id="chatroom">
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="shadow"></div>
</div>
Outras dicas
Para evitar o uso de um elemento adicional, você pode usar pseudo-elementos css. Tente este demonstração .
#chatroom {
position: relative;
}
#chatroom:before {
content: "";
/* Expand element */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
box-shadow: inset 0 0 8px rgba(0,0,0,.55);
/* Disable click events */
pointer-events: none;
}
Basicamente, este css cria esse elemento adicional para você. Observe a pointer-events:none
para permitir eventos de clique para passar por este elemento.
Tenha em mente que pointer-events:none
não funciona bem em alguns dispositivos móveis em relação toque de rolagem (clique / obras taping também). Acabei não usando sombras embutidas em tudo por causa disso.
Alterar a cor de fundo de todas as crianças também ser RGBA (isso fica só definir em navegadores que entendem que, convenientemente, é qualquer navegador que pode lidar com a sombra):
.chatmessage:nth-child(2n) {
background : #EEE;
background : RGBA(0, 0, 0, .066);
}
Note que as duas cores (#EEE
, RGBA( 0, 0, 0, .066)
) são idênticas, desde que o fundo atrás deles é branco.
Demonstração já que as pessoas parecem ser para baixo votar este sem motivo: http://jsfiddle.net/6NrkR/