Bootstrap Shadow Direction

Bootstrap does not provide utility classes for controlling the direction of shadows (e.g., top, bottom, left, right). Shadow utility classes are designed to provide a consistent and easy way to add shadow effects to elements, but they do not have built-in options for specifying the exact direction of the shadow. However, you can achieve similar effects using custom CSS rules. By creating custom shadow direction classes, we can control the direction of shadows applied to elements, enhancing the overall look and feel of our website. Here's a tutorial on how to create shadow direction classes :

Before we delve into creating custom shadow directions, let's quickly review existing shadow utility classes. These classes enable developers to easily add or remove shadow effects to elements. The main shadow utility classes provided by Bootstrap include:

• shadow: Adds a generic box shadow to an element.
• shadow-sm: Adds a smaller box shadow
• shadow-lg: Adds a larger box shadow.
• shadow-none: Removes any box shadow from an element.

Now let's create the shadow direction classes (.shadow-top, .shadow-bottom, .shadow-left, and .shadow-right) to control the direction of the shadows applied to an element.

Base Shadow Properties

Let's define the base shadow properties that will be shared among all shadow classes. These properties define the core characteristics of the shadow, such as size, offset, blur, and intensity.

/* Shared base shadow properties for all shadow classes */
.shadow,
.shadow-sm,
.shadow-lg,
.shadow-top,
.shadow-bottom,
.shadow-left,
.shadow-right {
  --bs-shadow-size: 0.5rem;                   /* Size of the shadow */
  --bs-shadow-offset-x: 0;                    /* Horizontal offset of the shadow */
  --bs-shadow-offset-y: var(--bs-shadow-size); /* Vertical offset of the shadow */
  --bs-shadow-blur: 1rem;                     /* Amount of blur for the shadow */
  --bs-shadow-intensity: 0.15;                /* Darkness/intensity of the shadow */

  box-shadow: var(--bs-shadow-offset-x) var(--bs-shadow-offset-y) var(--bs-shadow-blur) rgba(0, 0, 0, var(--bs-shadow-intensity)) !important;
}

/* Removes any box shadow from an element */
.shadow-none {
  box-shadow: none !important;
}

The following CSS code defines the shared base shadow properties that will be used for all shadow classes. These properties include the size of the shadow, horizontal and vertical offsets, blur amount, and shadow darkness:

• --bs-shadow-size: Specifies the size of the shadow around the element.
• --bs-shadow-offset-x: Sets the horizontal offset of the shadow. A positive value shifts the shadow right, and a negative value shifts it left.
• --bs-shadow-offset-y: Sets the vertical offset of the shadow. A positive value shifts the shadow downward, and a negative value shifts it upward.
• --bs-shadow-blur: Controls the amount of blur applied to the shadow, creating a softer or more diffused effect.
• --bs-shadow-intensity: Determines the darkness or intensity of the shadow. A higher value creates a darker shadow.

Customizing Shadow Sizes

Customize the shadow sizes for smaller (.shadow-sm) and larger (.shadow-lg) shadow classes. Here's how you can adjust the size, blur, and intensity for these classes:

/* Customizations for smaller shadow class */
.shadow-sm {
  --bs-shadow-size: 0.125rem;
  --bs-shadow-blur: 0.25rem;
  --bs-shadow-intensity: 0.075;
}

/* Customizations for larger shadow class */
.shadow-lg {
  --bs-shadow-size: 1rem;
  --bs-shadow-blur: 3rem;
  --bs-shadow-intensity: 0.175;
}

Creating Shadow Direction Classes

You'll define custom properties for horizontal and vertical offsets to create shadow direction classes based on the desired shadow direction. Here are the shadow direction classes we'll create:

• .shadow-top: Shadow appears at the top.
• .shadow-bottom: Shadow appears at the bottom.
• .shadow-left: Shadow appears to the left.
• .shadow-right: Shadow appears to the right.

Let's create custom shadow direction classes for Bootstrap. These classes will allow us to apply shadows to specific sides of elements.

/* Creating shadow direction classes */

.shadow-top {
  --bs-shadow-offset-x: 0;
  --bs-shadow-offset-y: calc(-1 * var(--bs-shadow-size));
}

.shadow-bottom {
  --bs-shadow-offset-x: 0;
  --bs-shadow-offset-y: var(--bs-shadow-size);
}

.shadow-left {
  --bs-shadow-offset-x: calc(-1 * var(--bs-shadow-size));
  --bs-shadow-offset-y: 0;
}

.shadow-right {
  --bs-shadow-offset-x: var(--bs-shadow-size);
  --bs-shadow-offset-y: 0;
}

The provided code snippet defines a set of shadow classes .shadow-top, .shadow-bottom, .shadow-left, .shadow-right: These are the custom class names representing different shadow directions. You can apply these classes to elements in your HTML to control the direction of the shadow.

Applying Shadow Direction Classes

To apply the shadow direction classes to your HTML elements, simply add the desired class to the element's class attribute. For example:

<div class="shadow-top p-3">Top Shadow</div>
<div class="shadow-bottom p-3">Bottom Shadow</div>
<div class="shadow-left p-3">Left Shadow</div>
<div class="shadow-right p-3">Right Shadow</div>

In this tutorial, you've learned how to use Bootstrap shadow direction classes to easily add shadows to elements from specific directions. By adjusting the shared base shadow properties and utilizing customizations, you can control the appearance of shadows in your web design projects.