Dynamic CSS Shadows Creation

Introduction

In this lab, we will explore how to create dynamic shadows using CSS. You will learn how to use the ::after pseudo-element and various CSS properties such as background, filter, opacity, and z-index to create an effect that mimics a box-shadow, but is based on the colors of the element itself. By the end of this lab, you will be able to add an extra layer of depth and dimensionality to your designs.

Skills Graph

Dynamic Shadow

index.html and style.css have already been provided in the VM.

To create a shadow that is based on the colors of an element, follow these steps:

1. Use the ::after pseudo-element with position: absolute and width and height set to 100% to fill the available space in the parent element.

2. Inherit the background of the parent element by using background: inherit.

3. Slightly offset the pseudo-element using top. Then, use filter: blur() to create a shadow, and set opacity to make it semi-transparent.

4. Position the pseudo-element behind its parent by setting z-index: -1. Set z-index: 1 on the parent element.

Here's an example HTML and CSS code:

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Dynamic Shadow lab. You can practice more labs in LabEx to improve your skills.