How Can I Create a Single-Sided Shadow Effect in CSS?

Dropping a Shadow on a Single Side of an Element

Creating a shadow effect on an element is commonly achieved using the box-shadow property, which can apply shadows on all sides of an element. However, in certain scenarios, it may be desirable to have the shadow appear on only one side, such as the bottom, without overlapping other elements adjacent to it.

One approach to achieve this is by utilizing a pseudo-element like :after to create an additional layer beneath the main element. This layer can then be positioned and styled separately to exhibit the desired shadow effect.

Consider the following code:

#box {
  background-color: #3D6AA2;
  width: 160px;
  height: 90px;
  position: absolute;
  top: calc(10% - 10px);
  left: calc(50% - 80px);
}

.box-shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0px 0px 8px 2px #000000;
}

In this example, we create a container element with the ID box and add a CSS class .box-shadow to it. The :after pseudo-element is added within .box-shadow and styled with specific dimensions, positioning, and shadow properties.

By setting bottom: 1px and transform: scale(.9) on the :after pseudo-element, we create a narrow and slightly slanted shape that appears underneath the main element. The box-shadow property then adds a shadow effect to this shape, resulting in the appearance of a shadow only on the bottom side of the main element.

This technique allows for the precise placement and customization of shadows without affecting other parts of the design, providing a versatile solution for various layout requirements.

The above is the detailed content of How Can I Create a Single-Sided Shadow Effect in CSS?. For more information, please follow other related articles on the PHP Chinese website!