Realize colorful and smart shadows using only CSS

background

Ever wondered how to create a shadow effect that inherits certain colors from the foreground element? Read this article and find out how to implement it!

A few days ago, I passed Home Depot ( Home Depot , the American Home Depot Company, the world’s leading retailer of home building materials), and they are exhibiting on a large scale the smart lights 💡 that are on sale. One of them is a series of light bulbs located behind the TV. They will project. A light similar to the color displayed on the foreground screen of the TV is displayed, similar to the following picture.

Pay attention to what happened behind the TV. The color displayed in the foreground of the TV screen is projected by the lamp into a colored shadow background. As the color on the screen changes, the background projection color also changes. It's really cool, right?

After seeing this, the first thing I naturally thought of was, can we use the web development technology to create a colorful, and smart enough to simulate the shadow of the foreground color? Facts have proved that this effect can be achieved CSS In this article, we will study how to achieve it.

Let's go!

Make it come true

In the following paragraphs, you will find that at first glance, at first glance, CSS seems to be a difficult task. When we step by step, we will split the difficult part into smaller parts. , You will find that everything will become easy to understand and digest. In the following chapters, we will create an example as shown below:

What you see is a picture of sushi 🍣 with a shadow that corresponds to the foreground color. To emphasize that what we are doing is dynamic, a pulsating animation effect is added to the shadow. With this effective example, let us delve into how to make everything come alive with HTML and CSS

Show pictures

There is nothing special about HTML used to display sushi 🍣

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

We have a parent div element .parent , which contains a child element .suchi to display 🍣 . 🍣 in the form of a background image. The specific style rules of the .sushi

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

In the above style rule, we set div to 150 * 150 width and height pixels, and set background-image and related attributes. If we show the results we have achieved now, we can see the content as shown in the figure below.

Create shadow

Now that we have shown our sushi 🍣 picture, the more interesting part is to define the shadow. We will use to specify a child pseudo-element ::after to define the shadow, it will do 3 things:

• Located directly behind the picture div ;
• Inherit the same background image as the parent element;
• Through the filter, a colorful drop-shadow shadow effect is produced.

The above 3 functions are implemented by the following 2 style rules:

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

Take a moment to browse the implementation here, paying close attention to each attribute and corresponding value. The most notable are the background attributes and filter attributes. background value is inherit , background which means it will inherit the parent element values:

background: inherit;

filter attribute defines two filter values: drop-shadow and blur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

Our drop-shadow filter sets a black shadow with 50% blur filter sets the blur effect of 20px for the element. The combination of these two filters can finally create colorful shadows. When these two style rules take effect, we can see the colorful shadows behind the 🍣

At this point, we have achieved a lot. For completeness, if you want colorful shadows with zooming in and out animation effects, the following additional CSS can help you achieve:

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

If you want to enhance the interactivity without using the loop animation effect, you can also use CSS transition to change the shadow behavior, as in the case of hover The difficulty that needs to be emphasized is that pseudo-elements only need to be treated like elements created HTML JavaScript dynamically created. The only difference is that this element is completely created CSS

in conclusion

Pseudo-elements allow us to use CSS to create element creation tasks that are usually done in the HTML and JavaScript For our colorful smart shadows, we rely on the parent element to have a background image set, which makes it easy for us to define a child element that can not only inherit the parent background details but also set the blur effect and projection effect. Although all this is very good, reducing our a lot of copy and paste work, but this method is not very flexible.

What if I want to apply such a shadow to an empty element with more than a background image? If I have a HTML element such as a button or combo box, do I want to apply this shadow effect? One solution is to rely on JavaScript copy DOM , place it at the bottom of the foreground element, and apply a filter. This is also a method. Although this can achieve the effect, I shudder at the DOM To make matters worse, JavaScript does not have the ability to convert any visual intent you want to render into a target bitmap! 🥶