Efecte de umbră CSS. Umbre la pseudo-elemente ::before și ::after pentru a crea un efect interesant.

Puteți adăuga, de asemenea, umbre la pseudo-elemente ::before și ::after pentru a crea un efect interesant:

Exemplu:

#boxshadow {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% */
  height: 100px;
  bottom: 0;
}