CSS achieves colorful and smart shadow effects

background

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

I was walking Home Depot the other day and they were having a big display of the smart lights they were selling 💡 , one of which was a series of bulbs that sat behind the TV and projected a light that was close to the color displayed on the TV’s foreground screen, similar to what you can see in the picture below.

Pay attention to what's happening behind the TV. The colors displayed in the foreground of the TV screen are projected by the lamp as a colored shadow background. As the colors on the screen change, the background projection color also changes. Really cool, right?

After seeing this, the first natural thought that came to my mind was, could I use web development techniques to create a colorful shadow that is smart enough to simulate the foreground color? It turns out that this effect is entirely possible using only CSS . In this article, we'll look at how this can be achieved.

Let’s get started!

Make it happen

As you will discover in the following paragraphs, creating smart colored shadows using only CSS may seem like a daunting task at first, but as we proceed step by step and break the difficult parts into smaller pieces, you will find that everything becomes easier to understand and digest. In the following sections, we will create an example that looks like this:

What you see is a picture of sushi 🍣 with a shadow behind it that corresponds to the foreground color. To emphasize that what we are doing is dynamic, we added a pulsating animation effect to the shadow. With this working example in hand, let’s dive into how to make everything come alive using only HTML and CSS .

Show pictures

HTML for displaying the sushi 🍣 is as follows and there is nothing special about it:

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

We have a parent div element .parent which contains a child element .suchi which is used to display 🍣 . We instantiate 🍣 by using a background image. The specific style rules of the .sushi element are as follows:

.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 rules, we set div to 150 * 150 pixels in width and height, and set background-image and related properties. If we show the results we have achieved now, we can see the content shown in the following figure.

Creating Shadows

Now that we have our sushi 🍣 image displayed, the more interesting part is defining the shadow. We will define the shadow by specifying a child pseudo-element ::after , which will do 3 things:

• Directly behind div containing the image;
• Inherits the same background image as the parent element;
• The filter creates a colorful drop-shadow effect.

The above three functions are implemented by the following two 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 walk through the implementation here, paying close attention to each property and its corresponding value. The most noteworthy are background property and filter property. The value of background is inherit , which means it will inherit the background value of the parent element:

background: inherit;

filter property 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% transparency. The blur filter sets a 20px blur effect for the element. The combination of these two filters can ultimately create a colorful shadow. When these two style rules take effect, we can see the colorful shadow behind the sushi 🍣 image as shown below:

We have achieved a lot up to this point. For completeness, if you want your colorful shadows to animate as they scale in and out, here’s some extra CSS to help you achieve that:

.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 interactivity without looping animations, you can also use CSS transition to change the behavior of the shadow, such as on hover . The difficult point to emphasize is that you treat pseudo-elements just like you would an element created in HTML or dynamically created JavaScript , the only difference is that this element is created entirely using CSS only!

in conclusion

Pseudo-elements allow us to use CSS to create element creation tasks that are usually done within the realm of HTML and JavaScript . For our colorful smart shadows, we rely on the parent element having a background image set, which makes it easy for us to define a child element that can inherit the parent's background details while also setting blur effects and drop shadows. While this is all well and good and saves us a lot of copy-pasting work, this approach is also not very flexible.

What if I want to apply a shadow like this to an empty element that isn't just an empty element with a background image? What if I have an HTML element like a button or combobox that I want to apply this shadow effect to? One solution is to rely on JavaScript to copy the corresponding element in DOM , place it at the bottom of the foreground element, and apply the filter. This is also a method. While this works, I shudder at the thought of this somewhat heavy process of duplicating DOM elements. Even worse, JavaScript has no ability to translate any arbitrary visual intent you might provide into a render-target bitmap! 🥶

This article is a translation. Please visit the original address: https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
Article URL: https://www.cnblogs.com/dragonir/p/14758359.html Author: dragonir

This is the end of this article about how to achieve colorful and smart shadows with CSS. For more relevant CSS shadow implementation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!