c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
Css

Dynamic shadow-CSS examples

| | Css

Create a shadow similar to the one box-shadow based on the color of the element itself.

HTML CODE:

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

CSS CODE:

.dynamic-shadow-parent {
    positionrelative;
    z-index1;
}
 .dynamic-shadow {
    positionrelative;
    width10rem;
    height10rem;
    backgroundlinear-gradient(75deg, #6d78ff, #00ffb8);
}
     .dynamic-shadow::after {
        content'';
        width100%;
        height100%;
        positionabsolute;
        backgroundinherit;
        top0.5rem;
        filterblur(0.4rem);
        opacity0.7;
        z-index-1;
    }

Description

Code snippets require some complicated situations to properly stack the context so that the pseudo-elements will be positioned below the element itself while still being visible.

  1. position: relative A Cartesian positioning context is established for the child elements on the parent element.
  2. z-index: 1 Create new stacked content.
  3. position: relative The positioning context of the pseudo-element is established on the child.
  4. ::after Define pseudo elements.
  5. position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
  6. width: 100% And height: 100% Resize the pseudo-element to fill the dimensions of its parent element to make them equal in size.
  7. background: inherit Causes a pseudo-element to inherit the linear gradient specified on the element.
  8. top: 0.5rem Pseudo-element is slightly offset from its parent element.
  9. filter: blur(0.4rem) Blur the pseudo-element to create the appearance of the shadow below.
  10. opacity: 0.7 Make the pseudo-element part transparent.
  11. z-index: -1 Position the pseudo-element behind the parent element.