meaning - Sombra de caja de CSS3 encima de los niños

inline css

Question

¿Cómo obtengo un recuadro de sombreado CSS3 para representar en la parte superior de sus elementos secundarios?

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;
}

Answer 1

Cambie el color de fondo de los elementos secundarios para que también sea RGBA (esto solo se establece en los navegadores que lo entienden, lo que, convenientemente, es cualquier navegador que pueda manejar la sombra):

.chatmessage:nth-child(2n) {
    background : #EEE;
    background : RGBA(0, 0, 0, .066);
}

Tenga en cuenta que los dos colores ( #EEE , RGBA( 0, 0, 0, .066) ) son idénticos siempre que el fondo detrás de ellos sea blanco.

Demostración ya que las personas parecen estar abajo votando esto sin ninguna razón: http://jsfiddle.net/6NrkR/

Answer 2

Para evitar el uso de un elemento adicional, puede usar pseudo-elementos css. Prueba esta demo

#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;
}

Básicamente este CSS crea ese elemento adicional para usted. Observe los pointer-events:none para permitir que los eventos de clic pasen a través de este elemento.

Tenga en cuenta que pointer-events:none no funciona bien en algunos dispositivos móviles con respecto al desplazamiento táctil (hacer clic / taping funciona bien). Terminé no usando sombras insertadas en absoluto debido a esto.

Answer 3

Recomiendo usar box-shadow junto con -moz-box-shadow y -webkit-box-shadow .

Esto es futuro (y Opera 10.5;)) compatible.

Answer 4

no se puede hacer directamente desde css .. ( no es una sombra si va por encima de los elementos superpuestos )

necesitarías volver a trabajar tu html un poco agregando un div (o usar un pseudo elemento como lo sugiere miguelcobain''s respuesta miguelcobain''s ) para superponer la sombra y tu CSS para hacer que el nuevo div tenga la 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);
}

.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>