CODEWITHSUNDEEP
htmlcss
olegzhermal
olegzhermal

Reputation: 859

How to render inset box-shadow over the child element's background?

Run the snippet below:

.container {
  display: flex;
}

.container1 {
  box-shadow: inset 0 0 30px red;
  width: min-content;
}

.container2 {
  position: relative;
  margin-left: 20px;
  width: min-content;
}

.container2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px red;
}

.inner {
  width: 200px;
  height: 100px;
  background: yellow;
}

.text {
  width: 200px;
  height: 100px;
}
<div class="container">

  <div class="container1">
    <div class="inner"></div>
    <div class="text">Some text</div>
  </div>
  
  <div class="container2">
    <div class="inner"></div>
    <div class="text">Some text</div>
  </div>
  
</div>

Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?

One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).

Upvotes: 1

Views: 135

Answers (1)

hamid-davodi
hamid-davodi

Reputation: 1966

As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:

.container {
    display: flex;
  }
  
  .container1 {
    box-shadow: inset 0 0 30px red;
    width: 200px;
    height: 200px;
    position: relative;
  }
  
  
  .inner {
    width: 200px;
    height: 100px;
    background: yellow;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  
  .text {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 0;
  }

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

    <div class="container1">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    <!--
    <div class="container2">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    -->
    </div>
</body>
</html>

Without setting width and height:

If you don't want to set width and height you could use display:flex on .container1 element as follow:

.container {
    display: flex;
  }
 
  .container1 {
    box-shadow: inset 0 0 30px red;
    width: 35%;
    display: flex;
    flex-direction: column;
  }
  
  
  .inner {
    background: yellow;
    width: 100%;
    z-index: -1;
  }

  .inner img {
    width: 100%;
  }
  
  .text {
  color: #1415FF;
  }

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

    <div class="container1">
        <div class="inner">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
            <!-- <img src="birthday.png" alt=""> -->
        </div>
        <div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
    </div>
    <!--
    <div class="container2">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    -->
    </div>
</body>
</html>

I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.

Upvotes: 1

Related Questions